.elementor-5699 .elementor-element.elementor-element-ad151c6{--display:flex;--min-height:450px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.5;--border-radius:-5px -5px -5px -5px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:41px;--padding-left:56px;--padding-right:56px;}.elementor-5699 .elementor-element.elementor-element-ad151c6:not(.elementor-motion-effects-element-type-background), .elementor-5699 .elementor-element.elementor-element-ad151c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://belajar-wordpress.artsyanaid.com/wp-content/uploads/2026/09/lempuyang-1.png");background-position:center center;background-size:cover;}.elementor-5699 .elementor-element.elementor-element-ad151c6::before, .elementor-5699 .elementor-element.elementor-element-ad151c6 > .elementor-background-video-container::before, .elementor-5699 .elementor-element.elementor-element-ad151c6 > .e-con-inner > .elementor-background-video-container::before, .elementor-5699 .elementor-element.elementor-element-ad151c6 > .elementor-background-slideshow::before, .elementor-5699 .elementor-element.elementor-element-ad151c6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5699 .elementor-element.elementor-element-ad151c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-5699 .elementor-element.elementor-element-4ed7713{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5699 .elementor-element.elementor-element-f5b6a72{--display:flex;--min-height:0px;--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;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:2px;--padding-left:25px;--padding-right:0px;}.elementor-5699 .elementor-element.elementor-element-13ecac1{--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;--justify-content:center;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5699 .elementor-element.elementor-element-13ecac1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5699 .elementor-element.elementor-element-2df98c1 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:500;line-height:1.08em;}.elementor-5699 .elementor-element.elementor-element-6a0aaa4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-5699 .elementor-element.elementor-element-6a0aaa4 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:500;line-height:1.08em;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5699 .elementor-element.elementor-element-09f33c9{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:500;line-height:1.65em;color:#F7F1E7;}.elementor-5699 .elementor-element.elementor-element-0aa245d{--display:flex;}.elementor-5699 .elementor-element.elementor-element-52cd498{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-2e4a668{--display:flex;}.elementor-5699 .elementor-element.elementor-element-15ae303{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-a3d687b .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:#121212;}.elementor-5699 .elementor-element.elementor-element-af8a8e6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5699 .elementor-element.elementor-element-e228df1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-e87bf6b{--display:flex;}.elementor-5699 .elementor-element.elementor-element-5803a83{--display:flex;}.elementor-5699 .elementor-element.elementor-element-5293340 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:600;color:#121212;}.elementor-5699 .elementor-element.elementor-element-e296fc3{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-8f4cedc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
.elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-5699 .elementor-element.elementor-element-ba6c741 .elementor-icon-box-wrapper{gap:15px;}.elementor-5699 .elementor-element.elementor-element-ba6c741.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-ba6c741.elementor-view-framed .elementor-icon, .elementor-5699 .elementor-element.elementor-element-ba6c741.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-ba6c741 .elementor-icon-box-title, .elementor-5699 .elementor-element.elementor-element-ba6c741 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:22px;font-weight:700;}.elementor-5699 .elementor-element.elementor-element-ba6c741 .elementor-icon-box-title{color:#000000;}.elementor-5699 .elementor-element.elementor-element-ba6c741:has(:hover) .elementor-icon-box-title,
.elementor-5699 .elementor-element.elementor-element-ba6c741:has(:focus) .elementor-icon-box-title{color:#74142A;}.elementor-5699 .elementor-element.elementor-element-ba6c741 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-c88eaba .elementor-icon-box-wrapper{gap:15px;}.elementor-5699 .elementor-element.elementor-element-c88eaba.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-c88eaba.elementor-view-framed .elementor-icon, .elementor-5699 .elementor-element.elementor-element-c88eaba.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-c88eaba .elementor-icon-box-title, .elementor-5699 .elementor-element.elementor-element-c88eaba .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:22px;font-weight:700;}.elementor-5699 .elementor-element.elementor-element-c88eaba .elementor-icon-box-title{color:#000000;}.elementor-5699 .elementor-element.elementor-element-c88eaba:has(:hover) .elementor-icon-box-title,
.elementor-5699 .elementor-element.elementor-element-c88eaba:has(:focus) .elementor-icon-box-title{color:#74142A;}.elementor-5699 .elementor-element.elementor-element-c88eaba .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee .elementor-icon-box-wrapper{gap:15px;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee.elementor-view-framed .elementor-icon, .elementor-5699 .elementor-element.elementor-element-d2eb0ee.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee .elementor-icon-box-title, .elementor-5699 .elementor-element.elementor-element-d2eb0ee .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:22px;font-weight:700;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee .elementor-icon-box-title{color:#000000;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee:has(:hover) .elementor-icon-box-title,
.elementor-5699 .elementor-element.elementor-element-d2eb0ee:has(:focus) .elementor-icon-box-title{color:#74142A;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-0b9aa54{--display:flex;}.elementor-5699 .elementor-element.elementor-element-ab7ad88{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-ff266a1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-678a399 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;}.elementor-5699 .elementor-element.elementor-element-e1e78fa{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-b04c679{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5699 .elementor-element.elementor-element-0047c52{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-a158bac{--display:flex;}.elementor-5699 .elementor-element.elementor-element-af241e7 .elementor-icon-box-wrapper{text-align:center;gap:15px;}.elementor-5699 .elementor-element.elementor-element-af241e7.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-af241e7.elementor-view-framed .elementor-icon, .elementor-5699 .elementor-element.elementor-element-af241e7.elementor-view-default .elementor-icon{fill:var( --e-global-color-7eee4be );color:var( --e-global-color-7eee4be );border-color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-af241e7 .elementor-icon-box-title, .elementor-5699 .elementor-element.elementor-element-af241e7 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:35px;font-weight:600;}.elementor-5699 .elementor-element.elementor-element-af241e7 .elementor-icon-box-title{color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-af241e7:has(:hover) .elementor-icon-box-title,
.elementor-5699 .elementor-element.elementor-element-af241e7:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-af241e7 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-df964cb{--display:flex;}.elementor-5699 .elementor-element.elementor-element-0eacbdc .elementor-icon-box-wrapper{gap:15px;}.elementor-5699 .elementor-element.elementor-element-0eacbdc.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-0eacbdc.elementor-view-framed .elementor-icon, .elementor-5699 .elementor-element.elementor-element-0eacbdc.elementor-view-default .elementor-icon{fill:var( --e-global-color-7eee4be );color:var( --e-global-color-7eee4be );border-color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-0eacbdc .elementor-icon-box-title, .elementor-5699 .elementor-element.elementor-element-0eacbdc .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:35px;font-weight:600;}.elementor-5699 .elementor-element.elementor-element-0eacbdc .elementor-icon-box-title{color:#000000;}.elementor-5699 .elementor-element.elementor-element-0eacbdc:has(:hover) .elementor-icon-box-title,
.elementor-5699 .elementor-element.elementor-element-0eacbdc:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-0eacbdc .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-57554fb{--display:flex;}.elementor-5699 .elementor-element.elementor-element-902ee7e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-0ea8513{--display:flex;}.elementor-5699 .elementor-element.elementor-element-e831fd4 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;}.elementor-5699 .elementor-element.elementor-element-29b0c99{--display:flex;}.elementor-5699 .elementor-element.elementor-element-c8c2634{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-c9a79f1{--display:flex;}.elementor-widget-image-box .elementor-image-box-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image-box:has(:hover) .elementor-image-box-title,
.elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-5699 .elementor-element.elementor-element-2de1198.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5699 .elementor-element.elementor-element-2de1198.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5699 .elementor-element.elementor-element-2de1198.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-2de1198 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-5699 .elementor-element.elementor-element-2de1198 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5699 .elementor-element.elementor-element-2de1198 .elementor-image-box-title{font-family:"El Messiri", Sans-serif;font-size:35px;font-weight:600;color:#000000;}.elementor-5699 .elementor-element.elementor-element-2de1198:has(:hover) .elementor-image-box-title,
.elementor-5699 .elementor-element.elementor-element-2de1198:has(:focus) .elementor-image-box-title{color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-2de1198 .elementor-image-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-d8e01ff{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-ab7e0ba{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-b057c19.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5699 .elementor-element.elementor-element-b057c19.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5699 .elementor-element.elementor-element-b057c19.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-b057c19 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-5699 .elementor-element.elementor-element-b057c19 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5699 .elementor-element.elementor-element-b057c19 .elementor-image-box-title{font-family:"El Messiri", Sans-serif;font-size:30px;font-weight:600;color:#000000;}.elementor-5699 .elementor-element.elementor-element-b057c19:has(:hover) .elementor-image-box-title,
.elementor-5699 .elementor-element.elementor-element-b057c19:has(:focus) .elementor-image-box-title{color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-b057c19 .elementor-image-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-cab68cb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-6cca218.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5699 .elementor-element.elementor-element-6cca218.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5699 .elementor-element.elementor-element-6cca218.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-6cca218 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-5699 .elementor-element.elementor-element-6cca218 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5699 .elementor-element.elementor-element-6cca218 .elementor-image-box-title{font-family:"El Messiri", Sans-serif;font-size:30px;font-weight:600;color:#000000;}.elementor-5699 .elementor-element.elementor-element-6cca218:has(:hover) .elementor-image-box-title,
.elementor-5699 .elementor-element.elementor-element-6cca218:has(:focus) .elementor-image-box-title{color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-6cca218 .elementor-image-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-ba7711a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5699 .elementor-element.elementor-element-9cfe82d.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5699 .elementor-element.elementor-element-9cfe82d.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5699 .elementor-element.elementor-element-9cfe82d.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-9cfe82d .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-5699 .elementor-element.elementor-element-9cfe82d .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5699 .elementor-element.elementor-element-9cfe82d .elementor-image-box-title{font-family:"El Messiri", Sans-serif;font-size:30px;font-weight:600;color:#000000;}.elementor-5699 .elementor-element.elementor-element-9cfe82d:has(:hover) .elementor-image-box-title,
.elementor-5699 .elementor-element.elementor-element-9cfe82d:has(:focus) .elementor-image-box-title{color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-9cfe82d .elementor-image-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-0387e08{--display:flex;}.elementor-5699 .elementor-element.elementor-element-4e9d8a1{--display:flex;--min-height:350px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:50px 50px 50px 50px;box-shadow:0px 2px 5px 0px rgba(178, 34.00000000000002, 34.00000000000002, 0.34);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5699 .elementor-element.elementor-element-a6207f9{--display:flex;--border-radius:0px 0px 0px 0px;}.elementor-5699 .elementor-element.elementor-element-a6207f9:not(.elementor-motion-effects-element-type-background), .elementor-5699 .elementor-element.elementor-element-a6207f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://belajar-wordpress.artsyanaid.com/wp-content/uploads/2026/10/Desa-Pinggan-Kintamani_mikevisua-e1741676347109.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5699 .elementor-element.elementor-element-4d1d41e{--display:flex;--justify-content:center;--border-radius:0px 0px 0px 0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5699 .elementor-element.elementor-element-4d1d41e:not(.elementor-motion-effects-element-type-background), .elementor-5699 .elementor-element.elementor-element-4d1d41e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-7eee4be );}.elementor-5699 .elementor-element.elementor-element-6c2b7d0.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-5699 .elementor-element.elementor-element-6c2b7d0 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:45px;font-weight:500;color:#FFFFFF;}.elementor-5699 .elementor-element.elementor-element-3728741{margin:-5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-5699 .elementor-element.elementor-element-59b7a50 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-5699 .elementor-element.elementor-element-59b7a50 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-5699 .elementor-element.elementor-element-59b7a50{--e-icon-list-icon-size:19px;--icon-vertical-offset:0px;}.elementor-5699 .elementor-element.elementor-element-59b7a50 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5699 .elementor-element.elementor-element-59b7a50 .elementor-icon-list-item > a{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5699 .elementor-element.elementor-element-59b7a50 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-5699 .elementor-element.elementor-element-32388a1 .elementor-button{background-color:#009CE70A;font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:500;border-style:solid;border-width:1px 1px 1px 1px;border-radius:10px 10px 10px 10px;padding:15px 15px 15px 15px;}.elementor-5699 .elementor-element.elementor-element-32388a1 .elementor-button-content-wrapper{flex-direction:row-reverse;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-5699 .elementor-element.elementor-element-ad151c6{--width:100%;}.elementor-5699 .elementor-element.elementor-element-f5b6a72{--content-width:100%;}.elementor-5699 .elementor-element.elementor-element-13ecac1{--width:87.366%;}.elementor-5699 .elementor-element.elementor-element-a6207f9{--width:40%;}.elementor-5699 .elementor-element.elementor-element-4d1d41e{--width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-5699 .elementor-element.elementor-element-13ecac1{--width:72%;}}@media(min-width:1025px){.elementor-5699 .elementor-element.elementor-element-ad151c6:not(.elementor-motion-effects-element-type-background), .elementor-5699 .elementor-element.elementor-element-ad151c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-5699 .elementor-element.elementor-element-ad151c6{--min-height:349px;--padding-top:82px;--padding-bottom:68px;--padding-left:30px;--padding-right:30px;}.elementor-5699 .elementor-element.elementor-element-f5b6a72{--padding-top:0px;--padding-bottom:0px;--padding-left:22px;--padding-right:22px;}.elementor-5699 .elementor-element.elementor-element-2df98c1 .elementor-heading-title{font-size:18px;}.elementor-5699 .elementor-element.elementor-element-6a0aaa4 .elementor-heading-title{font-size:50px;}.elementor-5699 .elementor-element.elementor-element-09f33c9{font-size:14px;}}@media(max-width:767px){.elementor-5699 .elementor-element.elementor-element-ad151c6{--padding-top:62px;--padding-bottom:58px;--padding-left:18px;--padding-right:18px;}.elementor-5699 .elementor-element.elementor-element-4ed7713{--padding-top:70px;--padding-bottom:36px;--padding-left:0px;--padding-right:0px;}.elementor-5699 .elementor-element.elementor-element-f5b6a72{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-5699 .elementor-element.elementor-element-13ecac1{--width:100%;}.elementor-5699 .elementor-element.elementor-element-2df98c1 .elementor-heading-title{font-size:14px;}.elementor-5699 .elementor-element.elementor-element-6a0aaa4 .elementor-heading-title{font-size:45px;}.elementor-5699 .elementor-element.elementor-element-09f33c9{font-size:14px;}.elementor-5699 .elementor-element.elementor-element-a3d687b .elementor-heading-title{font-size:45px;}.elementor-5699 .elementor-element.elementor-element-5293340 .elementor-heading-title{font-size:45px;}.elementor-5699 .elementor-element.elementor-element-e296fc3{font-size:15px;}.elementor-5699 .elementor-element.elementor-element-ba6c741 .elementor-icon-box-wrapper{text-align:center;}.elementor-5699 .elementor-element.elementor-element-c88eaba .elementor-icon-box-wrapper{text-align:center;}.elementor-5699 .elementor-element.elementor-element-d2eb0ee .elementor-icon-box-wrapper{text-align:center;}.elementor-5699 .elementor-element.elementor-element-678a399 .elementor-heading-title{font-size:45px;}.elementor-5699 .elementor-element.elementor-element-b04c679{font-size:15px;}.elementor-5699 .elementor-element.elementor-element-af241e7 .elementor-icon-box-title, .elementor-5699 .elementor-element.elementor-element-af241e7 .elementor-icon-box-title a{font-size:35px;}.elementor-5699 .elementor-element.elementor-element-0eacbdc .elementor-icon-box-title, .elementor-5699 .elementor-element.elementor-element-0eacbdc .elementor-icon-box-title a{font-size:35px;}.elementor-5699 .elementor-element.elementor-element-e831fd4 .elementor-heading-title{font-size:45px;}.elementor-5699 .elementor-element.elementor-element-c8c2634{font-size:15px;}.elementor-5699 .elementor-element.elementor-element-2de1198 .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-b057c19 .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-6cca218 .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-9cfe82d .elementor-image-box-img{margin-bottom:15px;}.elementor-5699 .elementor-element.elementor-element-a6207f9{--min-height:170px;--border-radius:20px 20px 0px 0px;}.elementor-5699 .elementor-element.elementor-element-4d1d41e{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:0px 00px 20px 20px;}.elementor-5699 .elementor-element.elementor-element-6c2b7d0{width:var( --container-widget-width, 275.5px );max-width:275.5px;--container-widget-width:275.5px;--container-widget-flex-grow:0;}.elementor-5699 .elementor-element.elementor-element-6c2b7d0 .elementor-heading-title{font-size:40px;}.elementor-5699 .elementor-element.elementor-element-3728741{font-size:14px;}.elementor-5699 .elementor-element.elementor-element-59b7a50 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5699 .elementor-element.elementor-element-59b7a50 .elementor-icon-list-item > a{font-size:14px;}.elementor-5699 .elementor-element.elementor-element-32388a1 .elementor-button{font-size:14px;}}/* Start custom CSS for container, class: .elementor-element-4ed7713 *//* ============================================================
PUTU BALI TOUR — RIGHT VISUAL / PHOTO COLLAGE ONLY
Extracted from the Heritage Luxury collage design
CLASSES
.coastal-hero-collage__right
.coastal-hero-collage__photo-main
.coastal-hero-collage__photo-top
.coastal-hero-collage__photo-bottom
.coastal-hero-collage__glass
.coastal-hero-collage__glass-text
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713{
--hero-maroon:#6D1F24;
--hero-maroon-dark:#57181D;
--hero-red:#A83832;
--hero-red-dark:#8E2B2C;
--hero-brick:#C85B4A;
--hero-gold:#D7A44A;
--hero-ivory:#F7F1E7;
--hero-blush:#EAD8D2;
--hero-charcoal:#2B2523;
--hero-white:#FFFFFF;
--hero-photo-frame:#F7F1E7;
--hero-shadow-main:
0 30px 68px rgba(65,27,27,.30);
--hero-shadow-float:
0 17px 36px rgba(65,27,27,.22);
--hero-tr:
.56s cubic-bezier(.2,.72,.2,1);
}
/* ============================================================
01. RIGHT VISUAL WRAPPER
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right{
position:relative;
z-index:3!important;
min-width:0;
max-width:100%;
box-sizing:border-box;
overflow:visible!important;
}
/* soft abstract capsule behind photos */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right::before{
content:"";
position:absolute;
top:2%;
left:14%;
width:70%;
height:96%;
z-index:0;
border-radius:
48% 48% 44% 44% / 18% 18% 38% 38%;
background:
linear-gradient(
145deg,
rgba(234,216,210,.11),
rgba(255,255,255,.025)
);
border:
1px solid rgba(215,164,74,.17);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07),
0 18px 48px rgba(65,27,27,.035);
pointer-events:none;
}
/* luxury L frame */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right::after{
content:"";
position:absolute;
top:13%;
left:28%;
width:48%;
height:72%;
z-index:1;
border-right:
2px solid rgba(215,164,74,.76);
border-bottom:
2px solid rgba(200,91,74,.58);
border-radius:
0 0 38px 0;
pointer-events:none;
}
/* ============================================================
02. ALL PHOTO CONTAINERS
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-main,
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-top,
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-bottom{
position:absolute;
max-width:100%;
box-sizing:border-box;
overflow:hidden!important;
background-size:cover!important;
background-position:center!important;
background-repeat:no-repeat!important;
transition:
transform var(--hero-tr),
box-shadow var(--hero-tr);
}
/* ============================================================
03. MAIN PHOTO
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-main{
top:8%;
left:27%;
width:50%;
height:74%;
right:auto;
bottom:auto;
z-index:2!important;
border:
7px solid var(--hero-photo-frame)!important;
border-radius:
36px 36px 116px 36px!important;
box-shadow:
0 30px 68px rgba(65,27,27,.30),
0 0 0 1px rgba(215,164,74,.09)!important;
}
/* inner frame */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-main::before{
content:"";
position:absolute;
inset:10px;
pointer-events:none;
border:
1px solid rgba(247,241,231,.52);
border-radius:
27px 27px 104px 27px;
}
/* top accent */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-main::after{
content:"";
position:absolute;
top:0;
left:22px;
width:54px;
height:3px;
border-radius:
0 0 999px 999px;
background:
linear-gradient(
90deg,
#D7A44A 0%,
#D7A44A 42%,
#C85B4A 78%,
rgba(200,91,74,.14) 100%
);
}
/* ============================================================
04. BOTTOM OVERLAP PHOTO
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-bottom{
left:8%;
bottom:5%;
width:41%;
height:33%;
top:auto;
right:auto;
z-index:7!important;
border:
9px solid var(--hero-photo-frame)!important;
border-radius:
25px 25px 44px 25px!important;
box-shadow:
0 17px 36px rgba(65,27,27,.22),
0 0 0 5px rgba(215,164,74,.025)!important;
outline:
1px solid rgba(168,56,50,.20)!important;
outline-offset:
7px;
transform:
rotate(-.30deg);
}
/* bottom inner frame */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-bottom::before{
content:"";
position:absolute;
inset:7px;
pointer-events:none;
border:
1px solid rgba(247,241,231,.50);
border-radius:
18px 18px 35px 18px;
}
/* ============================================================
05. TOP PHOTO
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-top{
top:1%;
right:7%;
width:30%;
height:19%;
left:auto;
bottom:auto;
z-index:8!important;
border:
6px solid var(--hero-photo-frame)!important;
border-radius:
21px 21px 37px 21px!important;
outline:
1px solid rgba(215,164,74,.14);
outline-offset:
4px;
box-shadow:
0 17px 36px rgba(65,27,27,.21)!important;
transform:
rotate(.6deg);
}
/* ============================================================
06. FLOATING LABEL
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass{
position:absolute;
top:auto;
left:auto;
right:3%;
bottom:14%;
z-index:10!important;
width:22%;
max-width:175px;
min-width:145px;
display:block!important;
padding:
10px 12px;
border:
1px solid rgba(215,164,74,.21)!important;
border-radius:
14px 14px 22px 14px!important;
background:
linear-gradient(
145deg,
rgba(109,31,36,.84),
rgba(87,24,29,.70)
)!important;
box-shadow:
0 16px 34px rgba(65,27,27,.24),
inset 0 1px 0 rgba(255,255,255,.055)!important;
-webkit-backdrop-filter:blur(13px);
backdrop-filter:blur(13px);
transition:
transform var(--hero-tr),
box-shadow var(--hero-tr),
border-color var(--hero-tr);
}
/* top accent */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass::before{
content:"";
position:absolute;
top:0;
left:12px;
width:32px;
height:2px;
border-radius:
0 0 999px 999px;
background:
linear-gradient(
90deg,
#D7A44A,
#C85B4A
);
transition:
width .42s ease;
}
/* connector line */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass::after{
content:"";
position:absolute;
top:50%;
left:-22px;
width:22px;
height:1px;
transform:
translateY(-50%);
background:
linear-gradient(
90deg,
transparent,
rgba(215,164,74,.68)
);
opacity:.55;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass .elementor-heading-title{
color:#FFFFFF!important;
font-size:
clamp(15px,1.05vw,18px)!important;
line-height:
1.14!important;
margin:0;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass-text{
width:100%;
margin-top:5px;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass-text,
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass-text p{
color:
rgba(247,241,231,.72)!important;
font-size:
9.5px!important;
line-height:
1.42!important;
margin:0;
}
/* max 2 lines */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass-text .elementor-widget-container,
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass-text p{
display:
-webkit-box!important;
-webkit-box-orient:
vertical!important;
-webkit-line-clamp:
2!important;
overflow:
hidden!important;
}
/* ============================================================
07. PHOTO HOVER
============================================================ */
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right:hover
.coastal-hero-collage__photo-main{
transform:
translateY(-3px);
box-shadow:
0 35px 76px rgba(65,27,27,.34),
0 0 0 1px rgba(215,164,74,.14)!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right:hover
.coastal-hero-collage__photo-bottom{
transform:
rotate(0deg)
translateY(3px);
box-shadow:
0 22px 42px rgba(65,27,27,.26),
0 0 0 5px rgba(168,56,50,.025)!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right:hover
.coastal-hero-collage__photo-top{
transform:
rotate(.15deg)
translateY(-4px);
box-shadow:
0 22px 42px rgba(65,27,27,.25)!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass:hover{
transform:
translateY(-4px);
border-color:
rgba(215,164,74,.30)!important;
box-shadow:
0 20px 40px rgba(65,27,27,.30),
inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass:hover::before{
width:58px;
}
/* ============================================================
08. TABLET
============================================================ */
@media(max-width:1024px){
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right{
min-height:
640px!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass{
right:3%;
bottom:12%;
width:21%;
max-width:165px;
min-width:140px;
padding:
9px 11px;
}
}
/* ============================================================
09. MOBILE
============================================================ */
@media(max-width:767px){
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right{
min-height:
510px!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right::before{
top:4%;
left:8%;
width:78%;
height:92%;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right::after{
top:16%;
left:22%;
width:57%;
height:64%;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-main{
top:10%!important;
left:23%!important;
width:59%!important;
height:67%!important;
border-width:
5px!important;
border-radius:
27px 27px 74px 27px!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-bottom{
left:3%!important;
bottom:5%!important;
width:46%!important;
height:29%!important;
border-width:
6px!important;
outline-offset:
4px;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__photo-top{
top:2%!important;
right:3%!important;
width:32%!important;
height:17%!important;
border-width:
4px!important;
outline-offset:
2px;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass{
right:3%;
bottom:8%;
width:34%;
max-width:132px;
min-width:0;
padding:
8px 9px;
border-radius:
12px 12px 18px 12px!important;
background:
linear-gradient(
145deg,
rgba(109,31,36,.89),
rgba(87,24,29,.78)
)!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass .elementor-heading-title{
font-size:
14px!important;
line-height:
1.12!important;
}
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass-text,
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__glass-text p{
font-size:
8.8px!important;
line-height:
1.38!important;
}
}
/* ============================================================
10. REDUCED MOTION
============================================================ */
@media(prefers-reduced-motion:reduce){
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right *,
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right *::before,
.elementor-5699 .elementor-element.elementor-element-4ed7713 .coastal-hero-collage__right *::after{
animation:none!important;
transition:none!important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ad151c6 *//* =====================================================================
HERO HALAMAN (CONTACT US dan page lain) – MAROON & PUTIH (v1.0)
Serasi dengan semua section lain. Satu CSS yang sama dipakai di
SEMUA page (Contact, About, Tour, dst.) — tinggal ganti gambar,
eyebrow, judul, dan teks di Elementor.
Tampilan: foto latar (dari panel) + gradasi maroon gelap dari kiri,
garis maroon di tepi bawah, judul El Messiri putih dengan garis
vertikal & eyebrow berhias, titik hiasan, muncul bertahap saat dibuka.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
PENTING: gambar latar (Background > Image) dipasang di container
root ini, bukan di container dalam, supaya gradasi maroon ada di atasnya.
Class yang dipasang (Advanced > CSS Classes), sesuai struktur Anda:
Container (root, ada gambar latar) ...... ars-hr
└─ Container (level 2) .................. ars-hr__wrap
└─ Container (level 3) .............. ars-hr__inner
└─ Container (isi, level 4) ..... ars-hr__content
├─ Heading (kecil) .......... ars-hr__eyebrow
├─ Heading (besar) .......... ars-hr__title
└─ Text Editor .............. ars-hr__text
UKURAN TEKS: Judul desktop 70 · tablet 58 · mobile 44
Deskripsi desktop 17 · mobile 15
Ubah di bagian 1 (--hr-title-size / --hr-text-size) bila perlu.
Tinggi hero: --hr-min-h (panel Min Height tetap menang).
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, tinggi,
gambar latar yang diatur dari panel menimpa CSS ini.
(Lihat bagian 8 untuk warna bawaan template yang berwarna biru.)
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, sekali saat halaman dibuka.
TIPS : di Heading besar, bungkus kata dengan … agar
berwarna blush, contoh: Contact Us
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6).e-con {
/* Warna */
--hr-maroon: #74142A;
--hr-maroon-dark: #4A0C1B;
--hr-maroon-light: #A32244;
--hr-maroon-rgb: 116, 20, 42;
--hr-dark-rgb: 74, 12, 27;
--hr-blush: #F4D3DB;
--hr-white: #ffffff;
/* Font */
--hr-font-display: "El Messiri", Georgia, serif;
--hr-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--hr-max: 1240px;
--hr-pad-x: 48px;
--hr-min-h: 460px; /* tinggi hero (panel Min Height menang) */
--hr-pad-top: 130px; /* ruang untuk header di atas hero */
--hr-pad-bottom: 80px;
--hr-content-max: 720px; /* lebar maksimal blok teks */
/* Teks */
--hr-title-size: 70px; /* judul desktop */
--hr-text-size: 17px; /* deskripsi desktop */
/* Overlay maroon di atas foto */
--hr-overlay: .8; /* kekuatan di kiri (0 – 1) */
--hr-overlay-end: .15; /* kekuatan di kanan (0 – 1) */
--hr-edge: 1; /* garis maroon di tepi bawah: 1 / 0 */
--hr-dots: 1; /* titik hiasan kanan bawah: 1 / 0 */
--hr-bar: 1; /* garis vertikal di kiri judul: 1 / 0 */
/* Watermark ("" = hilang). Contoh: "Contact" */
--hr-watermark: "";
--hr-watermark-size: clamp(90px, 16vw, 250px);
--hr-wm-stroke: rgba(255, 255, 255, .22);
/* Animasi saat halaman dibuka */
--hr-reveal: 1; /* 0 = tanpa animasi */
--hr-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: center;
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
--min-height: var(--hr-min-h);
--padding-top: var(--hr-pad-top);
--padding-bottom: var(--hr-pad-bottom);
--padding-left: max(var(--hr-pad-x), calc((100% - var(--hr-max)) / 2));
--padding-right: max(var(--hr-pad-x), calc((100% - var(--hr-max)) / 2));
--content-width: min(100%, var(--hr-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--hr-font);
background-color: var(--hr-maroon-dark);
background-size: cover;
background-position: center;
}
/* OVERLAY: gradasi maroon gelap dari kiri + garis maroon di tepi bawah */
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6).e-con::after {
content: var(--hr-watermark);
position: absolute;
inset: 0;
z-index: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 0 .04em 0 0;
overflow: hidden;
font-family: var(--hr-font-display);
font-size: var(--hr-watermark-size);
line-height: .8;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--hr-wm-stroke);
background:
linear-gradient(90deg, var(--hr-maroon), var(--hr-maroon-light) 38%, rgba(var(--hr-maroon-rgb), 0)) left bottom / 100% 4px no-repeat,
linear-gradient(100deg, rgba(var(--hr-dark-rgb), var(--hr-overlay)) 0%, rgba(var(--hr-dark-rgb), calc(var(--hr-overlay) * .6)) 45%, rgba(var(--hr-dark-rgb), var(--hr-overlay-end)) 100%);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (tumpukan wrap > inner > content)
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__wrap.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__inner.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__content.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
position: relative;
z-index: 2;
width: 100%;
min-width: 0;
}
/* titik hiasan kanan bawah (di container level 2) */
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__wrap.e-con::before {
content: "";
position: absolute;
inset: auto 0 -30px auto;
z-index: 0;
width: 110px;
height: 110px;
opacity: calc(var(--hr-dots) * .55);
background-image: radial-gradient(rgba(255, 255, 255, .8) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
/* blok teks: garis vertikal di kiri */
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__content.e-con {
--gap: 16px;
--row-gap: 16px;
--padding-left: 32px;
max-width: var(--hr-content-max);
}
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__content.e-con::after {
content: "";
position: absolute;
inset: 6px auto 6px 0;
z-index: 0;
width: 5px;
border-radius: 999px;
background: linear-gradient(180deg, var(--hr-blush), var(--hr-maroon-light) 60%, rgba(var(--hr-maroon-rgb), 0));
opacity: var(--hr-bar);
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__content .elementor-widget { margin-block-end: 0; }
/* ---------------------------------------------------------------------
3. EYEBROW, JUDUL, TEKS
Specificity (0,3,0): mengalahkan bawaan Elementor, kalah dari panel.
--------------------------------------------------------------------- */
.ars-hr .ars-hr__eyebrow .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0;
font-family: var(--hr-font);
font-size: 13.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--hr-blush);
}
/* garis + berlian kecil sebelum eyebrow */
.ars-hr .ars-hr__eyebrow .elementor-heading-title::before {
content: "";
flex: none;
width: 38px;
height: 2px;
background: var(--hr-blush);
}
.ars-hr .ars-hr__eyebrow .elementor-heading-title::after {
content: "";
flex: none;
order: -1;
display: none;
}
.ars-hr .ars-hr__title .elementor-heading-title {
margin: 0;
font-family: var(--hr-font-display);
font-size: var(--hr-title-size);
font-weight: 600;
line-height: 1.04;
letter-spacing: .01em;
color: var(--hr-white);
text-wrap: balance;
}
.ars-hr .ars-hr__title .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--hr-blush);
}
.ars-hr .ars-hr__text {
max-width: 580px;
font-family: var(--hr-font);
font-size: var(--hr-text-size);
line-height: 1.8;
color: rgba(255, 255, 255, .9);
}
.ars-hr .ars-hr__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.ars-hr .ars-hr__text p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------
4. ANIMASI SAAT HALAMAN DIBUKA (translate + opacity, sekali jalan)
--------------------------------------------------------------------- */
@keyframes arsHrIn {
from { opacity: calc(1 - var(--hr-reveal)); translate: 0 calc(26px * var(--hr-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsHrBar {
from { transform: scaleY(calc(1 - var(--hr-reveal))); }
to { transform: scaleY(1); }
}
@media (prefers-reduced-motion: no-preference) {
.ars-hr .ars-hr__eyebrow,
.ars-hr .ars-hr__title,
.ars-hr .ars-hr__text {
animation: arsHrIn .9s var(--hr-ease) both;
}
.ars-hr .ars-hr__eyebrow { animation-delay: .05s; }
.ars-hr .ars-hr__title { animation-delay: .18s; }
.ars-hr .ars-hr__text { animation-delay: .32s; }
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__content.e-con::after {
transform-origin: top center;
animation: arsHrBar 1s var(--hr-ease) .1s both;
}
}
/* ---------------------------------------------------------------------
5. TABLET (≤ 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6).e-con {
--hr-pad-x: 32px;
--hr-min-h: 400px;
--hr-pad-top: 110px;
--hr-pad-bottom: 64px;
--hr-title-size: 58px;
--hr-watermark-size: clamp(90px, 20vw, 190px);
--hr-overlay-end: .35; /* lebih gelap agar teks terbaca */
}
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__wrap.e-con::before { opacity: calc(var(--hr-dots) * .4); }
}
/* ---------------------------------------------------------------------
6. MOBILE (≤ 767px)
Judul 44px, deskripsi 15px, overlay lebih pekat agar teks jelas
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6).e-con {
--hr-pad-x: 20px;
--hr-min-h: 360px;
--hr-pad-top: 96px;
--hr-pad-bottom: 56px;
--hr-title-size: 44px;
--hr-text-size: 15px;
--hr-overlay: .85;
--hr-overlay-end: .55;
--hr-watermark-size: 26vw;
}
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__content.e-con {
--padding-left: 22px;
--gap: 14px;
--row-gap: 14px;
}
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__content.e-con::after { width: 4px; }
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6) .ars-hr__wrap.e-con::before { display: none; }
.ars-hr .ars-hr__eyebrow .elementor-heading-title {
gap: 10px;
font-size: 12px;
letter-spacing: .18em;
}
.ars-hr .ars-hr__eyebrow .elementor-heading-title::before { width: 26px; }
.ars-hr .ars-hr__title .elementor-heading-title { line-height: 1.08; }
}
/* ---------------------------------------------------------------------
7. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6).e-con *,
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6).e-con *::before,
:where(.elementor-5699 .elementor-element.elementor-element-ad151c6).e-con *::after {
animation: none !important;
transition: none !important;
}
}
/* ---------------------------------------------------------------------
8. PEMAKSA WARNA (HAPUS BAGIAN INI jika ingin warna diatur penuh dari panel)
Elemen mentah dari template Elementor membawa warna bawaan (eyebrow
biru #6EC1E4) yang tersimpan di panel dan menimpa CSS di atas. Bagian ini
memaksa warna blush/putih. Setelah warna bawaan itu Anda kosongkan di
panel (Style > Text Color), bagian 8 boleh dihapus.
Font, ukuran, spasi tetap bisa diatur dari panel.
--------------------------------------------------------------------- */
.ars-hr.ars-hr.ars-hr .ars-hr__eyebrow .elementor-heading-title { color: var(--hr-blush); }
.ars-hr.ars-hr.ars-hr .ars-hr__title .elementor-heading-title { color: var(--hr-white); }
.ars-hr.ars-hr.ars-hr .ars-hr__text { color: rgba(255, 255, 255, .9); }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0aa245d *//* =====================================================================
ABOUT US – MAROON & PUTIH (v3.0 – "Editorial Maroon, Shaped")
Class TIDAK diubah, struktur Elementor sama persis dengan v1/v2.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
YANG BARU di v3:
- Watermark: "About Us" (font El Messiri, sama dgn Why Choose Us)
- Angka besar "01" di pojok kanan atas DIHAPUS
- Styling isi (judul, teks, ikon, kartu, jarak, watermark) disamakan
dengan Why Choose Us supaya serasi
- TIDAK TERKUNCI: semua .elementor-5699 .elementor-element.elementor-element-0aa245d pakai :where(), jadi pengaturan
font / ukuran / warna dari panel Elementor (Heading, Icon Box,
Text Editor) sekarang menang atas CSS ini.
RINGAN : tanpa blur / filter / blend-mode / backdrop-filter.
Animasi hanya transform, translate, opacity.
FONT : El Messiri akan tampil jika sudah dimuat Elementor
(mis. dipakai di Typography widget mana pun di halaman,
atau di Global Fonts / Why Choose Us).
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d).e-con {
/* Warna */
--ab-maroon: #74142A;
--ab-maroon-dark: #4A0C1B;
--ab-maroon-light: #A32244;
--ab-maroon-rgb: 116, 20, 42;
--ab-white: #ffffff;
--ab-tint: #FBF3F5;
--ab-ink: #2B1519;
--ab-muted: rgba(43, 21, 25, .74);
--ab-line: rgba(var(--ab-maroon-rgb), .16);
/* Font (sama dengan Why Choose Us) */
--ab-font-display: "El Messiri", Georgia, serif;
--ab-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--ab-max: 1240px;
--ab-pad-x: 48px;
--ab-pad-top: clamp(64px, 7vw, 108px);
--ab-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--ab-row-gap: clamp(48px, 5vw, 84px);
--ab-col-gap: clamp(36px, 5vw, 84px);
--ab-radius-sm: 12px;
/* BENTUK FOTO (atas-kiri atas-kanan bawah-kanan bawah-kiri)
ganti angka untuk mengubah bentuk. 14px = kotak membulat biasa */
--ab-shape-thumb-1: 999px 999px 14px 14px; /* kubah */
--ab-shape-thumb-2: 90px 14px 90px 14px; /* daun */
--ab-shape-main: 170px 22px 170px 22px; /* daun besar */
--ab-shape-float: 22px 80px 22px 80px; /* daun terbalik */
/* Teks (sama dengan Why Choose Us) */
--ab-title-size: clamp(34px, 4.2vw, 58px);
--ab-text-size: 16px;
/* Watermark ("" = hilang) */
--ab-watermark: "About Us";
--ab-watermark-size: clamp(72px, 13vw, 210px);
--ab-wm-stroke: rgba(var(--ab-maroon-rgb), .13);
/* Nomor kecil di kartu (01/02/03): 1 = tampil, 0 = sembunyi */
--ab-card-no: 1;
/* Chip di foto kecil */
--ab-tag-1: "Private Tour";
--ab-tag-2: "Local Guide";
--ab-tags: 1;
/* Animasi */
--ab-reveal: 1; /* 0 = tanpa animasi masuk */
--ab-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: var(--ab-row-gap);
--row-gap: var(--ab-row-gap);
--column-gap: var(--ab-row-gap);
--padding-top: var(--ab-pad-top);
--padding-bottom: var(--ab-pad-bottom);
--padding-left: max(var(--ab-pad-x), calc((100% - var(--ab-max)) / 2));
--padding-right: max(var(--ab-pad-x), calc((100% - var(--ab-max)) / 2));
--content-width: min(100%, var(--ab-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--ab-font);
background-color: var(--ab-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--ab-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--ab-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah
(angka besar kanan atas sudah dihapus) */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d).e-con::after {
content: var(--ab-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
opacity: 1;
font-family: var(--ab-font-display);
font-size: var(--ab-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--ab-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__content.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stats.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con {
--gap: var(--ab-col-gap);
--row-gap: 32px;
--column-gap: var(--ab-col-gap);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con {
--gap: var(--ab-col-gap);
--row-gap: 56px;
--column-gap: var(--ab-col-gap);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
align-items: center;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--gap: 18px;
--row-gap: 18px;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__intro.e-con::after {
content: "";
position: absolute;
inset: 6px auto 0 0;
z-index: 0;
width: 5px;
height: auto;
border: 0;
border-radius: 999px;
opacity: 1;
background: linear-gradient(180deg, var(--ab-maroon), rgba(var(--ab-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con {
--gap: 20px;
--row-gap: 20px;
--column-gap: 20px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con {
--flex-direction: column;
--align-items: stretch;
--gap: 0px;
--row-gap: 0px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__content.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--gap: 30px;
--row-gap: 30px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stats.e-con {
--gap: 16px;
--row-gap: 16px;
--column-gap: 16px;
counter-reset: abstat;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stats.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stats.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
/* ---------------------------------------------------------------------
3. EYEBROW & JUDUL
SEMUA pakai :where() => pengaturan panel Elementor (font, ukuran,
warna, dll) menang. Tidak ada lagi yang terkunci.
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__eyebrow.elementor-widget {
width: 100%;
margin-block-end: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__eyebrow.elementor-widget-text-editor {
font-family: var(--ab-font);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--ab-maroon);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__eyebrow.elementor-widget-text-editor p {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__eyebrow.elementor-widget-text-editor p::before {
content: "";
flex: none;
width: 36px;
height: 1.5px;
background: currentColor;
opacity: .55;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__eyebrow.elementor-widget-text-editor p::after {
content: "";
flex: none;
width: 6px;
height: 6px;
background: currentColor;
transform: rotate(45deg);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__title.elementor-widget {
width: 100%;
margin-block-end: 0;
}
/* Judul: spesifisitas rendah (di atas bawaan tema/kit, di bawah panel)
-> font dari panel Elementor (mis. El Messiri) langsung terpakai */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__title.elementor-widget .elementor-heading-title {
margin: 0;
font-family: var(--ab-font-display);
font-size: var(--ab-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--ab-ink);
text-wrap: balance;
}
/* kata di // = maroon + stabilo tipis di bawahnya.
Ikut font judul (inherit) supaya tidak beda font. */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__title.elementor-widget .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--ab-maroon);
background: linear-gradient(transparent 64%, rgba(var(--ab-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
/* ---------------------------------------------------------------------
4. FOTO KECIL KANAN ATAS (kubah + daun, bertingkat)
Style dipasang di widget; img diisi penuh.
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb.elementor-widget {
position: relative;
overflow: hidden;
width: 100%;
margin: 0;
aspect-ratio: 4 / 4.4;
border: 5px solid var(--ab-white);
background: var(--ab-tint);
box-shadow: 0 22px 36px -18px rgba(var(--ab-maroon-rgb), .55), 0 0 0 1px var(--ab-line);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--1.elementor-widget { border-radius: var(--ab-shape-thumb-1); }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--2.elementor-widget { border-radius: var(--ab-shape-thumb-2); margin-top: 34px; }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb .elementor-widget-container,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb a,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform .8s var(--ab-ease);
}
/* kilau menyapu (hanya aktif saat hover, lihat bagian 8) */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb.elementor-widget::before,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main.elementor-widget::before,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float.elementor-widget::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
transform: translateX(-130%);
pointer-events: none;
}
/* chip pill maroon di bawah-tengah foto */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--1.elementor-widget::after,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--2.elementor-widget::after {
position: absolute;
left: 50%;
bottom: 14px;
z-index: 3;
translate: -50% 0;
padding: 8px 16px;
font-family: var(--ab-font);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ab-white);
background: var(--ab-maroon);
border-radius: 999px;
box-shadow: 0 8px 16px -8px rgba(var(--ab-maroon-rgb), .8);
opacity: var(--ab-tags);
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--1.elementor-widget::after { content: var(--ab-tag-1); }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--2.elementor-widget::after { content: var(--ab-tag-2); }
/* ---------------------------------------------------------------------
5. FOTO BESAR KIRI BAWAH + FOTO KECIL MENIMPA
--------------------------------------------------------------------- */
/* bingkai garis mengikuti bentuk foto besar */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con::before {
content: "";
position: absolute;
inset: -16px 16px 16px -16px;
z-index: 0;
width: auto;
height: auto;
border: 1.5px solid rgba(var(--ab-maroon-rgb), .38);
border-radius: var(--ab-shape-main);
opacity: 1;
mix-blend-mode: normal;
transition: transform .6s var(--ab-ease);
pointer-events: none;
}
/* titik dekoratif */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con::after {
content: "";
position: absolute;
inset: 34px -24px auto auto;
z-index: 0;
width: 92px;
height: 92px;
border: 0;
opacity: 1;
background-image: radial-gradient(rgba(var(--ab-maroon-rgb), .38) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main.elementor-widget {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
margin: 0;
aspect-ratio: 4 / 3.5;
border: 6px solid var(--ab-white);
border-radius: var(--ab-shape-main);
background: var(--ab-tint);
box-shadow: 0 38px 60px -28px rgba(var(--ab-maroon-rgb), .6), 0 0 0 1px var(--ab-line);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main .elementor-widget-container,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main a,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main figure,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float .elementor-widget-container,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float a,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main img,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform 1s var(--ab-ease);
}
/* foto kecil menimpa pojok kanan bawah */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float.elementor-widget {
position: absolute;
right: -7%;
bottom: -9%;
z-index: 3;
overflow: hidden;
width: 42%;
margin: 0;
aspect-ratio: 5 / 4;
border: 6px solid var(--ab-white);
border-radius: var(--ab-shape-float);
background: var(--ab-tint);
box-shadow: 0 26px 44px -20px rgba(var(--ab-maroon-rgb), .65), 0 0 0 1px var(--ab-line);
}
/* ---------------------------------------------------------------------
6. TEKS (sama dengan Why Choose Us)
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__text.elementor-widget {
width: 100%;
max-width: 620px;
margin-block-end: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__text.elementor-widget-text-editor {
font-family: var(--ab-font);
font-size: var(--ab-text-size);
line-height: 1.85;
color: var(--ab-muted);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__text.elementor-widget-text-editor p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__text.elementor-widget-text-editor p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
7. KARTU (Icon Box) – ars-ab__stat
Ikon lingkaran gradasi maroon + cincin (sama dgn Why Choose Us).
Semua pakai :where() => warna/ukuran/font dari panel tetap menang.
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget {
position: relative;
overflow: hidden;
width: 100%;
margin: 0;
counter-increment: abstat;
border: 1px solid var(--ab-line);
border-radius: var(--ab-radius-sm);
background: linear-gradient(180deg, var(--ab-white) 40%, var(--ab-tint));
box-shadow: 0 18px 32px -24px rgba(var(--ab-maroon-rgb), .6);
transition: transform .4s var(--ab-ease), box-shadow .4s ease, border-color .4s ease;
}
/* kartu tengah turun sedikit (desktop & tablet lebar) */
@media (min-width: 768px) {
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget:nth-child(2) { margin-top: 22px; }
}
/* garis maroon di atas kartu */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--ab-maroon), var(--ab-maroon-light));
transform: scaleX(.16);
transform-origin: left center;
transition: transform .5s var(--ab-ease);
}
/* nomor outline 01 / 02 / 03 (ubah --ab-card-no jadi 0 untuk sembunyi) */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget::after {
content: "0" counter(abstat);
position: absolute;
top: 8px;
right: 12px;
font-family: var(--ab-font-display);
font-size: 34px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(var(--ab-maroon-rgb), .2);
opacity: var(--ab-card-no);
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-widget-container {
height: 100%;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-wrapper {
height: 100%;
padding: 30px 18px 26px;
text-align: center;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-icon {
display: flex;
justify-content: center;
margin: 0 0 var(--icon-box-icon-margin, 18px);
}
/* ikon: lingkaran maroon + cincin tipis (sama dengan Why Choose Us) */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-icon .elementor-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
padding: 0;
font-size: 24px;
color: var(--ab-white);
background: linear-gradient(145deg, var(--ab-maroon-light), var(--ab-maroon-dark));
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(var(--ab-maroon-rgb), .08), 0 12px 20px -10px rgba(var(--ab-maroon-rgb), .8);
transition: transform .45s var(--ab-ease), box-shadow .45s ease;
}
/* fill ikut warna teks ikon -> bisa diganti dari panel */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-icon .elementor-icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon i {
line-height: 1;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-title {
margin: 0 0 6px;
font-family: var(--ab-font-display);
font-size: clamp(20px, 1.7vw, 24px);
font-weight: 600;
line-height: 1.2;
color: var(--ab-ink);
}
/* span/link ikut warna judul, supaya panel tetap bisa mengubahnya */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-title span,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-title a {
color: inherit;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-description {
margin: 0;
font-family: var(--ab-font);
font-size: 14.5px;
line-height: 1.7;
color: var(--ab-muted);
}
/* ---------------------------------------------------------------------
8. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb:hover img { transform: scale(1.08); }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual:hover .ars-ab__main img { transform: scale(1.05); }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual:hover .ars-ab__float img { transform: scale(1.08); }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual:hover::before { transform: translate(-6px, 6px); }
/* kilau lewat sekali */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb:hover::before,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main:hover::before,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float:hover::before {
transform: translateX(130%);
transition: transform .9s var(--ab-ease);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget:hover {
transform: translateY(-8px);
border-color: rgba(var(--ab-maroon-rgb), .45);
box-shadow: 0 30px 46px -24px rgba(var(--ab-maroon-rgb), .65);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget:hover::before {
transform: scaleX(1);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget:hover .elementor-icon-box-icon .elementor-icon {
transform: translateY(-3px) rotate(-8deg) scale(1.08);
box-shadow: 0 0 0 10px rgba(var(--ab-maroon-rgb), .1), 0 16px 24px -10px rgba(var(--ab-maroon-rgb), .85);
}
}
/* ---------------------------------------------------------------------
9. ANIMASI
a) Foto kecil menimpa melayang pelan (translate, murah)
b) Masuk saat scroll – DESKTOP saja, berurutan
--------------------------------------------------------------------- */
@keyframes arsAbBob {
from { translate: 0 0; }
to { translate: 0 -12px; }
}
@keyframes arsAbIn {
from { opacity: calc(1 - var(--ab-reveal)); translate: 0 calc(34px * var(--ab-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float.elementor-widget {
animation: arsAbBob 5s ease-in-out infinite alternate;
}
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__content.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget {
animation: arsAbIn linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__content.e-con { animation-range: entry 8% cover 30%; }
/* kartu muncul bergantian */
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget:nth-child(1) { animation-range: entry 10% cover 34%; }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget:nth-child(2) { animation-range: entry 16% cover 40%; }
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget:nth-child(3) { animation-range: entry 22% cover 46%; }
}
}
/* ---------------------------------------------------------------------
10. TABLET (≤ 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d).e-con {
--ab-pad-x: 32px;
--ab-col-gap: 40px;
--ab-row-gap: 52px;
--ab-watermark-size: clamp(72px, 16vw, 150px);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con-boxed > .e-con-inner,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con {
--row-gap: 44px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con {
max-width: 560px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con {
max-width: 680px;
margin-inline: auto;
margin-bottom: 24px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float.elementor-widget {
right: -3%;
bottom: -8%;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con::before {
inset: -12px 12px 12px -12px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con::after {
right: -10px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__text.elementor-widget {
max-width: none;
}
}
/* ---------------------------------------------------------------------
11. MOBILE (≤ 767px)
Kubah + daun berdampingan, kartu 1 kolom (ikon kiri), tanpa stagger
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d).e-con {
--ab-pad-x: 20px;
--ab-pad-top: 56px;
--ab-pad-bottom: 84px;
--ab-row-gap: 40px;
--ab-title-size: clamp(30px, 8.6vw, 40px);
--ab-text-size: 15px;
--ab-watermark-size: 22vw;
/* bentuk lebih kecil agar proporsional di layar sempit */
--ab-shape-thumb-2: 56px 12px 56px 12px;
--ab-shape-main: 110px 18px 110px 18px;
--ab-shape-float: 16px 54px 16px 54px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__top.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__bottom.e-con {
--row-gap: 36px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__intro.e-con {
--padding-left: 22px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__intro.e-con::after {
width: 4px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__gallery.e-con {
--gap: 12px;
--row-gap: 12px;
--column-gap: 12px;
max-width: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb.elementor-widget {
border-width: 4px;
aspect-ratio: 4 / 4.6;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--2.elementor-widget {
margin-top: 22px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--1.elementor-widget::after,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__thumb--2.elementor-widget::after {
bottom: 10px;
padding: 7px 11px;
font-size: 9px;
letter-spacing: .1em;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main.elementor-widget,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float.elementor-widget {
border-width: 5px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__main.elementor-widget {
aspect-ratio: 4 / 3.7;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__float.elementor-widget {
right: -2%;
bottom: -7%;
width: 44%;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con {
margin-bottom: 18px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con::before {
inset: -10px 10px 10px -10px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__visual.e-con::after {
display: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__content.e-con {
--gap: 24px;
--row-gap: 24px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stats.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stats.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stats.e-con {
--gap: 12px;
--row-gap: 12px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-wrapper {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 18px;
text-align: left;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-icon {
flex: none;
margin: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat .elementor-icon-box-icon .elementor-icon {
width: 50px;
height: 50px;
font-size: 21px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d) .ars-ab__stat.elementor-widget::after {
font-size: 28px;
}
}
/* ---------------------------------------------------------------------
12. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d).e-con *,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d).e-con *::before,
:where(.elementor-5699 .elementor-element.elementor-element-0aa245d).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0b9aa54 *//* =====================================================================
VISION & MISSION (TOMBOL → GARIS BERCABANG → 2 KARTU) – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Why Choose Us, Tour Package, Top Places,
FAQ, Alur, Contact, Gallery. Latar putih + cahaya maroon tipis,
watermark "Vision & Mission" bergaris tipis, judul El Messiri,
teks DM Sans, kartu tajam dengan ikon lingkaran dan orbit.
Seperti sketsa Anda:
[ Judul kiri | Teks kanan ]
[ TOMBOL ]
╱ ╲ <- garis melengkung bercabang
[ Kartu Vision ] [ Kartu Mission ]
ALIRAN LISTRIK: dari tombol, cahaya mengalir turun lewat garis kiri &
kanan, sampai ke titik di tepi atas kartu, lalu ikon di dalam kartu
berdenyut (terus berulang). Di mobile: tombol → kartu 1 → kartu 2
dalam satu garis lurus ke bawah, cahaya mengalir bergantian.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class yang dipasang (Advanced > CSS Classes), sesuai struktur Anda:
Container (root) ........................ ars-vm
├─ Container (header) ................... ars-vm__head
│ ├─ Container (kiri) ................. ars-vm__intro
│ │ └─ Heading ...................... ars-vm__title
│ └─ Container (kanan) ................ ars-vm__side
│ └─ Text Editor .................. ars-vm__text
├─ Button ............................... ars-vm__btn
└─ Container (baris kartu) .............. ars-vm__cards
├─ Container (kartu 1) .............. ars-vm__card
│ └─ Icon Box ..................... ars-vm__box
└─ Container (kartu 2) .............. ars-vm__card
└─ Icon Box ..................... ars-vm__box
(Jika kartu ke-2 di Navigator Anda ternyata tidak berada di dalam
container baris kartu, kirim ulang strukturnya.)
UKURAN TEKS: Heading desktop 55 · tablet 50 · mobile 45
Deskripsi desktop 16 · mobile 15
Ubah di bagian 1 (--vm-title-size / --vm-text-size) bila perlu.
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, border,
ikon (pilihan & ukuran), judul & teks kartu yang diatur dari panel
menimpa CSS ini. (Lihat bagian 11 untuk warna bawaan template.)
CATATAN GARIS: garis dihitung dari jarak antar kartu (--vm-gap) dan
jarak tombol ke kartu (--vm-link-h). Ubah KEDUANYA di bagian 1,
bukan dari panel, supaya garis tetap menyambung tepat.
RINGAN : tanpa blur / filter / blend-mode. Hanya 2 garis + 2 titik +
2 cincin kecil yang beranimasi; hover hanya di perangkat mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh: Our Vision & Mission
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54).e-con {
/* Warna */
--vm-maroon: #74142A;
--vm-maroon-dark: #4A0C1B;
--vm-maroon-light: #A32244;
--vm-maroon-rgb: 116, 20, 42;
--vm-spark: #E24A6E; /* warna cahaya listrik */
--vm-white: #ffffff;
--vm-tint: #FBF3F5;
--vm-ink: #2B1519;
--vm-muted: rgba(43, 21, 25, .74);
--vm-line: rgba(var(--vm-maroon-rgb), .22);
/* Font */
--vm-font-display: "El Messiri", Georgia, serif;
--vm-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--vm-max: 1240px;
--vm-pad-x: 48px;
--vm-pad-top: clamp(64px, 7vw, 108px);
--vm-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--vm-row-gap: clamp(40px, 5vw, 64px); /* header ↔ tombol */
--vm-col-gap: clamp(32px, 5vw, 84px); /* judul ↔ teks */
/* Teks */
--vm-title-size: 55px; /* heading desktop */
--vm-text-size: 16px; /* deskripsi desktop */
--vm-card-title: 30px; /* judul kartu */
--vm-card-text: 16px; /* teks kartu */
/* Kartu & garis listrik */
--vm-gap: 48px; /* jarak antar kartu (kiri ↔ kanan) */
--vm-link-h: 100px; /* jarak tombol → kartu (tinggi garis) */
--vm-card-pad-y: 48px;
--vm-card-pad-x: 40px;
--vm-wire: 2.4px; /* tebal garis */
--vm-cycle: 3.4s; /* durasi satu putaran aliran */
--vm-play: running; /* aliran listrik: running = jalan · paused = diam */
--vm-icon-pad: 20px; /* padding kotak ikon */
/* Bentuk garis: S-curve (desktop). Di mobile diganti garis lurus */
--vm-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 100C1 40 99 60 99 0' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
/* Watermark ("" = hilang) */
--vm-watermark: "Vision & Mission";
--vm-watermark-size: clamp(64px, 11vw, 180px);
--vm-wm-stroke: rgba(var(--vm-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--vm-reveal: 1; /* 0 = tanpa animasi masuk */
--vm-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
--padding-top: var(--vm-pad-top);
--padding-bottom: var(--vm-pad-bottom);
--padding-left: max(var(--vm-pad-x), calc((100% - var(--vm-max)) / 2));
--padding-right: max(var(--vm-pad-x), calc((100% - var(--vm-max)) / 2));
--content-width: min(100%, var(--vm-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--vm-font);
background-color: var(--vm-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--vm-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--vm-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54).e-con::after {
content: var(--vm-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--vm-font-display);
font-size: var(--vm-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--vm-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER + HEADER
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__head.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__cards.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
}
/* jarak header → tombol */
.ars-vm .ars-vm__head.e-con { margin-bottom: var(--vm-row-gap); }
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__head.e-con {
--gap: var(--vm-col-gap);
--row-gap: 24px;
--column-gap: var(--vm-col-gap);
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__head.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__intro.e-con::after {
content: "";
position: absolute;
inset: 6px auto 6px 0;
z-index: 0;
width: 5px;
border-radius: 999px;
background: linear-gradient(180deg, var(--vm-maroon), rgba(var(--vm-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--vm-maroon-rgb), .4), rgba(var(--vm-maroon-rgb), .05));
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__intro .elementor-widget,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side .elementor-widget { margin-block-end: 0; }
/* ---------------------------------------------------------------------
3. JUDUL & TEKS HEADER
Specificity (0,3,0): mengalahkan bawaan Elementor, kalah dari panel.
--------------------------------------------------------------------- */
.ars-vm .ars-vm__title .elementor-heading-title {
margin: 0;
font-family: var(--vm-font-display);
font-size: var(--vm-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--vm-ink);
text-wrap: balance;
}
.ars-vm .ars-vm__title .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--vm-maroon);
background: linear-gradient(transparent 64%, rgba(var(--vm-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.ars-vm .ars-vm__text {
max-width: 560px;
font-family: var(--vm-font);
font-size: var(--vm-text-size);
line-height: 1.85;
color: var(--vm-muted);
}
.ars-vm .ars-vm__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.ars-vm .ars-vm__text p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------
4. TOMBOL (titik awal aliran listrik) – kotak, solid maroon
--------------------------------------------------------------------- */
.ars-vm .ars-vm__btn.elementor-widget {
position: relative;
z-index: 2;
align-self: center;
width: auto;
margin: 0 0 var(--vm-link-h); /* jarak tombol → kartu = tinggi garis */
}
.ars-vm .ars-vm__btn .elementor-button-wrapper {
position: relative;
text-align: center;
}
.ars-vm .ars-vm__btn .elementor-button {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 17px 38px;
font-family: var(--vm-font);
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
color: #fff;
background: var(--vm-maroon);
border: 1.5px solid var(--vm-maroon);
border-radius: 0;
box-shadow: 6px 6px 0 rgba(var(--vm-maroon-rgb), .22);
transition: transform .35s var(--vm-ease), box-shadow .35s var(--vm-ease);
}
/* sapuan warna dari kiri */
.ars-vm .ars-vm__btn .elementor-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--vm-maroon-dark);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s var(--vm-ease);
}
.ars-vm .ars-vm__btn .elementor-button-content-wrapper { gap: 12px; }
/* titik sumber listrik di bawah tombol (berdenyut tiap putaran) */
.ars-vm .ars-vm__btn .elementor-button-wrapper::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
z-index: 3;
width: 11px;
height: 11px;
background: var(--vm-spark);
border: 2px solid var(--vm-white);
translate: -50% 0;
rotate: 45deg;
animation: arsVmSource var(--vm-cycle) ease-out infinite;
animation-play-state: var(--vm-play);
pointer-events: none;
}
.ars-vm .ars-vm__btn .elementor-button:focus-visible {
outline: 2px solid var(--vm-maroon);
outline-offset: 4px;
}
@media (hover: hover) {
.ars-vm .ars-vm__btn .elementor-button:hover {
color: #fff;
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0 rgba(var(--vm-maroon-rgb), .3);
}
.ars-vm .ars-vm__btn .elementor-button:hover::before { transform: scaleX(1); }
}
/* ---------------------------------------------------------------------
5. BARIS KARTU – 2 kolom, jarak = --vm-gap
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__cards.e-con {
--gap: var(--vm-gap);
--row-gap: var(--vm-gap);
--column-gap: var(--vm-gap);
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__cards.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__cards.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--vm-gap);
align-items: stretch;
}
/* ---------------------------------------------------------------------
6. KARTU
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con {
--flex-direction: column;
--align-items: center;
--justify-content: flex-start;
--gap: 0px;
--row-gap: 0px;
--padding-top: var(--vm-card-pad-y);
--padding-bottom: var(--vm-card-pad-y);
--padding-left: var(--vm-card-pad-x);
--padding-right: var(--vm-card-pad-x);
--vm-delay: 0s; /* jeda aliran (kartu 2 di mobile dibuat berbeda) */
background: linear-gradient(180deg, var(--vm-white) 35%, var(--vm-tint) 100%);
border: 1.5px solid rgba(var(--vm-maroon-rgb), .3);
box-shadow: 0 24px 40px -28px rgba(var(--vm-maroon-rgb), .5);
transition: transform .5s var(--vm-ease), border-color .35s ease, box-shadow .5s var(--vm-ease);
}
/* batang maroon di dasar kartu (melebar saat hover) */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con > .elementor-widget { position: relative; z-index: 1; width: 100%; margin: 0; }
/* GARIS LISTRIK: dari tepi atas kartu naik melengkung ke tombol.
Satu elemen, dua lapisan: cahaya yang berjalan + garis dasar redup,
dipotong oleh mask berbentuk garis. */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con::before {
content: "";
position: absolute;
inset: auto auto calc(100% + 1.5px) 50%;
z-index: 0;
width: calc((100% + var(--vm-gap)) / 2); /* tepat sampai tengah baris = tengah tombol */
height: var(--vm-link-h);
border: 0;
background:
linear-gradient(180deg, transparent 40%, rgba(226, 74, 110, .45) 46%, var(--vm-spark) 50%, rgba(226, 74, 110, .45) 54%, transparent 60%) 0 100% / 100% 300% no-repeat,
rgba(var(--vm-maroon-rgb), .3);
-webkit-mask: var(--vm-mask) center / 100% 100% no-repeat;
mask: var(--vm-mask) center / 100% 100% no-repeat;
animation: arsVmFlow var(--vm-cycle) linear var(--vm-delay) infinite;
animation-play-state: var(--vm-play);
pointer-events: none;
}
/* kartu kanan: cermin (garis ke kiri) */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con:nth-child(2)::before {
inset: auto 50% calc(100% + 1.5px) auto;
transform: scaleX(-1);
}
/* titik penghubung di tepi atas kartu (berdenyut saat cahaya tiba) */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con::after {
content: "";
position: absolute;
inset: -7px auto auto 50%;
z-index: 3;
width: 12px;
height: 12px;
background: var(--vm-maroon);
border: 2px solid var(--vm-white);
translate: -50% 0;
rotate: 45deg;
animation: arsVmNode var(--vm-cycle) ease-out var(--vm-delay) infinite;
animation-play-state: var(--vm-play);
pointer-events: none;
}
/* ---------------------------------------------------------------------
7. ICON BOX – LINGKARAN KONSENTRIS + ORBIT BERPUTAR
Ikon dibuat bulat seperti referensi: lingkaran utama, beberapa ring,
orbit luar bergaris putus-putus, dan titik cahaya yang mengelilingi ikon.
--------------------------------------------------------------------- */
.ars-vm {
--vm-orbit-icon-size: 82px;
--vm-orbit-wrap-size: 142px;
--vm-orbit-speed: 6s;
--vm-orbit-line: rgba(var(--vm-maroon-rgb), .27);
--vm-orbit-line-soft: rgba(var(--vm-maroon-rgb), .13);
--vm-orbit-dot: var(--vm-spark);
}
/* wrapper Icon Box menjadi pusat seluruh orbit */
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-icon {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: var(--vm-orbit-wrap-size);
height: var(--vm-orbit-wrap-size);
margin: 0 auto 30px;
isolation: isolate;
}
/* orbit luar bergaris putus-putus */
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-icon::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border: 1px dashed var(--vm-orbit-line);
border-radius: 50%;
opacity: .8;
pointer-events: none;
animation: arsVmOrbitRotate var(--vm-orbit-speed) linear infinite,
arsVmOrbitFade var(--vm-cycle) ease-in-out infinite;
animation-play-state: var(--vm-play);
}
/* orbit dalam yang bergerak berlawanan arah */
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-icon::after {
content: "";
position: absolute;
inset: 12px;
z-index: 0;
border: 1px solid var(--vm-orbit-line-soft);
border-radius: 50%;
pointer-events: none;
animation: arsVmOrbitCounterRotate 10s linear infinite;
animation-play-state: var(--vm-play);
}
/* lingkaran utama tempat ikon Elementor berada */
.ars-vm .ars-vm__box.elementor-widget .elementor-icon {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: var(--vm-orbit-icon-size);
height: var(--vm-orbit-icon-size);
box-sizing: border-box;
padding: 0;
color: var(--vm-maroon);
background: radial-gradient(
circle at center,
rgba(255, 255, 255, .98) 0 48%,
rgba(var(--vm-maroon-rgb), .04) 78%,
rgba(var(--vm-maroon-rgb), .10) 100%
);
border: 1.5px solid rgba(var(--vm-maroon-rgb), .48);
border-radius: 50%;
box-shadow:
0 0 0 8px rgba(var(--vm-maroon-rgb), .035),
0 0 0 16px rgba(var(--vm-maroon-rgb), .045),
0 12px 26px -18px rgba(var(--vm-maroon-rgb), .65);
transition: color .35s ease, background-color .35s ease,
transform .5s var(--vm-ease), box-shadow .35s ease;
}
/* ukuran dan warna icon SVG / Font Awesome */
.ars-vm .ars-vm__box.elementor-widget .elementor-icon :is(i, svg) {
position: relative;
z-index: 3;
width: auto;
height: auto;
max-width: 34px;
max-height: 34px;
color: inherit;
fill: currentColor;
}
/* pulse ring yang muncul ketika aliran sampai ke icon */
.ars-vm .ars-vm__box.elementor-widget .elementor-icon::before {
content: "";
position: absolute;
inset: -10px;
z-index: -1;
border: 1px solid rgba(var(--vm-maroon-rgb), .30);
border-radius: 50%;
opacity: 0;
pointer-events: none;
animation: arsVmRing var(--vm-cycle) ease-out var(--vm-delay, 0s) infinite;
animation-play-state: var(--vm-play);
}
/* titik cahaya kecil yang mengorbit lingkaran utama */
.ars-vm .ars-vm__box.elementor-widget .elementor-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
width: 7px;
height: 7px;
box-sizing: content-box;
background: var(--vm-orbit-dot);
border: 2px solid var(--vm-white);
border-radius: 50%;
translate: -50% -50%;
box-shadow: 0 0 0 4px rgba(226, 74, 110, .13),
0 0 12px rgba(226, 74, 110, .55);
pointer-events: none;
animation: arsVmOrbitDot var(--vm-orbit-speed) linear infinite;
animation-play-state: var(--vm-play);
}
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-content {
width: 100%;
}
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-title {
margin: 0 0 14px;
font-family: var(--vm-font-display);
font-size: var(--vm-card-title);
font-weight: 600;
line-height: 1.15;
letter-spacing: -.005em;
color: var(--vm-ink);
}
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-description {
margin: 0;
font-family: var(--vm-font);
font-size: var(--vm-card-text);
line-height: 1.85;
color: var(--vm-muted);
}
/* ---------------------------------------------------------------------
8. ANIMASI ALIRAN LISTRIK (transform / opacity / posisi gradasi kecil)
Satu putaran = --vm-cycle:
0 – 55% cahaya turun dari tombol lewat garis
50 – 70% titik di tepi kartu menyala
60 – 100% cincin ikon berdenyut keluar
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
8a. ANIMASI ORBIT ICON
--------------------------------------------------------------------- */
@keyframes arsVmOrbitRotate {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
@keyframes arsVmOrbitCounterRotate {
from { rotate: 360deg; }
to { rotate: 0deg; }
}
@keyframes arsVmOrbitDot {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(67px) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(67px) rotate(-360deg);
}
}
@keyframes arsVmOrbitFade {
0%, 100% { opacity: .42; }
50% { opacity: .9; }
}
@keyframes arsVmFlow {
0% { background-position: 0 100%, 0 0; } /* cahaya mulai di tombol (atas), belum terlihat */
55% { background-position: 0 0, 0 0; } /* cahaya tiba di kartu (bawah) */
100% { background-position: 0 0, 0 0; }
}
@keyframes arsVmSource {
0% { box-shadow: 0 0 0 0 rgba(226, 74, 110, .65); }
22% { box-shadow: 0 0 0 11px rgba(226, 74, 110, 0); }
100% { box-shadow: 0 0 0 0 rgba(226, 74, 110, 0); }
}
@keyframes arsVmNode {
0%, 48% { background-color: var(--vm-maroon); box-shadow: 0 0 0 0 rgba(226, 74, 110, 0); }
54% { background-color: var(--vm-spark); box-shadow: 0 0 0 0 rgba(226, 74, 110, .7); }
72% { background-color: var(--vm-maroon); box-shadow: 0 0 0 13px rgba(226, 74, 110, 0); }
100% { background-color: var(--vm-maroon); box-shadow: 0 0 0 0 rgba(226, 74, 110, 0); }
}
@keyframes arsVmRing {
0%, 56% { opacity: 0; scale: 1; }
62% { opacity: .95; scale: 1; }
100% { opacity: 0; scale: 1.55; }
}
/* ---------------------------------------------------------------------
9. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con:hover {
transform: translateY(-8px);
border-color: rgba(var(--vm-maroon-rgb), .6);
box-shadow: 0 34px 50px -28px rgba(var(--vm-maroon-rgb), .6);
}
.ars-vm .ars-vm__card:hover .ars-vm__box .elementor-icon {
color: #fff;
background: var(--vm-maroon);
transform: rotate(-4deg);
}
}
/* ---------------------------------------------------------------------
10. ANIMASI MASUK – DESKTOP saja (translate + opacity)
--------------------------------------------------------------------- */
@keyframes arsVmUp {
from { opacity: calc(1 - var(--vm-reveal)); translate: 0 calc(34px * var(--vm-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con {
animation: arsVmUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con { animation-range: entry 6% cover 28%; }
}
}
/* ---------------------------------------------------------------------
10b. TABLET (≤ 1024px) – tetap 2 kolom, lebih rapat
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54).e-con {
--vm-pad-x: 32px;
--vm-col-gap: 24px;
--vm-row-gap: 44px;
--vm-title-size: 50px;
--vm-card-title: 26px;
--vm-card-text: 15px;
--vm-gap: 32px;
--vm-link-h: 84px;
--vm-card-pad-y: 40px;
--vm-card-pad-x: 28px;
--vm-watermark-size: clamp(64px, 14vw, 140px);
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__head.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con { --padding-left: 30px; }
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con::before { display: none; }
.ars-vm .ars-vm__text { max-width: none; }
}
/* ---------------------------------------------------------------------
10c. MOBILE (≤ 767px)
Heading 45px, deskripsi 15px. Satu kolom: tombol → kartu 1 → kartu 2
dihubungkan satu garis lurus ke bawah; cahaya mengalir bergantian.
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54).e-con {
--vm-pad-x: 20px;
--vm-pad-top: 56px;
--vm-pad-bottom: 84px;
--vm-row-gap: 36px;
--vm-col-gap: 16px;
--vm-title-size: 45px;
--vm-text-size: 15px;
--vm-card-title: 25px;
--vm-gap: 72px; /* jarak vertikal antar kartu = tinggi garis */
--vm-link-h: 72px;
--vm-card-pad-y: 36px;
--vm-card-pad-x: 22px;
--vm-icon-pad: 17px;
--vm-watermark-size: 17vw;
/* garis lurus vertikal */
--vm-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 0V100' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__side.e-con { --padding-left: 22px; }
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__intro.e-con::after { width: 4px; }
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__cards.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__cards.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
/* garis lurus tepat di tengah, tinggi = jarak ke elemen di atasnya */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con::before,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con:nth-child(2)::before {
inset: auto auto calc(100% + 1.5px) 50%;
width: 8px;
height: var(--vm-link-h);
transform: translateX(-50%);
}
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con:nth-child(2)::before { height: var(--vm-gap); }
/* kartu 2 menyala setelah kartu 1 */
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54) .ars-vm__card.e-con:nth-child(2) { --vm-delay: calc(var(--vm-cycle) / 2); }
.ars-vm .ars-vm__btn .elementor-button {
padding: 15px 28px;
font-size: 13px;
letter-spacing: .1em;
}
.ars-vm {
--vm-orbit-icon-size: 72px;
--vm-orbit-wrap-size: 122px;
}
.ars-vm .ars-vm__box.elementor-widget .elementor-icon-box-icon {
margin-bottom: 26px;
}
.ars-vm .ars-vm__box.elementor-widget .elementor-icon :is(i, svg) {
max-width: 30px;
max-height: 30px;
}
@keyframes arsVmOrbitDot {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(57px) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(57px) rotate(-360deg);
}
}
}
/* ---------------------------------------------------------------------
11. PEMAKSA WARNA (HAPUS BAGIAN INI jika ingin warna diatur penuh dari panel)
Elemen mentah dari template Elementor membawa warna bawaan (heading,
ikon & judul biru #6EC1E4, tombol hijau #61CE70, teks abu-abu) yang
tersimpan di panel dan menimpa CSS di atas. Bagian ini memaksa warna
maroon/ink. Setelah warna bawaan itu Anda kosongkan di panel
(Style > Color / Background), bagian 11 boleh dihapus.
Font, ukuran, spasi tetap bisa diatur dari panel.
--------------------------------------------------------------------- */
.ars-vm.ars-vm.ars-vm .ars-vm__title .elementor-heading-title { color: var(--vm-ink); }
.ars-vm.ars-vm.ars-vm .ars-vm__text { color: var(--vm-muted); }
.ars-vm.ars-vm.ars-vm .ars-vm__btn .elementor-button {
color: #fff;
background-color: var(--vm-maroon);
border: 1.5px solid var(--vm-maroon);
border-radius: 0;
}
.ars-vm.ars-vm.ars-vm .ars-vm__box .elementor-icon {
color: var(--vm-maroon);
background-color: var(--vm-tint);
border-radius: 50%;
padding: 0;
}
.ars-vm.ars-vm.ars-vm .ars-vm__box .elementor-icon :is(i, svg) { color: inherit; fill: currentColor; }
.ars-vm.ars-vm.ars-vm .ars-vm__box .elementor-icon-box-title,
.ars-vm.ars-vm.ars-vm .ars-vm__box .elementor-icon-box-title a { color: var(--vm-ink); }
.ars-vm.ars-vm.ars-vm .ars-vm__box .elementor-icon-box-description { color: var(--vm-muted); }
@media (hover: hover) {
.ars-vm.ars-vm.ars-vm .ars-vm__card:hover .ars-vm__box .elementor-icon { color: #fff; background-color: var(--vm-maroon); }
}
/* ---------------------------------------------------------------------
12. KURANGI ANIMASI / MATIKAN ALIRAN
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54).e-con *,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54).e-con *::before,
:where(.elementor-5699 .elementor-element.elementor-element-0b9aa54).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-57554fb *//* =====================================================================
OUR TEAM (FOTO BULAT + ORBIT BERPUTAR) – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Why Choose Us, Tour Package, Top Places,
FAQ, Alur, Contact, Gallery, Vision & Mission. Latar putih + cahaya
maroon tipis, watermark "Our Team" bergaris tipis, judul El Messiri,
teks DM Sans.
Tiap anggota tim:
- foto BULAT, tajam & jelas (tanpa overlay), border maroon + matras putih
- halo lembut berlapis di sekelilingnya
- cincin putus-putus yang berputar pelan + titik cahaya yang mengorbit
(seperti contoh Anda)
Kartu "lead" (pemilik/ketua) lebih besar di atas, lalu baris kartu tim.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class yang dipasang (Advanced > CSS Classes), sesuai struktur Anda:
Container (root) ........................ ars-tm
├─ Container (header) ................... ars-tm__head
│ ├─ Container (kiri) ................. ars-tm__intro
│ │ └─ Heading ...................... ars-tm__title
│ └─ Container (kanan) ................ ars-tm__side
│ └─ Text Editor .................. ars-tm__text
├─ Container (kartu besar / lead) ....... ars-tm__lead
│ └─ Image Box ........................ ars-tm__box
└─ Container (baris tim) ................ ars-tm__team
├─ Container (anggota 1) ............ ars-tm__card
│ └─ Image Box .................... ars-tm__box
├─ Container (anggota 2) ............ ars-tm__card
│ └─ Image Box .................... ars-tm__box
└─ … (3–4 anggota, strukturnya sama)
Pakai Image Box: Image = foto (WAJIB persegi atau wajah di tengah),
Title = nama, Description = jabatan + satu kalimat singkat.
Di panel Image Box > Image Size pilih "Large" / "Full" agar foto tajam.
UKURAN TEKS: Heading desktop 55 · tablet 50 · mobile 45
Deskripsi desktop 16 · mobile 15
Ubah di bagian 1 (--tm-title-size / --tm-text-size) bila perlu.
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, border,
gambar, teks yang diatur dari panel menimpa CSS ini. (Lihat bagian 10
untuk warna bawaan template.) Jumlah anggota bebas: kartu yang ganjil
otomatis berada di tengah baris.
RINGAN : tanpa blur / filter / blend-mode. Orbit hanya memakai
`rotate` (diproses GPU); hover hanya di perangkat mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh: Meet Our Team
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb).e-con {
/* Warna */
--tm-maroon: #74142A;
--tm-maroon-dark: #4A0C1B;
--tm-maroon-light: #A32244;
--tm-maroon-rgb: 116, 20, 42;
--tm-spark: #E24A6E; /* titik cahaya yang mengorbit */
--tm-white: #ffffff;
--tm-tint: #FBF3F5;
--tm-ink: #2B1519;
--tm-muted: rgba(43, 21, 25, .74);
/* Font */
--tm-font-display: "El Messiri", Georgia, serif;
--tm-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--tm-max: 1240px;
--tm-pad-x: 48px;
--tm-pad-top: clamp(64px, 7vw, 108px);
--tm-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--tm-row-gap: clamp(44px, 5.5vw, 72px); /* jarak antar blok */
--tm-col-gap: clamp(32px, 5vw, 84px); /* judul ↔ teks */
/* Teks */
--tm-title-size: 55px; /* heading desktop */
--tm-text-size: 16px; /* deskripsi desktop */
--tm-name-size: 25px; /* nama anggota */
--tm-role-size: 15px; /* jabatan / deskripsi */
/* Kartu tim */
--tm-cols: 4; /* kolom per baris (desktop 4 · tablet 2 · mobile 1) */
--tm-gap: 28px; /* jarak antar kartu */
--tm-card-pad-y: 52px;
--tm-card-pad-x: 24px;
--tm-lead-max: 980px; /* lebar maksimal kartu besar */
/* Foto & orbit */
--tm-photo: 170px; /* diameter foto kartu tim */
--tm-photo-lead: 250px; /* diameter foto kartu besar */
--tm-ring: 34px; /* jarak cincin putus-putus dari foto */
--tm-focus: center 22%; /* titik fokus foto (wajah lebih ke atas) */
--tm-orbit: 9s; /* satu putaran titik cahaya */
--tm-spin: 70s; /* satu putaran cincin putus-putus */
--tm-play: running; /* running = berputar · paused = diam */
--tm-halo: 1; /* halo lembut di sekeliling foto: 1 / 0 */
/* Watermark ("" = hilang) */
--tm-watermark: "Our Team";
--tm-watermark-size: clamp(80px, 15vw, 240px);
--tm-wm-stroke: rgba(var(--tm-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--tm-reveal: 1; /* 0 = tanpa animasi masuk */
--tm-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: var(--tm-row-gap);
--row-gap: var(--tm-row-gap);
--column-gap: var(--tm-row-gap);
--padding-top: var(--tm-pad-top);
--padding-bottom: var(--tm-pad-bottom);
--padding-left: max(var(--tm-pad-x), calc((100% - var(--tm-max)) / 2));
--padding-right: max(var(--tm-pad-x), calc((100% - var(--tm-max)) / 2));
--content-width: min(100%, var(--tm-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--tm-font);
background-color: var(--tm-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--tm-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--tm-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb).e-con::after {
content: var(--tm-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--tm-font-display);
font-size: var(--tm-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--tm-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER + HEADER
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__head.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__team.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__head.e-con {
--gap: var(--tm-col-gap);
--row-gap: 24px;
--column-gap: var(--tm-col-gap);
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__head.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__intro.e-con::after {
content: "";
position: absolute;
inset: 6px auto 6px 0;
z-index: 0;
width: 5px;
border-radius: 999px;
background: linear-gradient(180deg, var(--tm-maroon), rgba(var(--tm-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--tm-maroon-rgb), .4), rgba(var(--tm-maroon-rgb), .05));
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__intro .elementor-widget,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side .elementor-widget { margin-block-end: 0; }
/* ---------------------------------------------------------------------
3. JUDUL & TEKS HEADER
Specificity (0,3,0): mengalahkan bawaan Elementor, kalah dari panel.
--------------------------------------------------------------------- */
.ars-tm .ars-tm__title .elementor-heading-title {
margin: 0;
font-family: var(--tm-font-display);
font-size: var(--tm-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--tm-ink);
text-wrap: balance;
}
.ars-tm .ars-tm__title .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--tm-maroon);
background: linear-gradient(transparent 64%, rgba(var(--tm-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.ars-tm .ars-tm__text {
max-width: 560px;
font-family: var(--tm-font);
font-size: var(--tm-text-size);
line-height: 1.85;
color: var(--tm-muted);
}
.ars-tm .ars-tm__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.ars-tm .ars-tm__text p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------
4. KARTU BESAR (LEAD)
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con {
--flex-direction: column;
--align-items: center;
--justify-content: flex-start;
--gap: 0px;
--row-gap: 0px;
--padding-top: 64px;
--padding-bottom: 60px;
--padding-left: 48px;
--padding-right: 48px;
--tm-photo: var(--tm-photo-lead);
--tm-ring: 44px;
width: 100%;
max-width: var(--tm-lead-max);
margin-inline: auto;
background: linear-gradient(180deg, var(--tm-white) 30%, var(--tm-tint) 100%);
border: 1.5px solid rgba(var(--tm-maroon-rgb), .3);
box-shadow: 0 30px 50px -34px rgba(var(--tm-maroon-rgb), .55);
}
/* garis maroon di tepi atas kartu besar */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con::before {
content: "";
position: absolute;
inset: -1.5px -1.5px auto -1.5px;
z-index: 0;
width: auto;
height: 5px;
background: linear-gradient(90deg, var(--tm-maroon), var(--tm-maroon-light) 50%, var(--tm-maroon));
opacity: 1;
pointer-events: none;
}
/* titik hiasan kanan atas kartu besar */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con::after {
content: "";
position: absolute;
inset: 26px 26px auto auto;
z-index: 0;
width: 88px;
height: 88px;
background-image: radial-gradient(rgba(var(--tm-maroon-rgb), .32) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con > .elementor-widget {
position: relative;
z-index: 1;
width: 100%;
max-width: 740px;
margin: 0;
}
/* ---------------------------------------------------------------------
5. BARIS TIM – kartu berderet, yang ganjil otomatis di tengah
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__team.e-con {
--gap: var(--tm-gap);
--row-gap: var(--tm-gap);
--column-gap: var(--tm-gap);
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__team.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__team.e-con-boxed > .e-con-inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--tm-gap);
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con {
--flex-direction: column;
--align-items: center;
--justify-content: flex-start;
--gap: 0px;
--row-gap: 0px;
--padding-top: var(--tm-card-pad-y);
--padding-bottom: calc(var(--tm-card-pad-y) - 12px);
--padding-left: var(--tm-card-pad-x);
--padding-right: var(--tm-card-pad-x);
--width: calc((100% - (var(--tm-cols) - 1) * var(--tm-gap)) / var(--tm-cols));
flex: 0 0 auto;
width: var(--width);
max-width: 100%;
background: linear-gradient(180deg, var(--tm-white) 35%, var(--tm-tint) 100%);
border: 1.5px solid rgba(var(--tm-maroon-rgb), .25);
box-shadow: 0 22px 36px -28px rgba(var(--tm-maroon-rgb), .5);
transition: transform .5s var(--tm-ease), border-color .35s ease, box-shadow .5s var(--tm-ease);
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con > .elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
/* garis maroon di tepi atas kartu (melebar saat hover) */
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con::before {
content: "";
position: absolute;
inset: -1.5px -1.5px auto -1.5px;
z-index: 0;
width: auto;
height: 4px;
background: linear-gradient(90deg, var(--tm-maroon), var(--tm-maroon-light));
opacity: 1;
transform: scaleX(.2);
transform-origin: left center;
transition: transform .6s var(--tm-ease);
pointer-events: none;
}
/* ---------------------------------------------------------------------
6. IMAGE BOX – FOTO BULAT + ORBIT
Figure (.elementor-image-box-img) = acuan: foto bulat di tengah,
::before = cincin putus-putus berputar, ::after = titik cahaya mengorbit.
--------------------------------------------------------------------- */
.ars-tm .ars-tm__box.elementor-widget { width: 100%; margin: 0; }
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img {
position: relative;
isolation: isolate;
display: block;
flex: none;
width: var(--tm-photo);
height: var(--tm-photo);
margin: var(--tm-ring) auto calc(var(--tm-ring) + 14px); /* ruang untuk cincin orbit */
}
/* FOTO: bulat, tajam, tanpa overlay */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
max-width: none;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: var(--tm-focus);
border: 4px solid var(--tm-white);
border-radius: 50%;
box-shadow:
0 0 0 1.5px var(--tm-maroon),
0 0 0 calc(var(--tm-halo) * 11px) rgba(var(--tm-maroon-rgb), .06),
0 0 0 calc(var(--tm-halo) * 22px) rgba(var(--tm-maroon-rgb), .035);
transition: transform .6s var(--tm-ease);
}
/* CINCIN putus-putus (berputar pelan) */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img::before {
content: "";
position: absolute;
inset: calc(var(--tm-ring) * -1);
z-index: 0;
border: 1.5px dashed rgba(var(--tm-maroon-rgb), .42);
border-radius: 50%;
animation: arsTmSpin var(--tm-spin) linear infinite reverse;
animation-play-state: var(--tm-play);
pointer-events: none;
}
/* TITIK CAHAYA yang mengorbit di atas cincin (+ satu titik maroon kecil di sisi lawan) */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img::after {
content: "";
position: absolute;
inset: calc((var(--tm-ring) + 10px) * -1);
z-index: 2;
border-radius: 50%;
background:
radial-gradient(circle at calc(100% - 10px) 50%, #fff 0 2.4px, var(--tm-spark) 3px 5px, rgba(226, 74, 110, .38) 5.5px 7.5px, transparent 8.5px),
radial-gradient(circle at 10px 50%, var(--tm-maroon) 0 3px, rgba(var(--tm-maroon-rgb), .22) 3.5px 6px, transparent 7px);
animation: arsTmSpin var(--tm-orbit) linear infinite;
animation-play-state: var(--tm-play);
pointer-events: none;
}
@keyframes arsTmSpin {
to { rotate: 360deg; }
}
/* kartu genap berputar sebaliknya & mulai di posisi berbeda (tidak serempak) */
.ars-tm .ars-tm__card:nth-child(even) .elementor-image-box-img::after { animation-direction: reverse; }
.ars-tm .ars-tm__card:nth-child(2) .elementor-image-box-img::after { animation-delay: -2.4s; }
.ars-tm .ars-tm__card:nth-child(3) .elementor-image-box-img::after { animation-delay: -4.8s; }
.ars-tm .ars-tm__card:nth-child(4) .elementor-image-box-img::after { animation-delay: -7.2s; }
.ars-tm .ars-tm__card:nth-child(5) .elementor-image-box-img::after { animation-delay: -1.2s; }
.ars-tm .ars-tm__card:nth-child(6) .elementor-image-box-img::after { animation-delay: -3.6s; }
/* ---- teks ---- */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-content { width: 100%; }
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-title {
margin: 0 0 12px;
font-family: var(--tm-font-display);
font-size: var(--tm-name-size);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.005em;
color: var(--tm-ink);
}
/* garis kecil maroon di bawah nama */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-title::after {
content: "";
display: block;
width: 36px;
height: 2px;
margin: 12px auto 0;
background: var(--tm-maroon);
transition: width .5s var(--tm-ease);
}
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-description {
margin: 0;
font-family: var(--tm-font);
font-size: var(--tm-role-size);
line-height: 1.75;
color: var(--tm-muted);
}
/* kartu besar: teks lebih besar */
.ars-tm .ars-tm__lead .elementor-image-box-title { font-size: calc(var(--tm-name-size) + 10px); }
.ars-tm .ars-tm__lead .elementor-image-box-description { font-size: calc(var(--tm-role-size) + 2px); }
/* ---------------------------------------------------------------------
7. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con:hover {
transform: translateY(-8px);
border-color: rgba(var(--tm-maroon-rgb), .55);
box-shadow: 0 34px 50px -28px rgba(var(--tm-maroon-rgb), .6);
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con:hover::before { transform: scaleX(1); }
.ars-tm .ars-tm__box:hover .elementor-image-box-img img { transform: scale(1.05); }
.ars-tm .ars-tm__box:hover .elementor-image-box-title::after { width: 64px; }
}
/* ---------------------------------------------------------------------
8. ANIMASI MASUK – DESKTOP saja (translate + opacity)
--------------------------------------------------------------------- */
@keyframes arsTmUp {
from { opacity: calc(1 - var(--tm-reveal)); translate: 0 calc(34px * var(--tm-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con {
animation: arsTmUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 26%;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con:nth-child(2) { animation-range: entry 4% cover 30%; }
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con:nth-child(3) { animation-range: entry 8% cover 34%; }
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__card.e-con:nth-child(4) { animation-range: entry 12% cover 38%; }
}
}
/* ---------------------------------------------------------------------
8b. TABLET (≤ 1024px) – 2 kolom
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5699 .elementor-element.elementor-element-57554fb).e-con {
--tm-pad-x: 32px;
--tm-col-gap: 24px;
--tm-row-gap: 44px;
--tm-title-size: 50px;
--tm-cols: 2;
--tm-gap: 24px;
--tm-photo: 160px;
--tm-photo-lead: 220px;
--tm-ring: 30px;
--tm-name-size: 24px;
--tm-watermark-size: clamp(80px, 18vw, 170px);
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__head.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con { --padding-left: 30px; }
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con::before { display: none; }
.ars-tm .ars-tm__text { max-width: none; }
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con {
--padding-top: 56px;
--padding-bottom: 52px;
--padding-left: 36px;
--padding-right: 36px;
--tm-ring: 38px;
}
}
/* ---------------------------------------------------------------------
9. MOBILE (≤ 767px) – 1 kolom
Heading 45px, deskripsi 15px. Mau 2 kolom? set --tm-cols: 2 dan
--tm-photo: 110px di blok ini.
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5699 .elementor-element.elementor-element-57554fb).e-con {
--tm-pad-x: 20px;
--tm-pad-top: 56px;
--tm-pad-bottom: 84px;
--tm-row-gap: 36px;
--tm-col-gap: 16px;
--tm-title-size: 45px;
--tm-text-size: 15px;
--tm-cols: 1;
--tm-gap: 20px;
--tm-card-pad-y: 40px;
--tm-card-pad-x: 22px;
--tm-photo: 150px;
--tm-photo-lead: 190px;
--tm-ring: 26px;
--tm-name-size: 23px;
--tm-role-size: 14.5px;
--tm-halo: .8;
--tm-watermark-size: 24vw;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__intro.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__side.e-con { --padding-left: 22px; }
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__intro.e-con::after { width: 4px; }
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con {
--padding-top: 46px;
--padding-bottom: 40px;
--padding-left: 22px;
--padding-right: 22px;
--tm-ring: 32px;
}
:where(.elementor-5699 .elementor-element.elementor-element-57554fb) .ars-tm__lead.e-con::after { display: none; }
}
/* ---------------------------------------------------------------------
10. PEMAKSA WARNA (HAPUS BAGIAN INI jika ingin warna diatur penuh dari panel)
Elemen mentah dari template Elementor membawa warna bawaan (heading &
judul biru #6EC1E4, teks abu-abu) yang tersimpan di panel dan menimpa
CSS di atas. Bagian ini memaksa warna maroon/ink. Setelah warna bawaan
itu Anda kosongkan di panel (Style > Text Color), bagian 10 boleh dihapus.
Font, ukuran, spasi tetap bisa diatur dari panel.
--------------------------------------------------------------------- */
.ars-tm.ars-tm.ars-tm .ars-tm__title .elementor-heading-title { color: var(--tm-ink); }
.ars-tm.ars-tm.ars-tm .ars-tm__text { color: var(--tm-muted); }
.ars-tm.ars-tm.ars-tm .ars-tm__box .elementor-image-box-title,
.ars-tm.ars-tm.ars-tm .ars-tm__box .elementor-image-box-title a { color: var(--tm-ink); }
.ars-tm.ars-tm.ars-tm .ars-tm__box .elementor-image-box-description { color: var(--tm-muted); }
/* ---------------------------------------------------------------------
11. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5699 .elementor-element.elementor-element-57554fb).e-con *,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb).e-con *::before,
:where(.elementor-5699 .elementor-element.elementor-element-57554fb).e-con *::after {
animation: none !important;
transition: none !important;
}
}
/* =====================================================================
12. FIX FOTO BULAT SEMPURNA – OVERRIDE FINAL
Bagian ini mengunci area foto menjadi persegi 1:1 sehingga foto tidak
dapat berubah menjadi oval/rugby karena aturan ukuran dari Elementor.
Berlaku untuk foto anggota dan foto lead.
===================================================================== */
/* Area figure foto: width dan height selalu sama */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img {
position: relative !important;
display: block !important;
flex: 0 0 var(--tm-photo) !important;
width: var(--tm-photo) !important;
height: var(--tm-photo) !important;
min-width: var(--tm-photo) !important;
min-height: var(--tm-photo) !important;
max-width: var(--tm-photo) !important;
max-height: var(--tm-photo) !important;
aspect-ratio: 1 / 1 !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Link pembungkus gambar jika Image Box Elementor menggunakannya */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img > a {
position: relative !important;
display: block !important;
width: var(--tm-photo) !important;
height: var(--tm-photo) !important;
min-width: var(--tm-photo) !important;
min-height: var(--tm-photo) !important;
max-width: var(--tm-photo) !important;
max-height: var(--tm-photo) !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
border-radius: 50% !important;
}
/* Foto asli: selalu width = height dan dipotong dengan object-fit */
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img img {
position: relative !important;
z-index: 1;
display: block !important;
box-sizing: border-box !important;
width: var(--tm-photo) !important;
height: var(--tm-photo) !important;
min-width: var(--tm-photo) !important;
min-height: var(--tm-photo) !important;
max-width: var(--tm-photo) !important;
max-height: var(--tm-photo) !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
object-position: var(--tm-focus) !important;
border-radius: 50% !important;
}
/* Pastikan border dan radius tetap bulat walaupun panel Elementor memiliki
aturan border/radius sendiri. */
.ars-tm.ars-tm.ars-tm
.ars-tm__box.elementor-widget .elementor-image-box-img,
.ars-tm.ars-tm.ars-tm
.ars-tm__box.elementor-widget .elementor-image-box-img > a,
.ars-tm.ars-tm.ars-tm
.ars-tm__box.elementor-widget .elementor-image-box-img img {
border-radius: 50% !important;
}
/* =====================================================================
13. RESPONSIVE FOTO BULAT
Variabel --tm-photo otomatis mengikuti nilai desktop/tablet/mobile
yang sudah didefinisikan di bagian responsive CSS sebelumnya.
===================================================================== */
@media (max-width: 1024px) {
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img,
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img > a,
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img img {
width: var(--tm-photo) !important;
height: var(--tm-photo) !important;
min-width: var(--tm-photo) !important;
min-height: var(--tm-photo) !important;
max-width: var(--tm-photo) !important;
max-height: var(--tm-photo) !important;
}
}
@media (max-width: 767px) {
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img,
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img > a,
.ars-tm .ars-tm__box.elementor-widget .elementor-image-box-img img {
width: var(--tm-photo) !important;
height: var(--tm-photo) !important;
min-width: var(--tm-photo) !important;
min-height: var(--tm-photo) !important;
max-width: var(--tm-photo) !important;
max-height: var(--tm-photo) !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0387e08 *//* =====================================================================
CUSTOM TOUR – MAROON & PUTIH (v1.1)
Class TIDAK diubah dari v1.0.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(GANTI seluruh CSS v1.0)
YANG BERUBAH di v1.1
- SEMUA warna emas/oranye dihapus. Hanya maroon, putih, dan blush
(merah muda lembut) sebagai aksen.
- Foto diberi lapisan maroon tipis agar nada warnanya menyatu
(atur kekuatannya di --ct-photo-tint).
- ICON LIST baru: tiap baris berupa panel transparan putih tipis
dengan garis putih di kiri yang memanjang saat hover, ikon putih,
jarak rapi.
Class (Advanced > CSS Classes):
Container (root) ........................ ars-ct
└─ Container (kartu) .................... ars-ct__card
├─ Container (kiri, "Empty" + foto) . ars-ct__media
└─ Container (kanan, konten) ........ ars-ct__content
├─ Heading ...................... ars-ct__title
├─ Text Editor .................. ars-ct__text
├─ Icon List .................... ars-ct__list
└─ Button ....................... ars-ct__btn
FOTO: pasang dari panel container kiri > Style > Background > Image.
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
border, radius, tinggi, background, warna/ukuran ikon & teks daftar
yang diatur dari panel menimpa CSS ini.
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/scale/opacity; hover hanya di mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna blush, contoh: Custom & Flexible Bali Tours
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08).e-con {
/* Warna (hanya maroon, putih, blush) */
--ct-maroon: #74142A;
--ct-maroon-dark: #4A0C1B;
--ct-maroon-light: #A32244;
--ct-maroon-rgb: 116, 20, 42;
--ct-white: #ffffff;
--ct-tint: #FBF3F5;
--ct-blush: #F4D3DB;
--ct-ink: #2B1519;
/* Font */
--ct-font-display: "El Messiri", Georgia, serif;
--ct-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--ct-max: 1240px;
--ct-pad-x: 48px;
--ct-pad-top: clamp(64px, 7vw, 108px);
--ct-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--ct-media-h: clamp(300px, 36vw, 460px); /* tinggi minimum foto (desktop) */
/* Bentuk kartu (atas-kiri atas-kanan bawah-kanan bawah-kiri) */
--ct-shape: 84px 14px 84px 14px; /* 14px = kotak membulat biasa */
/* Foto: lapisan maroon tipis (0 = tanpa, .3 = lebih maroon) */
--ct-photo-tint: .2;
/* Chip kecil di foto */
--ct-tag: "Tailor-Made";
--ct-tag-on: 1; /* 0 = sembunyikan chip */
/* Teks */
--ct-title-size: clamp(28px, 3.3vw, 46px);
--ct-text-size: 16px;
/* Watermark ("" = hilang) */
--ct-watermark: "Custom Tour";
--ct-watermark-size: clamp(80px, 15vw, 240px);
--ct-wm-stroke: rgba(var(--ct-maroon-rgb), .13);
/* Animasi */
--ct-reveal: 1; /* 0 = tanpa animasi masuk */
--ct-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: 32px;
--row-gap: 32px;
--column-gap: 32px;
--padding-top: var(--ct-pad-top);
--padding-bottom: var(--ct-pad-bottom);
--padding-left: max(var(--ct-pad-x), calc((100% - var(--ct-max)) / 2));
--padding-right: max(var(--ct-pad-x), calc((100% - var(--ct-max)) / 2));
--content-width: min(100%, var(--ct-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--ct-font);
background-color: var(--ct-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--ct-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--ct-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08).e-con::after {
content: var(--ct-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--ct-font-display);
font-size: var(--ct-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--ct-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. KARTU – ars-ct__card
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__media.e-con,
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con {
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
overflow: hidden;
border-radius: var(--ct-shape);
background-color: var(--ct-maroon);
box-shadow: 0 44px 64px -36px rgba(var(--ct-maroon-rgb), .65), 0 0 0 1px rgba(var(--ct-maroon-rgb), .12);
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
align-items: stretch;
}
/* kilau diagonal menyapu seluruh kartu (aktif saat hover, lihat bagian 6) */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
transform: translateX(-130%);
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. FOTO (kiri) – ars-ct__media
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__media.e-con {
min-height: var(--min-height, var(--ct-media-h));
background-color: var(--ct-blush);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* lapisan maroon tipis + gradasi maroon di tepi (menyatu dengan konten) */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__media.e-con::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(74, 12, 27, 0) 58%, rgba(74, 12, 27, .55) 100%),
linear-gradient(180deg, rgba(74, 12, 27, 0) 55%, rgba(74, 12, 27, .4) 100%),
linear-gradient(rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)), rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)));
pointer-events: none;
}
/* chip kecil di pojok kiri bawah foto */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__media.e-con::before {
content: var(--ct-tag);
position: absolute;
inset: auto auto 22px 22px;
z-index: 2;
width: auto;
height: auto;
padding: 8px 16px;
font-family: var(--ct-font);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ct-white);
background: var(--ct-maroon);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 0;
mix-blend-mode: normal;
transition: none;
opacity: var(--ct-tag-on);
pointer-events: none;
}
/* ---------------------------------------------------------------------
4. KONTEN (kanan) – ars-ct__content
--------------------------------------------------------------------- */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--gap: 18px;
--row-gap: 18px;
--padding-top: clamp(32px, 4.4vw, 60px);
--padding-right: clamp(26px, 4vw, 56px);
--padding-bottom: clamp(32px, 4.4vw, 60px);
--padding-left: clamp(26px, 4vw, 56px);
overflow: hidden;
background-color: var(--ct-maroon-dark);
background-image:
radial-gradient(circle at 12% 96%, rgba(163, 34, 68, .55), transparent 46%),
radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .09), transparent 38%),
linear-gradient(160deg, var(--ct-maroon) 0%, var(--ct-maroon-dark) 100%);
}
/* cincin besar samar di pojok kanan atas */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content.e-con::before {
content: "";
position: absolute;
inset: -90px -90px auto auto;
z-index: 0;
width: 250px;
height: 250px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 50%;
mix-blend-mode: normal;
transition: none;
background: none;
opacity: 1;
box-shadow: 0 0 0 34px rgba(255, 255, 255, .04);
pointer-events: none;
}
/* titik-titik di pojok kanan bawah */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content.e-con::after {
content: "";
position: absolute;
inset: auto 24px 24px auto;
z-index: 0;
width: 84px;
height: 56px;
background-image: radial-gradient(rgba(255, 255, 255, .28) 1.4px, transparent 1.7px);
background-size: 14px 14px;
pointer-events: none;
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content .elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
/* ---- judul ---- */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__title.elementor-widget::before {
content: "";
display: block;
width: 52px;
height: 2px;
margin-bottom: 16px;
background: linear-gradient(90deg, var(--ct-white), transparent);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__title .elementor-heading-title {
margin: 0;
font-family: var(--ct-font-display);
font-size: var(--ct-title-size);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ct-white);
text-wrap: balance;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__title .elementor-heading-title :is(span, em, b, strong) {
font-style: normal;
font-weight: inherit;
color: var(--ct-blush);
}
/* ---- teks ---- */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__text {
max-width: 560px;
font-family: var(--ct-font);
font-size: var(--ct-text-size);
line-height: 1.8;
color: rgba(255, 255, 255, .86);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__text p:last-child {
margin-bottom: 0;
}
/* ---- ICON LIST: baris panel transparan + garis putih di kiri ---- */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-items {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-item {
position: relative;
display: flex;
align-items: center;
gap: 14px;
overflow: hidden;
margin: 0;
padding: 12px 16px 12px 20px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 0;
transition: transform .35s var(--ct-ease), background-color .35s ease, border-color .35s ease;
}
/* tautan di dalam baris ikut rapi */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-item > a {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
color: inherit;
}
/* garis putih di kiri (memanjang saat hover) */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--ct-white), rgba(255, 255, 255, .45));
transform: scaleX(.6);
transform-origin: left center;
transition: transform .35s var(--ct-ease);
pointer-events: none;
}
/* ikon putih (warna dari panel tetap menang) */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-icon {
flex: none;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-icon i {
color: var(--e-icon-list-icon-color, var(--ct-white));
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-icon svg {
fill: var(--e-icon-list-icon-color, var(--ct-white));
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-text {
padding: 0;
font-family: var(--ct-font);
font-size: 15px;
line-height: 1.5;
color: rgba(255, 255, 255, .94);
}
/* ---- tombol: kotak outline putih ---- */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__btn.elementor-widget {
margin-top: 6px;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button {
position: relative;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
min-height: 48px;
padding: 15px 28px;
font-family: var(--ct-font);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: var(--ct-white);
background: transparent;
border: 1.5px solid rgba(255, 255, 255, .85);
border-radius: 0;
box-shadow: none;
transition: color .35s ease, border-color .35s ease, transform .35s var(--ct-ease), box-shadow .35s var(--ct-ease);
}
/* isian putih meluncur dari kiri */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--ct-white);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s var(--ct-ease);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button-content-wrapper {
justify-content: center;
gap: 10px;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button-text {
color: inherit;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button-icon {
color: inherit;
transition: transform .35s var(--ct-ease);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button-icon svg {
fill: currentColor;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button:active {
transform: translate(0, 0);
box-shadow: none;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button:focus-visible {
outline: 2px solid var(--ct-white);
outline-offset: 3px;
}
/* ---------------------------------------------------------------------
5. ANIMASI
a) Chip di foto melayang pelan (translate, murah)
b) Kartu masuk saat scroll – DESKTOP saja
--------------------------------------------------------------------- */
@keyframes arsCtBob {
from { translate: 0 0; }
to { translate: 0 -6px; }
}
@keyframes arsCtZoom {
from { opacity: calc(1 - var(--ct-reveal)); translate: 0 calc(40px * var(--ct-reveal)); scale: calc(1 - .04 * var(--ct-reveal)); }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__media.e-con::before {
animation: arsCtBob 3.6s ease-in-out infinite alternate;
}
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con {
animation: arsCtZoom linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}
}
/* ---------------------------------------------------------------------
6. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
/* kilau menyapu kartu */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con:hover::after {
transform: translateX(130%);
transition: transform 1.1s var(--ct-ease);
}
/* baris icon list */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-item:hover {
transform: translateX(5px);
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .34);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-item:hover::before {
transform: scaleX(1);
}
/* tombol */
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button:hover,
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button:focus-visible {
color: var(--ct-maroon);
border-color: var(--ct-white);
transform: translate(-3px, -3px);
box-shadow: 5px 5px 0 var(--ct-blush);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button:hover::before,
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button:focus-visible::before {
transform: scaleX(1);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button:hover .elementor-button-icon {
transform: translateX(4px);
}
}
/* ---------------------------------------------------------------------
7. TABLET (≤ 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5699 .elementor-element.elementor-element-0387e08).e-con {
--ct-pad-x: 32px;
--ct-media-h: clamp(300px, 44vw, 400px);
--ct-shape: 64px 14px 64px 14px;
--ct-watermark-size: clamp(80px, 18vw, 170px);
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__text {
max-width: none;
}
}
/* ---------------------------------------------------------------------
8. MOBILE (≤ 767px)
Foto di atas, konten di bawah, tombol selebar penuh
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5699 .elementor-element.elementor-element-0387e08).e-con {
--ct-pad-x: 20px;
--ct-pad-top: 56px;
--ct-pad-bottom: 84px;
--ct-media-h: clamp(220px, 62vw, 300px);
--ct-shape: 48px 12px 48px 12px;
--ct-title-size: clamp(26px, 7.4vw, 34px);
--ct-text-size: 15px;
--ct-watermark-size: 24vw;
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con-full,
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__card.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
/* gradasi foto berpindah ke bagian bawah (menyatu dengan konten) */
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__media.e-con::after {
background:
linear-gradient(180deg, rgba(74, 12, 27, 0) 50%, rgba(74, 12, 27, .6) 100%),
linear-gradient(rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)), rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)));
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__media.e-con::before {
inset: auto auto 18px 18px;
padding: 7px 13px;
font-size: 9.5px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content.e-con {
--padding-top: 30px;
--padding-right: 22px;
--padding-bottom: 32px;
--padding-left: 22px;
--gap: 16px;
--row-gap: 16px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content.e-con::before {
inset: -70px -70px auto auto;
width: 190px;
height: 190px;
}
:where(.elementor-5699 .elementor-element.elementor-element-0387e08) .ars-ct__content.e-con::after {
display: none;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-item {
padding: 11px 14px 11px 18px;
gap: 12px;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__list .elementor-icon-list-text {
font-size: 14.5px;
}
.elementor-5699 .elementor-element.elementor-element-0387e08 .ars-ct__btn .elementor-button {
width: 100%;
min-height: 48px;
padding: 14px 22px;
font-size: 12px;
letter-spacing: .12em;
}
}
/* ---------------------------------------------------------------------
9. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5699 .elementor-element.elementor-element-0387e08).e-con *,
:where(.elementor-5699 .elementor-element.elementor-element-0387e08).e-con *::before,
:where(.elementor-5699 .elementor-element.elementor-element-0387e08).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */