/* ==========================================
   TAR GALLERY TIMELINE
========================================== */


/* ==========================================
   MAIN CONTAINER
========================================== */


#gm-gallery-timeline{


    width:100%;

    max-width:1400px;


    margin:80px auto;


    padding:20px;


    box-sizing:border-box;


    font-family:
    "Montserrat",
    sans-serif;


}





/* ==========================================
   TIMELINE
========================================== */


.gm-timeline{


    position:relative;


}






/* ==========================================
   CENTER LINE
========================================== */


.gm-timeline:before{


    content:"";


    position:absolute;


    top:0;


    bottom:0;


    left:50%;


    width:4px;


    background:#b59b63;


    transform:translateX(-50%);


    z-index:0;


    pointer-events:none;


}







/* ==========================================
   YEAR SECTION
========================================== */


.gm-horizontal .gm-year-section{

    display:flex;

    flex-direction:row;

    align-items:flex-start;

    margin:0;

}








.gm-year-title{


    text-align:center;


    margin-bottom:60px;


}






.gm-year-title span{


    display:inline-block;


    font-size:48px;


    font-weight:700;


    color:#7b6435;


    letter-spacing:2px;


    border-bottom:3px solid #b59b63;


    padding-bottom:10px;


}







/* ==========================================
   EVENTS
========================================== */


.gm-events{


    position:relative;


}







/* ==========================================
   EVENT ITEM
========================================== */


.gm-event{


    display:flex;


    align-items:center;


    margin:70px 0;


    position:relative;


}







/* LEFT / RIGHT */


.gm-event.left{


    justify-content:flex-start;


}





.gm-event.right{


    justify-content:flex-end;


}







/* ==========================================
   CENTER NODE AREA
========================================== */


.gm-center{


    width:80px;


    display:flex;


    justify-content:center;


    align-items:center;


    flex-shrink:0;


    position:relative;


    z-index:20;


}







/* NODE */


.gm-node{


    width:22px;


    height:22px;


    border-radius:50%;


    background:#c8a85f;


    border:5px solid #fff;


    box-shadow:


    0 0 0 3px #b59b63;


}


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


.gm-card{


    width:360px;


    background:#fff;


    border-radius:12px;


    overflow:hidden;


    box-shadow:


    0 10px 30px rgba(0,0,0,.12);


    transition:.35s;


    position:relative;


    isolation:isolate;


    z-index:100;


}







.gm-card:hover{


    transform:

    translateY(-6px)

    translateZ(0);


    z-index:999;


    box-shadow:


    0 18px 45px rgba(0,0,0,.18);


}







/* ==========================================
   DESKTOP ONLY
========================================== */

@media (min-width: 992px){

    .gm-card-image{

        height:260px;

        background:#fafafa;

        display:flex;

        justify-content:center;

        align-items:center;

        overflow:hidden;

        padding:15px;

        box-sizing:border-box;

    }

    .gm-card-image img{

        max-width:100%;

        max-height:100%;

        width:auto;

        height:auto;

        object-fit:contain;

        display:block;

    }

}






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


.gm-card-content{


    padding:20px;


}







.gm-card-title{

    margin:0 0 12px;

    font-size:22px;

    font-weight:700;

    color:#222;

    line-height:1.35;

    min-height:60px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}








.gm-card-location{

    color:#8a6e33;

    font-weight:600;

    margin-bottom:15px;

    min-height:24px;

}







.gm-card-description{


    color:#555;


    line-height:1.7;


    font-size:15px;


}








/* ==========================================
   DESKTOP TIMELINE LINE CLEARANCE
========================================== */


@media(min-width:901px){



.gm-card{


    margin-left:20px;


    margin-right:20px;


}






.gm-center{


    flex-shrink:0;


}






.gm-event.left .gm-card{


    margin-right:20px;


}






.gm-event.right .gm-card{


    margin-left:20px;


}



}








/* ==========================================
   YEAR TITLE ABOVE TIMELINE LINE
========================================== */


.gm-year-title{


    position:relative;


    z-index:5;


    background:#fff;


}








/* ==========================================
   PHOTO COURTESY
========================================== */


.gm-card-courtesy{


    margin-top:20px;


    padding-top:15px;


    border-top:1px solid #ddd;


    font-size:13px;


    line-height:1.6;


    color:#666;


}







.gm-card-courtesy strong{


    color:#8a6e33;


    font-weight:700;


}


/* ==========================================
   MOBILE RESPONSIVE TIMELINE
========================================== */

@media (max-width:900px){

    /* MAIN */

    #gm-gallery-timeline{
    width:100%;
    padding:15px 18px 15px 15px;   /* kanan lebih 3px */
    box-sizing:border-box;
    overflow:visible;
}


    /* TIMELINE LINE */

    .gm-timeline:before{

        left:28px;

    }


    /* YEAR */

    .gm-year-marker{

        margin:0 0 35px 65px;

    }

    .gm-year-marker span{

        display:inline-block;
        font-size:34px;
        font-weight:700;
        color:#7b6435;
        border-bottom:3px solid #b59b63;
        padding-bottom:8px;

    }


    /* EVENT */

    .gm-event,
    .gm-event.left,
    .gm-event.right{

        position:relative;

        display:flex;

        justify-content:flex-start;

        align-items:flex-start;

        width:100%;

        margin:35px 0;

        padding-left:52px;

        padding-right:15;

        box-sizing:border-box;

        overflow:visible;

    }


    /* NODE */

    .gm-center{

        position:absolute;

        left:0;

        top:0;

        width:52px;

        height:100%;

        display:flex;

        justify-content:center;

        align-items:flex-start;

    }

    .gm-node{

        width:18px;

        height:18px;

        margin-top:18px;

    }


    /* CARD */

    .gm-card{

    width:calc(100% - 4px);

    max-width:calc(100% - 4px);

    margin-right:4px;

    box-sizing:border-box;

}


    /* IMAGE */

    .gm-card-image{

        width:100%;

        height:210px;

        padding:12px;

        display:flex;

        justify-content:center;

        align-items:center;

        background:#fafafa;

        overflow:visible;

        box-sizing:border-box;

    }

    .gm-card-image img{

        max-width:100%;

        max-height:100%;

        width:auto;

        height:auto;

        object-fit:contain;

        display:block;

    }


    /* CONTENT */

    .gm-card-content{

        padding:18px;

        box-sizing:border-box;

    }

    .gm-card-title{

        font-size:20px;

        line-height:1.45;

        margin-bottom:12px;

        min-height:auto;

        overflow:visible;

        display:block;

    }

    .gm-card-location{

        font-size:15px;

        margin-bottom:14px;

    }

    .gm-card-description{

        font-size:15px;

        line-height:1.7;

    }

}







/* ==========================================
   IMAGE LIGHTBOX
========================================== */


.gm-gallery-image{


cursor:pointer;


transition:.3s;


}






.gm-gallery-image:hover{


transform:scale(1.03);


}







.gm-lightbox{


position:fixed;


inset:0;


background:rgba(0,0,0,.85);


display:flex;


align-items:center;


justify-content:center;


opacity:0;


visibility:hidden;


transition:.3s;


z-index:999999;


}







.gm-lightbox.active{


opacity:1;


visibility:visible;


}







.gm-lightbox-wrapper{


position:relative;


max-width:90%;


max-height:90%;


}







.gm-lightbox-image{


max-width:90vw;


max-height:85vh;


object-fit:contain;


display:block;


}







.gm-lightbox-close{


position:absolute;


right:-40px;


top:-40px;


font-size:45px;


color:white;


cursor:pointer;


}


/* ==========================================
   FINAL MOBILE OVERFLOW FIX
========================================== */


html,
body{

    max-width:100%;

    overflow-x:hidden;

}



@media(max-width:900px){



    #gm-gallery-timeline,
    .gm-timeline,
    .gm-events,
    .gm-event{


        max-width:100%;

        overflow-x:hidden;


    }



    .gm-center{


        max-width:60px;

        overflow:hidden;


    }



    .gm-lightbox-close{


        right:10px;


    }



}


/* ==========================================
   MOBILE LIGHTBOX CLOSE BUTTON POSITION
========================================== */


@media(max-width:900px){


    .gm-lightbox-close{


        top:-55px;


        right:5px;


        font-size:38px;


    }


}


/* ==========================================
BACK TO TOP - VERTICAL SLIDER ARROW
========================================== */

.gm-back-to-top{

    position:fixed;

    right:25px;
    bottom:25px;

    width:45px;
    height:45px;

    border:none;
    border-radius:0;

    background:#af8f7b;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;

    z-index:99999;

    box-shadow:none;

    /* sembunyikan arrow asal */
    font-size:0;
}


/* ARROW */

.gm-back-to-top::before{

    content:"";

    width:11px;
    height:11px;

    border-left:2px solid #fff;
    border-top:2px solid #fff;

    transform:rotate(45deg);

    position:absolute;

    top:17px;
}


/* ACTIVE */

.gm-back-to-top.active{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}


/* HOVER */

.gm-back-to-top:hover{

    background:#9f7f6d;

    transform:translateY(-4px);

}


/* MOBILE */

@media(max-width:900px){

    .gm-back-to-top{

        right:15px;
        bottom:20px;

        width:42px;
        height:42px;

    }

    .gm-back-to-top::before{

        width:10px;
        height:10px;

        top:16px;

    }

}


/* ==========================================
   MOBILE CARD SHADOW FIX
========================================== */

@media(max-width:900px){


    .gm-event,
    .gm-event.left,
    .gm-event.right{

        overflow:visible;

    }


    .gm-card{
    box-shadow:none;
    border:1px solid #2f2f2f;
}


}


/* ==========================================
   MOBILE CARD TOP SHADOW SPACE FIX
========================================== */

@media(max-width:900px){


    .gm-card{

        margin-top:25px;

    }


}


/* ==========================================
UNIFORM CARD
========================================== */

.gm-card{

    display:flex;

    flex-direction:column;

    height:auto;
}


.gm-card-content{

    display:flex;

    flex-direction:column;

    flex:1;

}


.gm-description-wrapper{

    flex:1;

}


.gm-card-courtesy{

    margin-top:auto;

    padding-top:15px;

    border-top:1px solid #ececec;

}


/* ==========================================
READ MORE
========================================== */

.gm-read-more{

    margin-top:8px;

    padding:0;

    border:none;

    background:none;

    color:#0d6efd;

    cursor:pointer;

    font-size:13px;

    font-weight:600;

}


.gm-read-more:hover{

    text-decoration:underline;

}


/* ==========================================
   DESKTOP HORIZONTAL TIMELINE
========================================== */

@media(min-width:1200px){


.gm-horizontal{

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.gm-horizontal::-webkit-scrollbar{

    width:0;

    height:0;

}





/* EVENTS ROW */

/* ==========================================
   HORIZONTAL EVENTS
========================================== */

.gm-horizontal .gm-events{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    align-items:center;

    gap:40px;

    width:max-content;

    min-width:100%;

    padding:40px 20px 0px;

    overflow:visible;

}



/* Hide scrollbar but keep scrolling */

.gm-horizontal .gm-events{

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.gm-horizontal .gm-events::-webkit-scrollbar{

    width:0;

    height:0;

    display:none;

}




/* REMOVE VERTICAL LINE */

.gm-horizontal:before{

    display:none;

}



/* EVENT */

.gm-horizontal .gm-event{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    flex:0 0 360px;

    margin:0;

}



/* CARD ABOVE NODE */


.gm-horizontal .gm-event.left .gm-card,
.gm-horizontal .gm-event.right .gm-card{


    order:1;

    margin:0;


}




/* NODE */

.gm-horizontal .gm-center{


    order:2;

    height:60px;

}



/* CARD IMAGE */


.gm-horizontal .gm-card-image{


    height:260px;


}


}


/* ==========================================
   HORIZONTAL YEAR MARKER
========================================== */

@media(min-width:992px){


.gm-horizontal .gm-year-marker{

    flex:0 0 120px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.gm-horizontal .gm-year-marker span{

    font-size:36px;

    font-weight:700;

    color:#7b6435;

    border-bottom:3px solid #b59b63;

    padding-bottom:8px;

}


}


/* ==========================================
   YEAR MARKER POSITION FIX
========================================== */

@media(min-width:992px){


.gm-horizontal .gm-year-marker{

    height:360px;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding-top:0;

}



.gm-horizontal .gm-year-marker span{

    display:block;

    font-size:42px;

    font-weight:700;

    color:#7b6435;

    border-bottom:3px solid #b59b63;

    padding-bottom:10px;

}


}

/* ==========================================
   HORIZONTAL YEAR TITLE FIX
========================================== */

@media(min-width:992px){

    .gm-horizontal .gm-year-title{

        flex:0 0 120px;

        margin:0;

        display:flex;

        align-items:center;

        justify-content:center;

    }


    .gm-horizontal .gm-year-title span{

        font-size:36px;

    }

}


/* ==========================================
   FORCE ALL YEARS INTO ONE HORIZONTAL ROW
========================================== */

@media(min-width:992px){

    .gm-horizontal{

        display:block;

    }


    .gm-horizontal .gm-year-section{

        display:inline-flex;

        flex-direction:row;

        align-items:flex-start;

        margin:0;

    }


    .gm-horizontal .gm-year-title{

        flex:0 0 120px;

    }


    .gm-horizontal .gm-events{

        display:flex;

        flex-direction:row;

        flex-wrap:nowrap;

    }

}


/* ==========================================
ACTIVE YEAR BUTTON
========================================== */

.gm-year-button{

    background:#fff;

    border:2px solid #b59b63;

    color:#7b6435;

    padding:10px 18px;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}


.gm-year-button:hover{

    background:#b59b63;

    color:#fff;

}


.gm-year-button.active{

    background:#b59b63;

    color:#fff;

}

/* ==========================================
   YEAR NAVIGATION
========================================== */

.gm-year-nav{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    align-items:center;

    margin-bottom:30px;

}



/* ==========================================
   DESKTOP - RAPATKAN YEAR NAV DENGAN TIMELINE
========================================== */

@media(min-width:1200px){

    .gm-year-nav{

        margin-bottom:-15px;

    }

}




/* ==========================================
   HIDE YEAR NAVIGATION ON MOBILE
========================================== */

@media(max-width:900px){

    .gm-year-nav{

        display:none;

    }

}


/* ==========================================
   DESKTOP ONLY - HIDE DESCRIPTION
========================================== */

@media (min-width:1200px){

    .gm-desktop-description{

        display:none;

    }

}



/* ==========================================
   DESKTOP READ MORE BUTTON
========================================== */

@media (min-width:1200px){

    .gm-read-more-desktop{

        display:inline-block;

        width:auto;

        margin-top:10px;

        padding:8px 22px;

        border:none;

        border-radius:20px;

        background:#b59b63;

        color:#fff;

        cursor:pointer;

        font-size:13px;

        font-weight:600;

        line-height:1.2;

        white-space:nowrap;

        transition:background .3s;

    }

    .gm-read-more-desktop:hover{

        background:#9f854e;

    }

}



/* ==========================================
   DESKTOP - REDUCE TOP SPACING
========================================== */

@media (min-width:1200px){

    #gm-gallery-timeline{

        margin:5px auto 20px;

    }

}


/* ==========================================
   DESKTOP - COMPACT CARD
========================================== */

@media (min-width:1200px){

    /* Content lebih padat */

    .gm-card-content{

        padding:15px;

    }

    /* Title lebih kemas */

    .gm-card-title{

        font-size:19px;

        line-height:1.25;

        min-height:48px;

        margin-bottom:8px;

    }

    /* Location lebih rapat */

    .gm-card-location{

        margin-bottom:8px;

        min-height:auto;

        font-size:14px;

    }

    /* Read More lebih rapat */

    .gm-read-more-desktop{

        margin-top:6px;

        padding:7px 18px;

        font-size:12px;

    }

}



/* ==========================================
   DESKTOP CARD POINTER
========================================== */

@media (min-width:1200px){

    /* Card pertama selepas YEAR (tahun di kiri card) */
    .gm-year-section > .gm-events > .gm-event:first-child .gm-card::before{

        content:"";

        position:absolute;

        left:-18px;

        top:50%;

        transform:translateY(-50%);

        width:18px;

        height:36px;

        background:#fff;

        clip-path:polygon(100% 0,0 50%,100% 100%);

        box-shadow:-4px 4px 10px rgba(0,0,0,.08);

    }

}



/* ==========================================
   DESKTOP CARD POINTER TEST
========================================== */

@media (min-width:1200px){

    .gm-card-pointer{

        width:30px;
        height:30px;

        background:#ffffff;
        box-shadow:0 4px 12px rgba(0,0,0,0.15);

        flex:0 0 30px;

        position:relative;

        transform:translate(-180px,140px) rotate(45deg);

        z-index:1;

    }

}