.elementor-229378 .elementor-element.elementor-element-e39fe8f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-229378 .elementor-element.elementor-element-7e6d1d8{--swiper-slides-to-display:1;--swiper-slides-gap:10px;--dots-normal-color:#FFFFFF61;--dots-horizontal-position:50%;--dots-horizontal-transform:-50%;--dots-horizontal-offset:0px;--dots-vertical-position:100%;--dots-vertical-transform:-100%;--dots-vertical-offset:-120px;}.elementor-229378 .elementor-element.elementor-element-7e6d1d8 .swiper-slide > .elementor-element{height:100%;}.elementor-229378 .elementor-element.elementor-element-4c146a3 .elementor-heading-title{font-family:"After", Sans-serif;}.elementor-229378 .elementor-element.elementor-element-4b3a55f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-229378 .elementor-element.elementor-element-ae3c7d2 > .elementor-widget-container{padding:0px 0px 30px 0px;}.elementor-229378 .elementor-element.elementor-element-ae3c7d2{text-align:center;}.elementor-229378 .elementor-element.elementor-element-ae3c7d2 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:55px;font-weight:800;}.elementor-229378 .elementor-element.elementor-element-9d25753{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-button{background-color:#F42727;fill:#F5F5F5;color:#F5F5F5;border-radius:50px 50px 50px 50px;}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.48 * 100% );}.elementor-229378 .elementor-element.elementor-element-9d25753:after{content:"0.48";}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__thumbnail__link{width:100%;}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__title, .elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__title a{color:#381E1E;font-family:"Manrope", Sans-serif;font-size:45px;font-weight:800;}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__read-more{color:#FFFFFF;}.elementor-229378 .elementor-element.elementor-element-9d25753 a.elementor-post__read-more{font-family:"Raleway", Sans-serif;font-size:18px;}@media(max-width:1366px){.elementor-229378 .elementor-element.elementor-element-e39fe8f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-229378 .elementor-element.elementor-element-7e6d1d8{--swiper-slides-to-display:1;}.elementor-229378 .elementor-element.elementor-element-4b3a55f{--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}}@media(max-width:1024px){.elementor-229378 .elementor-element.elementor-element-7e6d1d8{--swiper-slides-to-display:1;--dots-vertical-offset:-45px;}.elementor-229378 .elementor-element.elementor-element-7e6d1d8 .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:0px;--swiper-pagination-bullet-vertical-gap:0px;}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-229378 .elementor-element.elementor-element-9d25753:after{content:"0.5";}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__title, .elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__title a{font-size:30px;}}@media(max-width:767px){.elementor-229378 .elementor-element.elementor-element-7e6d1d8{--swiper-slides-to-display:1;--dots-vertical-offset:-40px;}.elementor-229378 .elementor-element.elementor-element-4b3a55f{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-229378 .elementor-element.elementor-element-ae3c7d2 .elementor-heading-title{font-size:30px;}.elementor-229378 .elementor-element.elementor-element-9d25753{--grid-row-gap:20px;}.elementor-229378 .elementor-element.elementor-element-9d25753 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.63 * 100% );}.elementor-229378 .elementor-element.elementor-element-9d25753:after{content:"0.63";}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__thumbnail__link{width:100%;}.elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__title, .elementor-229378 .elementor-element.elementor-element-9d25753 .elementor-post__title a{font-size:20px;}.elementor-229378 .elementor-element.elementor-element-9d25753 a.elementor-post__read-more{font-size:13px;}}/* Start custom CSS for loop-carousel, class: .elementor-element-7e6d1d8 *//*************************************************
 LOOP CAROUSEL – LINE PAGINATION
 Target class: .myloopcarousel
**************************************************/

/* Container pagination */
.myloopcarousel .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Default dot → garis */
.myloopcarousel .swiper-pagination-bullet {
    width: 30vw;
    height: 3px;
    border-radius: 4px;
    opacity: 1;
    transition: background 0.3s ease;
}

/* Active state */
.myloopcarousel .swiper-pagination-bullet-active {
    background: #D51D1D;
}

/*************************************************
 TABLET
**************************************************/
@media (max-width: 1024px) {
    .myloopcarousel .swiper-pagination-bullet {
        width: 120px;
        height: 4px;
    }
}

/*************************************************
 MOBILE
**************************************************/
@media (max-width: 767px) {
    .myloopcarousel .swiper-pagination-bullet {
        width: 48px;
        height: 4px;
    }
}/* End custom CSS */
/* Start custom CSS for archive-posts, class: .elementor-element-9d25753 *//**********************************************************
    TARGET : ARCHIVE POSTS CUSTOM CARD
**********************************************************/
.my-archive-cards .elementor-post {
    position: relative;
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 40px;
    z-index: 1; 
}

/**********************************************************
    1) WRAPPER untuk menjaga border-radius gambar
**********************************************************/
.my-archive-cards .elementor-post__thumbnail {
    overflow: hidden; /* hanya gambar yang terpotong rounded */
    border-radius: 40px;
}

/**********************************************************
    2) IMAGE full
**********************************************************/
.my-archive-cards .elementor-post__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/**********************************************************
    3) Hapus ruang putih bawaan tetapi jangan hilangkan text
**********************************************************/
.my-archive-cards .elementor-post__text {
    position: absolute;
    inset: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    pointer-events: none;
}

.my-archive-cards .elementor-post__text > * {
    pointer-events: auto;
}

/**********************************************************
    4) TITLE keluar ke kiri
**********************************************************/
.my-archive-cards .elementor-post .elementor-post__title {
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
    
    font-size: 32px;
    font-weight: 700;
    color: #fff;


    max-width: 40vw; /* Agar responsif + tidak keluar layar */
    line-height: 1.2;
    word-break: break-word;
    white-space: normal; /* supaya text bisa turun baris */

    opacity: 0;
    transition: .35s ease;
    z-index: 5;
}


/**********************************************************
    5) READ MORE keluar ke kanan
**********************************************************/
.my-archive-cards .elementor-post .elementor-post__read-more {
    position: absolute;
    top: 50%;
    right: -13%;
    transform: translateY(-50%);
    padding: 12px 28px;
    border-radius: 50px;
    background: #000;
    color: #000;
    font-weight: 600;
    text-decoration: none;

    opacity: 0;
    transition: .35s ease;
    z-index: 5;
}

/**********************************************************
    6) SHOW ON HOVER
**********************************************************/
.my-archive-cards .elementor-post:hover .elementor-post__title,
.my-archive-cards .elementor-post:hover .elementor-post__read-more {
    opacity: 1;
}

/**********************************************************
    7) DARK overlay (tetap berada dalam radius)
**********************************************************/
.my-archive-cards .elementor-post::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.25);
    opacity: 0;
    transition: .35s ease;
    border-radius: 40px;
    z-index: 2;
}

.my-archive-cards .elementor-post:hover::after {
    opacity: 1;
}

/***********************************************
 * MOBILE & TABLET VERSION (≤ 1024px)
 * Title + Read More selalu muncul (tanpa hover)
 ***********************************************/
@media (max-width: 1024px) {

    /* Layout card mengikuti tinggi konten */
    .my-archive-cards .elementor-post {
        overflow: visible !important;
        padding-bottom: 20px; /* ruang bawah untuk text */
    }

    /* Text container aktif kembali */
    .my-archive-cards .elementor-post__text {
        display: block !important;
        position: static !important;
        background: transparent !important;
        text-align: center;
        margin-top: 15px;
        padding: 0 !important;
    }

    /* TITLE pindah ke bawah image dan SELALU tampil */
    .my-archive-cards .elementor-post .elementor-post__title {
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;

        opacity: 1 !important; /* selalu terlihat */
        margin-bottom: 10px;

        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        color: #000; /* jika ingin dark mode? bisa diganti */
    }

    /* READ MORE pindah ke bawah, selalu tampil */
    .my-archive-cards .elementor-post .elementor-post__read-more {
        position: static !important;
        transform: none !important;

        opacity: 1 !important;
        margin-top: 8px;

        display: inline-block;
        text-align: center;
        background: #000;
        color: #fff;
    }

    /* Hilangkan overlay di mobile/tablet */
    .my-archive-cards .elementor-post::after {
        display: none !important;
    }

    /* Matikan hover behavior di mobile/tablet */
    .my-archive-cards .elementor-post:hover .elementor-post__title,
    .my-archive-cards .elementor-post:hover .elementor-post__read-more {
        opacity: 1 !important;
    }
}

@media (max-width: 1367px) {

    .my-archive-cards .elementor-post .elementor-post__title {
        left: -5%; 
        max-width: 45vw;
        font-size: 28px;
    }

    .my-archive-cards .elementor-post .elementor-post__read-more {
        right: -6%;
        padding: 10px 24px;
    }
    
}

@media (max-width: 767px) {
    .my-archive-cards .elementor-post .elementor-post__read-more {
        right: -6%;
        padding: 5px 15px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b3a55f *//* Laptop kecil / 1366px ke bawah */
@media (max-width: 1467px) {
    .archivecontainer {
        padding: 90px !important;
    }
}

@media (max-width: 767px) {
    .archivecontainer {
        padding: 10px !important;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'After';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://endeecom.com/wp-content/uploads/2025/12/After-Regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */