.elementor-5278 .elementor-element.elementor-element-266d8c9{--display:flex;}.elementor-5278 .elementor-element.elementor-element-041016e{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5278 .elementor-element.elementor-element-f004b36{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5278 .elementor-element.elementor-element-f004b36:not(.elementor-motion-effects-element-type-background), .elementor-5278 .elementor-element.elementor-element-f004b36 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-b74612a{width:100%;max-width:100%;margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5278 .elementor-element.elementor-element-edf5282{--display:flex;}.elementor-5278 .elementor-element.elementor-element-1f91b88{--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-5278 .elementor-element.elementor-element-115610b{--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-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-5278 .elementor-element.elementor-element-e26197c .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:#000000;}.elementor-5278 .elementor-element.elementor-element-02b3968{--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-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-5278 .elementor-element.elementor-element-9c679a8{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-widget-loop-grid .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-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-5278 .elementor-element.elementor-element-066c1a3{--grid-columns:3;}.elementor-5278 .elementor-element.elementor-element-066c1a3 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-5278 .elementor-element.elementor-element-066c1a3 .e-loop-item > .elementor-section, .elementor-5278 .elementor-element.elementor-element-066c1a3 .e-loop-item > .elementor-section > .elementor-container, .elementor-5278 .elementor-element.elementor-element-066c1a3 .e-loop-item > .e-con, .elementor-5278 .elementor-element.elementor-element-066c1a3 .e-loop-item .elementor-section-wrap > .e-con{height:100%;}.elementor-5278 .elementor-element.elementor-element-87c5d84{--display:flex;}.elementor-5278 .elementor-element.elementor-element-a852fbb{--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-5278 .elementor-element.elementor-element-bac78be{--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-5278 .elementor-element.elementor-element-1f0b353 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:#000000;}.elementor-5278 .elementor-element.elementor-element-ade8406{--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-5278 .elementor-element.elementor-element-ab6964b{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-a6a6154{--display:flex;}.elementor-5278 .elementor-element.elementor-element-51669ee{--display:flex;}.elementor-5278 .elementor-element.elementor-element-9a44067{--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-5278 .elementor-element.elementor-element-d2a441e{--display:flex;}.elementor-5278 .elementor-element.elementor-element-1080e71{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-741f9c9 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:#121212;}.elementor-5278 .elementor-element.elementor-element-fa0fa26{--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-5278 .elementor-element.elementor-element-6212991{--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-5278 .elementor-element.elementor-element-7dcb48b{--display:flex;}.elementor-5278 .elementor-element.elementor-element-83bb93f{--display:flex;}.elementor-5278 .elementor-element.elementor-element-8306b00 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:600;color:#121212;}.elementor-5278 .elementor-element.elementor-element-237af89{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-48f5dd7{--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-5278 .elementor-element.elementor-element-7f4664f .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-7f4664f.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-7f4664f.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-7f4664f.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-7f4664f .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-7f4664f .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:22px;font-weight:700;}.elementor-5278 .elementor-element.elementor-element-7f4664f .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-7f4664f:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-7f4664f:has(:focus) .elementor-icon-box-title{color:#74142A;}.elementor-5278 .elementor-element.elementor-element-7f4664f .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-9f944a3 .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-9f944a3.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-9f944a3.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-9f944a3.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-9f944a3 .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-9f944a3 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:22px;font-weight:700;}.elementor-5278 .elementor-element.elementor-element-9f944a3 .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-9f944a3:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-9f944a3:has(:focus) .elementor-icon-box-title{color:#74142A;}.elementor-5278 .elementor-element.elementor-element-9f944a3 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-74969ba .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-74969ba.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-74969ba.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-74969ba.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-74969ba .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-74969ba .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:22px;font-weight:700;}.elementor-5278 .elementor-element.elementor-element-74969ba .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-74969ba:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-74969ba:has(:focus) .elementor-icon-box-title{color:#74142A;}.elementor-5278 .elementor-element.elementor-element-74969ba .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-fe6ece6{--display:flex;}.elementor-5278 .elementor-element.elementor-element-5537a4b{--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-5278 .elementor-element.elementor-element-9e1d8f1{--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-5278 .elementor-element.elementor-element-0f092a6 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:#000000;}.elementor-5278 .elementor-element.elementor-element-e9bea6a{--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-5278 .elementor-element.elementor-element-055b3a2{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5278 .elementor-element.elementor-element-f948d1a{--display:flex;}.elementor-5278 .elementor-element.elementor-element-25e6654{--grid-columns:3;}.elementor-5278 .elementor-element.elementor-element-25e6654 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-5278 .elementor-element.elementor-element-25e6654 .e-loop-item > .elementor-section, .elementor-5278 .elementor-element.elementor-element-25e6654 .e-loop-item > .elementor-section > .elementor-container, .elementor-5278 .elementor-element.elementor-element-25e6654 .e-loop-item > .e-con, .elementor-5278 .elementor-element.elementor-element-25e6654 .e-loop-item .elementor-section-wrap > .e-con{height:100%;}.elementor-5278 .elementor-element.elementor-element-a3d3b5c{--display:flex;}.elementor-5278 .elementor-element.elementor-element-7cad92c{--grid-columns:3;}.elementor-5278 .elementor-element.elementor-element-5b56d28{--display:flex;}.elementor-5278 .elementor-element.elementor-element-acb6655{--grid-columns:3;}.elementor-5278 .elementor-element.elementor-element-12b51e0{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-font-size:16px;}.elementor-5278 .elementor-element.elementor-element-12b51e0.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#61CE7000;}.elementor-5278 .elementor-element.elementor-element-12b51e0.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-5278 .elementor-element.elementor-element-12b51e0.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#61CE7000;}.elementor-5278 .elementor-element.elementor-element-12b51e0.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"DM Sans", Sans-serif;font-weight:500;}.elementor-5278 .elementor-element.elementor-element-80d784e{--display:flex;}.elementor-5278 .elementor-element.elementor-element-9c663cd{--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-5278 .elementor-element.elementor-element-e0302db{--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-5278 .elementor-element.elementor-element-11a077e .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;}.elementor-5278 .elementor-element.elementor-element-6b96cfe{--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-5278 .elementor-element.elementor-element-b4b91a2{--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-5278 .elementor-element.elementor-element-c38d8bc{--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-5278 .elementor-element.elementor-element-d3d67a2 .elementor-image-box-wrapper{text-align:start;}.elementor-5278 .elementor-element.elementor-element-d3d67a2.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5278 .elementor-element.elementor-element-d3d67a2.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5278 .elementor-element.elementor-element-d3d67a2.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5278 .elementor-element.elementor-element-d3d67a2 .elementor-image-box-wrapper .elementor-image-box-img{width:70%;}.elementor-5278 .elementor-element.elementor-element-d3d67a2 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5278 .elementor-element.elementor-element-d3d67a2 .elementor-image-box-title{font-family:"El Messiri", Sans-serif;font-size:32px;font-weight:600;color:var( --e-global-color-7268438 );}.elementor-5278 .elementor-element.elementor-element-d3d67a2:has(:hover) .elementor-image-box-title,
.elementor-5278 .elementor-element.elementor-element-d3d67a2:has(:focus) .elementor-image-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-d3d67a2 .elementor-image-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-18831b6{--display:flex;}.elementor-5278 .elementor-element.elementor-element-225db86 .elementor-image-box-wrapper{text-align:start;}.elementor-5278 .elementor-element.elementor-element-225db86.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5278 .elementor-element.elementor-element-225db86.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5278 .elementor-element.elementor-element-225db86.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5278 .elementor-element.elementor-element-225db86 .elementor-image-box-wrapper .elementor-image-box-img{width:70%;}.elementor-5278 .elementor-element.elementor-element-225db86 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5278 .elementor-element.elementor-element-225db86 .elementor-image-box-title{font-family:"El Messiri", Sans-serif;font-size:32px;font-weight:600;color:var( --e-global-color-7268438 );}.elementor-5278 .elementor-element.elementor-element-225db86:has(:hover) .elementor-image-box-title,
.elementor-5278 .elementor-element.elementor-element-225db86:has(:focus) .elementor-image-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-225db86 .elementor-image-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-b04d952{--display:flex;}.elementor-5278 .elementor-element.elementor-element-389e477 .elementor-image-box-wrapper{text-align:start;}.elementor-5278 .elementor-element.elementor-element-389e477.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5278 .elementor-element.elementor-element-389e477.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5278 .elementor-element.elementor-element-389e477.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5278 .elementor-element.elementor-element-389e477 .elementor-image-box-wrapper .elementor-image-box-img{width:70%;}.elementor-5278 .elementor-element.elementor-element-389e477 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5278 .elementor-element.elementor-element-389e477 .elementor-image-box-title{font-family:"El Messiri", Sans-serif;font-size:32px;font-weight:600;color:var( --e-global-color-7268438 );}.elementor-5278 .elementor-element.elementor-element-389e477:has(:hover) .elementor-image-box-title,
.elementor-5278 .elementor-element.elementor-element-389e477:has(:focus) .elementor-image-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-389e477 .elementor-image-box-description{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-738aeb9{--display:flex;}.elementor-5278 .elementor-element.elementor-element-7971775{--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-5278 .elementor-element.elementor-element-b68e203{--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-5278 .elementor-element.elementor-element-7b34d85 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:#000000;}.elementor-5278 .elementor-element.elementor-element-31902eb{--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-5278 .elementor-element.elementor-element-aaaacbb{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-cc17111{--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-5278 .elementor-element.elementor-element-999497c{--display:flex;}.elementor-5278 .elementor-element.elementor-element-2fb10c3 .elementor-icon-box-wrapper{text-align:end;gap:15px;}.elementor-5278 .elementor-element.elementor-element-2fb10c3.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-2fb10c3.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-2fb10c3.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-2fb10c3 .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-2fb10c3 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:25px;font-weight:600;}.elementor-5278 .elementor-element.elementor-element-2fb10c3 .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-2fb10c3:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-2fb10c3:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-2fb10c3 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-29cfaa9 .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-29cfaa9.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-29cfaa9.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-29cfaa9.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-29cfaa9 .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-29cfaa9 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:25px;font-weight:600;}.elementor-5278 .elementor-element.elementor-element-29cfaa9 .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-29cfaa9:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-29cfaa9:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-29cfaa9 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-6b5a147 .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-6b5a147.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-6b5a147.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-6b5a147.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-6b5a147 .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-6b5a147 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:25px;font-weight:600;}.elementor-5278 .elementor-element.elementor-element-6b5a147 .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-6b5a147:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-6b5a147:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-6b5a147 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-2aa7aa0{--display:flex;}.elementor-5278 .elementor-element.elementor-element-03646f9{--display:flex;}.elementor-5278 .elementor-element.elementor-element-38874c8 .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-38874c8.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-38874c8.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-38874c8.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-38874c8 .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-38874c8 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:25px;font-weight:600;}.elementor-5278 .elementor-element.elementor-element-38874c8 .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-38874c8:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-38874c8:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-38874c8 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-ddaf008 .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-ddaf008.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-ddaf008.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-ddaf008.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-ddaf008 .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-ddaf008 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:25px;font-weight:600;}.elementor-5278 .elementor-element.elementor-element-ddaf008 .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-ddaf008:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-ddaf008:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-ddaf008 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-1b23cb5 .elementor-icon-box-wrapper{gap:15px;}.elementor-5278 .elementor-element.elementor-element-1b23cb5.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-1b23cb5.elementor-view-framed .elementor-icon, .elementor-5278 .elementor-element.elementor-element-1b23cb5.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-1b23cb5 .elementor-icon-box-title, .elementor-5278 .elementor-element.elementor-element-1b23cb5 .elementor-icon-box-title a{font-family:"El Messiri", Sans-serif;font-size:25px;font-weight:600;}.elementor-5278 .elementor-element.elementor-element-1b23cb5 .elementor-icon-box-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-1b23cb5:has(:hover) .elementor-icon-box-title,
.elementor-5278 .elementor-element.elementor-element-1b23cb5:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-1b23cb5 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-0335091{--display:flex;}.elementor-5278 .elementor-element.elementor-element-1a53026{--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-5278 .elementor-element.elementor-element-43e44b8{--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-5278 .elementor-element.elementor-element-b1b79ac .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:#000000;}.elementor-5278 .elementor-element.elementor-element-59dbae7{--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-5278 .elementor-element.elementor-element-38418e0{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-5aac446{--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-5278 .elementor-element.elementor-element-3e86756{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5278 .elementor-element.elementor-element-61ce655 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-b7aa20f .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:61px;font-weight:600;color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-3c53b3c{--e-rating-justify-content:center;--e-rating-icon-marked-color:#FFAA00;}.elementor-5278 .elementor-element.elementor-element-fef5258 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:35px;font-weight:600;color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-e356897{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-e0390a4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-widget-reviews .elementor-testimonial__header, .elementor-widget-reviews .elementor-testimonial__name{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-reviews .elementor-testimonial__text{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5278 .elementor-element.elementor-element-2cbc3b9 .elementor-swiper-button{font-size:20px;}.elementor-5278 .elementor-element.elementor-element-12c9589{--display:flex;}.elementor-5278 .elementor-element.elementor-element-1fb4c4e{--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-5278 .elementor-element.elementor-element-1cd242a{--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-5278 .elementor-element.elementor-element-6e8e71d .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;color:var( --e-global-color-7268438 );}.elementor-5278 .elementor-element.elementor-element-c25f66d{--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-5278 .elementor-element.elementor-element-680eb5d{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-2706724{--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-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5278 .elementor-element.elementor-element-07ac1ff.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-5278 .elementor-element.elementor-element-07ac1ff .elementor-thumbnails-swiper .elementor-carousel-image{aspect-ratio:21 / 9;}.elementor-5278 .elementor-element.elementor-element-07ac1ff .elementor-swiper-button{font-size:20px;}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5278 .elementor-element.elementor-element-aa6c7aa .gallery-item .gallery-caption{text-align:center;}.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-5278 .elementor-element.elementor-element-01100d9 .elementor-button{background-color:var( --e-global-color-7eee4be );font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:500;}.elementor-5278 .elementor-element.elementor-element-01100d9 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-5278 .elementor-element.elementor-element-1793813{--display:flex;}.elementor-5278 .elementor-element.elementor-element-ca1a6fb{--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-5278 .elementor-element.elementor-element-c543453{--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;}.elementor-5278 .elementor-element.elementor-element-add57e1 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:700;}.elementor-5278 .elementor-element.elementor-element-d9cc0e4{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-b47c645 .elementor-button{background-color:#61CE70;font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:500;}.elementor-5278 .elementor-element.elementor-element-b47c645 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-5278 .elementor-element.elementor-element-eedc984{--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-accordion .elementor-accordion-icon, .elementor-widget-accordion .elementor-accordion-title{color:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-accordion-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon, .elementor-widget-accordion .elementor-active .elementor-accordion-title{color:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon svg{fill:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-accordion-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-accordion .elementor-tab-content{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-5278 .elementor-element.elementor-element-53a2914 .elementor-accordion-icon, .elementor-5278 .elementor-element.elementor-element-53a2914 .elementor-accordion-title{color:#000000;}.elementor-5278 .elementor-element.elementor-element-53a2914 .elementor-accordion-icon svg{fill:#000000;}.elementor-5278 .elementor-element.elementor-element-53a2914 .elementor-accordion-title{font-family:"El Messiri", Sans-serif;font-size:18px;font-weight:600;}.elementor-5278 .elementor-element.elementor-element-53a2914 .elementor-tab-title.elementor-active .elementor-accordion-icon i:before{color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-53a2914 .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-53a2914 .elementor-tab-content{color:#000000;font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-9924e43{--display:flex;}.elementor-5278 .elementor-element.elementor-element-fa74624{--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-5278 .elementor-element.elementor-element-1159440{--display:flex;--border-radius:0px 0px 0px 0px;}.elementor-5278 .elementor-element.elementor-element-1159440:not(.elementor-motion-effects-element-type-background), .elementor-5278 .elementor-element.elementor-element-1159440 > .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-5278 .elementor-element.elementor-element-baa9735{--display:flex;--justify-content:center;--border-radius:0px 0px 0px 0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5278 .elementor-element.elementor-element-baa9735:not(.elementor-motion-effects-element-type-background), .elementor-5278 .elementor-element.elementor-element-baa9735 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-7eee4be );}.elementor-5278 .elementor-element.elementor-element-b151d2c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-5278 .elementor-element.elementor-element-b151d2c .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:45px;font-weight:500;color:#FFFFFF;}.elementor-5278 .elementor-element.elementor-element-a82ae93{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-5278 .elementor-element.elementor-element-7fe335e .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-5278 .elementor-element.elementor-element-7fe335e .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-5278 .elementor-element.elementor-element-7fe335e{--e-icon-list-icon-size:19px;--icon-vertical-offset:0px;}.elementor-5278 .elementor-element.elementor-element-7fe335e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5278 .elementor-element.elementor-element-7fe335e .elementor-icon-list-item > a{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5278 .elementor-element.elementor-element-7fe335e .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-5278 .elementor-element.elementor-element-3a8b1e4 .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-5278 .elementor-element.elementor-element-3a8b1e4 .elementor-button-content-wrapper{flex-direction:row-reverse;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-5278 .elementor-element.elementor-element-1159440{--width:40%;}.elementor-5278 .elementor-element.elementor-element-baa9735{--width:60%;}}@media(max-width:1024px){.elementor-5278 .elementor-element.elementor-element-066c1a3{--grid-columns:2;}.elementor-5278 .elementor-element.elementor-element-25e6654{--grid-columns:2;}.elementor-5278 .elementor-element.elementor-element-7cad92c{--grid-columns:2;}.elementor-5278 .elementor-element.elementor-element-acb6655{--grid-columns:2;}.elementor-5278 .elementor-element.elementor-element-07ac1ff.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-5278 .elementor-element.elementor-element-f004b36{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5278 .elementor-element.elementor-element-e26197c .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-9c679a8{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-066c1a3{--grid-columns:1;}.elementor-5278 .elementor-element.elementor-element-1f0b353 .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-ab6964b{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-741f9c9 .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-8306b00 .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-237af89{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-7f4664f .elementor-icon-box-wrapper{text-align:center;}.elementor-5278 .elementor-element.elementor-element-9f944a3 .elementor-icon-box-wrapper{text-align:center;}.elementor-5278 .elementor-element.elementor-element-74969ba .elementor-icon-box-wrapper{text-align:center;}.elementor-5278 .elementor-element.elementor-element-0f092a6 .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-055b3a2{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-25e6654{--grid-columns:1;}.elementor-5278 .elementor-element.elementor-element-7cad92c{--grid-columns:1;}.elementor-5278 .elementor-element.elementor-element-acb6655{--grid-columns:1;}.elementor-5278 .elementor-element.elementor-element-d3d67a2 .elementor-image-box-img{margin-bottom:15px;}.elementor-5278 .elementor-element.elementor-element-225db86 .elementor-image-box-img{margin-bottom:15px;}.elementor-5278 .elementor-element.elementor-element-389e477 .elementor-image-box-img{margin-bottom:15px;}.elementor-5278 .elementor-element.elementor-element-7b34d85 .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-aaaacbb{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-2fb10c3 .elementor-icon-box-wrapper{text-align:start;}.elementor-5278 .elementor-element.elementor-element-b1b79ac .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-38418e0{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-6e8e71d .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-680eb5d{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-07ac1ff.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-5278 .elementor-element.elementor-element-aa6c7aa{margin:-35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5278 .elementor-element.elementor-element-add57e1 .elementor-heading-title{font-size:45px;}.elementor-5278 .elementor-element.elementor-element-d9cc0e4{font-size:15px;}.elementor-5278 .elementor-element.elementor-element-1159440{--min-height:170px;--border-radius:20px 20px 0px 0px;}.elementor-5278 .elementor-element.elementor-element-baa9735{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:0px 00px 20px 20px;}.elementor-5278 .elementor-element.elementor-element-b151d2c{width:var( --container-widget-width, 275.5px );max-width:275.5px;--container-widget-width:275.5px;--container-widget-flex-grow:0;}.elementor-5278 .elementor-element.elementor-element-b151d2c .elementor-heading-title{font-size:40px;}.elementor-5278 .elementor-element.elementor-element-a82ae93{font-size:14px;}.elementor-5278 .elementor-element.elementor-element-7fe335e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5278 .elementor-element.elementor-element-7fe335e .elementor-icon-list-item > a{font-size:14px;}.elementor-5278 .elementor-element.elementor-element-3a8b1e4 .elementor-button{font-size:14px;}}/* Start custom CSS for container, class: .elementor-element-edf5282 *//* =====================================================================
OUR SIGNATURE TOUR – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, dan Loop Card.
Latar putih bersih + cahaya maroon tipis, watermark besar bergaris
tipis di bawah dengan tulisan sesuai judul section.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class yang harus dipasang (Advanced > CSS Classes):
Container (root) ........................ ars-st
├─ Container (header) ................... ars-st__head
│ ├─ Container (kiri) ................. ars-st__intro
│ │ └─ Heading ...................... ars-st__title
│ └─ Container (kanan) ................ ars-st__side
│ └─ Text Editor .................. ars-st__text
└─ Loop Grid ............................ ars-st__grid
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
kolom Loop Grid yang diatur dari panel menimpa CSS ini.
RINGAN : tanpa blur / filter / blend-mode. Animasi masuk hanya di
desktop dan hanya transform/opacity.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh:
Our Signature Tour
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282).e-con {
/* Warna */
--st-maroon: #74142A;
--st-maroon-light: #A32244;
--st-maroon-rgb: 116, 20, 42;
--st-white: #ffffff;
--st-ink: #2B1519;
--st-muted: rgba(43, 21, 25, .74);
/* Font */
--st-font-display: "El Messiri", Georgia, serif;
--st-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--st-max: 1240px; /* lebar isi */
--st-pad-x: 48px;
--st-pad-top: clamp(64px, 7vw, 108px);
--st-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--st-row-gap: clamp(36px, 4.5vw, 64px); /* jarak header ↔ kartu */
--st-col-gap: clamp(32px, 5vw, 84px); /* jarak judul ↔ teks */
/* Teks */
--st-title-size: clamp(34px, 4.2vw, 58px);
--st-text-size: 16px;
/* Watermark di bawah ("" = hilang) */
--st-watermark: "Our Signature Tour";
--st-watermark-size: clamp(64px, 11.5vw, 180px);
--st-wm-stroke: rgba(var(--st-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--st-reveal: 1; /* 0 = tanpa animasi */
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: var(--st-row-gap);
--row-gap: var(--st-row-gap);
--column-gap: var(--st-row-gap);
--padding-top: var(--st-pad-top);
--padding-bottom: var(--st-pad-bottom);
--padding-left: max(var(--st-pad-x), calc((100% - var(--st-max)) / 2));
--padding-right: max(var(--st-pad-x), calc((100% - var(--st-max)) / 2));
--content-width: min(100%, var(--st-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--st-font);
background-color: var(--st-white);
/* cahaya maroon sangat tipis (latar tetap putih) */
background-image:
radial-gradient(ellipse 50% 40% at 0% 0%, rgba(var(--st-maroon-rgb), .06), transparent 70%),
radial-gradient(ellipse 55% 45% at 100% 100%, rgba(var(--st-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah (di belakang kartu) */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282).e-con::after {
content: var(--st-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--st-font-display);
font-size: var(--st-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--st-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__head.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.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;
}
/* HEADER: judul kiri | teks kanan */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__head.e-con {
--gap: var(--st-col-gap);
--row-gap: 24px;
--column-gap: var(--st-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
/* kolom kiri: judul dengan garis maroon vertikal */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__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(--st-maroon), rgba(var(--st-maroon-rgb), 0));
pointer-events: none;
}
/* kolom kanan: teks dengan garis tipis di kiri */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--st-maroon-rgb), .4), rgba(var(--st-maroon-rgb), .05));
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. JUDUL (Heading) & TEKS (Text Editor)
Tanpa !important, jadi pengaturan panel tetap menang.
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__title.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__text.elementor-widget {
width: 100%;
margin-block-end: 0;
}
.elementor-5278 .elementor-element.elementor-element-edf5282 .ars-st__title .elementor-heading-title {
margin: 0;
font-family: var(--st-font-display);
font-size: var(--st-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--st-ink);
text-wrap: balance;
}
/* kata di // = maroon + stabilo tipis */
.elementor-5278 .elementor-element.elementor-element-edf5282 .ars-st__title .elementor-heading-title :is(span, em, b, strong) {
font-style: normal;
font-weight: inherit;
color: var(--st-maroon);
background: linear-gradient(transparent 64%, rgba(var(--st-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.elementor-5278 .elementor-element.elementor-element-edf5282 .ars-st__text {
max-width: 560px;
font-family: var(--st-font);
font-size: var(--st-text-size);
line-height: 1.85;
color: var(--st-muted);
}
.elementor-5278 .elementor-element.elementor-element-edf5282 .ars-st__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.elementor-5278 .elementor-element.elementor-element-edf5282 .ars-st__text p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
4. LOOP GRID
Kolom & jarak tetap diatur dari panel (variabel --grid-*-gap dipakai).
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid.elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .elementor-loop-container {
row-gap: var(--grid-row-gap, 32px);
column-gap: var(--grid-column-gap, 28px);
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .e-loop-item {
min-width: 0;
}
/* ---------------------------------------------------------------------
5. ANIMASI MASUK – hanya DESKTOP (≥1025px), tanpa "kurangi gerakan"
Pakai property translate/opacity, tidak bentrok dengan hover kartu.
--------------------------------------------------------------------- */
@keyframes arsStIn {
from { opacity: calc(1 - var(--st-reveal)); translate: 0 calc(34px * var(--st-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .e-loop-item {
animation: arsStIn linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con { animation-range: entry 6% cover 28%; }
/* kartu muncul bergantian per kolom */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .e-loop-item:nth-child(3n+1) { animation-range: entry 4% cover 26%; }
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .e-loop-item:nth-child(3n+2) { animation-range: entry 9% cover 31%; }
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .e-loop-item:nth-child(3n) { animation-range: entry 14% cover 36%; }
}
}
/* ---------------------------------------------------------------------
6. TABLET (≤ 1024px)
Judul penuh → teks di bawahnya → kartu
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-edf5282).e-con {
--st-pad-x: 32px;
--st-col-gap: 24px;
--st-row-gap: 40px;
--st-watermark-size: clamp(64px, 14vw, 130px);
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con {
--padding-left: 30px;
}
/* garis kanan dihilangkan, teks mengikuti garis judul di kiri */
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con::before {
display: none;
}
.elementor-5278 .elementor-element.elementor-element-edf5282 .ars-st__text {
max-width: none;
}
}
/* ---------------------------------------------------------------------
7. MOBILE (≤ 767px)
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-edf5282).e-con {
--st-pad-x: 20px;
--st-pad-top: 56px;
--st-pad-bottom: 84px;
--st-row-gap: 32px;
--st-col-gap: 16px;
--st-title-size: clamp(30px, 8.6vw, 40px);
--st-text-size: 15px;
--st-watermark-size: 21vw;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con {
--padding-left: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__intro.e-con::after {
width: 4px;
}
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .elementor-loop-container {
row-gap: var(--grid-row-gap, 24px);
}
}
/* ---------------------------------------------------------------------
8. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-edf5282) .ars-st__grid .e-loop-item {
animation: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87c5d84 *//* =====================================================================
TOP PLACES (HOTSPOT MAP) – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Why Choose Us, Tour Package, Loop Card.
Latar putih + cahaya maroon tipis, watermark bergaris tipis kiri bawah.
Layout desktop:
[ Judul (kiri) | Teks (kanan) ]
[ Peta + kartu tempat (widget HTML), berbingkai maroon ]
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class yang harus dipasang (Advanced > CSS Classes):
Container (root) ........................ ars-hs
├─ Container (header) ................... ars-hs__head
│ ├─ Container (kiri) ................. ars-hs__intro
│ │ └─ Heading ...................... ars-hs__title
│ └─ Container (kanan) ................ ars-hs__side
│ └─ Text Editor .................. ars-hs__text
└─ Container (peta) ..................... ars-hs__map
└─ HTML (widget peta) ............... ars-hs__html (opsional)
UKURAN TEKS (sesuai permintaan):
Heading : desktop 55px · tablet 50px · mobile 45px
Deskripsi : desktop 16px · mobile 15px
Ubah di bagian 1 (--hs-title-size / --hs-text-size) bila perlu.
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
border, radius yang diatur dari panel menimpa CSS ini (tidak ada
!important pada heading/teks).
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, hover hanya di perangkat mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh: Top Places You Must Visit
TINGGI : tinggi peta di desktop dihitung dari tinggi layar oleh widget
HTML. Jika terasa terlalu tinggi karena heading di atasnya,
naikkan settings.topOffset atau kecilkan settings.maxHeight
di config bagian atas kode HTML.
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84).e-con {
/* Warna */
--hs-maroon: #74142A;
--hs-maroon-dark: #4A0C1B;
--hs-maroon-light: #A32244;
--hs-maroon-rgb: 116, 20, 42;
--hs-white: #ffffff;
--hs-tint: #FBF3F5;
--hs-ink: #2B1519;
--hs-muted: rgba(43, 21, 25, .74);
--hs-line: rgba(var(--hs-maroon-rgb), .16);
/* Font */
--hs-font-display: "El Messiri", Georgia, serif;
--hs-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--hs-max: 1240px;
--hs-pad-x: 48px;
--hs-pad-top: clamp(64px, 7vw, 108px);
--hs-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--hs-row-gap: clamp(40px, 5vw, 72px); /* header ↔ peta */
--hs-col-gap: clamp(32px, 5vw, 84px); /* judul ↔ teks */
/* Teks */
--hs-title-size: 55px; /* heading desktop */
--hs-text-size: 16px; /* deskripsi desktop */
/* Bingkai & hiasan peta */
--hs-frame-radius: 30px; /* ikut lengkung peta (22px) + jarak */
--hs-frame-offset: 14px; /* jarak bingkai dari peta */
--hs-frame: 1; /* 1 = tampil, 0 = sembunyi */
--hs-dots: 1; /* titik hiasan kanan atas: 1 / 0 */
/* Watermark ("" = hilang) */
--hs-watermark: "Top Places";
--hs-watermark-size: clamp(72px, 13vw, 210px);
--hs-wm-stroke: rgba(var(--hs-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--hs-reveal: 1; /* 0 = tanpa animasi */
--hs-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(--hs-row-gap);
--row-gap: var(--hs-row-gap);
--column-gap: var(--hs-row-gap);
--padding-top: var(--hs-pad-top);
--padding-bottom: var(--hs-pad-bottom);
--padding-left: max(var(--hs-pad-x), calc((100% - var(--hs-max)) / 2));
--padding-right: max(var(--hs-pad-x), calc((100% - var(--hs-max)) / 2));
--content-width: min(100%, var(--hs-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--hs-font);
background-color: var(--hs-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--hs-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--hs-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84).e-con::after {
content: var(--hs-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--hs-font-display);
font-size: var(--hs-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--hs-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__head.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.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;
}
/* HEADER: judul kiri | teks kanan */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__head.e-con {
--gap: var(--hs-col-gap);
--row-gap: 24px;
--column-gap: var(--hs-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__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(--hs-maroon), rgba(var(--hs-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--hs-maroon-rgb), .4), rgba(var(--hs-maroon-rgb), .05));
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. JUDUL & TEKS
Semua pakai :where() => pengaturan panel Elementor tetap menang.
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__title.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__text.elementor-widget {
width: 100%;
margin-block-end: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__title.elementor-widget .elementor-heading-title {
margin: 0;
font-family: var(--hs-font-display);
font-size: var(--hs-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--hs-ink);
text-wrap: balance;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__title.elementor-widget .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--hs-maroon);
background: linear-gradient(transparent 64%, rgba(var(--hs-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__text.elementor-widget {
max-width: 560px;
font-family: var(--hs-font);
font-size: var(--hs-text-size);
line-height: 1.85;
color: var(--hs-muted);
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__text.elementor-widget p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__text.elementor-widget p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
4. PETA (container pembungkus widget HTML)
Bingkai garis maroon bergeser di belakang peta + titik hiasan.
Peta & kartu itu sendiri di-style oleh kode HTML-nya.
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con {
--flex-direction: column;
--align-items: stretch;
--gap: 0px;
--row-gap: 0px;
}
/* widget HTML & isinya selalu lebar penuh, di atas bingkai */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con > .elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__html.elementor-widget {
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map .elementor-widget-container {
width: 100%;
min-width: 0;
}
/* bingkai garis mengikuti lengkung peta */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con::before {
content: "";
position: absolute;
inset: calc(var(--hs-frame-offset) * -1) var(--hs-frame-offset) var(--hs-frame-offset) calc(var(--hs-frame-offset) * -1);
z-index: 0;
width: auto;
height: auto;
border: 1.5px solid rgba(var(--hs-maroon-rgb), .34);
border-radius: var(--hs-frame-radius);
opacity: var(--hs-frame);
mix-blend-mode: normal;
transition: transform .6s var(--hs-ease);
pointer-events: none;
}
/* titik dekoratif kanan atas */
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con::after {
content: "";
position: absolute;
inset: -26px -22px auto auto;
z-index: 0;
width: 92px;
height: 92px;
border: 0;
opacity: var(--hs-dots);
background-image: radial-gradient(rgba(var(--hs-maroon-rgb), .38) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
/* ---------------------------------------------------------------------
5. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con:hover::before {
transform: translate(-6px, 6px);
}
}
/* ---------------------------------------------------------------------
6. ANIMASI MASUK – DESKTOP saja (translate + opacity)
--------------------------------------------------------------------- */
@keyframes arsHsUp {
from { opacity: calc(1 - var(--hs-reveal)); translate: 0 calc(34px * var(--hs-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con {
animation: arsHsUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con { animation-range: entry 0% cover 16%; }
}
}
/* ---------------------------------------------------------------------
7. TABLET (≤ 1024px)
Judul → teks → peta (satu kolom)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84).e-con {
--hs-pad-x: 32px;
--hs-col-gap: 24px;
--hs-row-gap: 44px;
--hs-title-size: 50px;
--hs-watermark-size: clamp(72px, 16vw, 150px);
--hs-frame-offset: 12px;
--hs-frame-radius: 28px;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con {
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con::before {
display: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__text.elementor-widget {
max-width: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con::after {
right: -10px;
}
}
/* ---------------------------------------------------------------------
8. MOBILE (≤ 767px)
Heading 45px, deskripsi 15px, bingkai lebih tipis, tanpa titik hiasan
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84).e-con {
--hs-pad-x: 20px;
--hs-pad-top: 56px;
--hs-pad-bottom: 84px;
--hs-row-gap: 32px;
--hs-col-gap: 16px;
--hs-title-size: 45px;
--hs-text-size: 15px;
--hs-watermark-size: 22vw;
--hs-frame-offset: 9px;
--hs-frame-radius: 24px;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__side.e-con {
--padding-left: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__intro.e-con::after {
width: 4px;
}
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84) .ars-hs__map.e-con::after {
display: none;
}
}
/* ---------------------------------------------------------------------
9. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-87c5d84).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-51669ee *//* =====================================================================
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-5278 .elementor-element.elementor-element-51669ee 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-5278 .elementor-element.elementor-element-51669ee).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-5278 .elementor-element.elementor-element-51669ee).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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__top.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__bottom.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__content.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__top.e-con {
--gap: var(--ab-col-gap);
--row-gap: 32px;
--column-gap: var(--ab-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__top.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__bottom.e-con {
--gap: var(--ab-col-gap);
--row-gap: 56px;
--column-gap: var(--ab-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__bottom.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con {
--gap: 20px;
--row-gap: 20px;
--column-gap: 20px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con {
--flex-direction: column;
--align-items: stretch;
--gap: 0px;
--row-gap: 0px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__content.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--gap: 30px;
--row-gap: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stats.e-con {
--gap: 16px;
--row-gap: 16px;
--column-gap: 16px;
counter-reset: abstat;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stats.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__eyebrow.elementor-widget {
width: 100%;
margin-block-end: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__eyebrow.elementor-widget-text-editor p::before {
content: "";
flex: none;
width: 36px;
height: 1.5px;
background: currentColor;
opacity: .55;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__eyebrow.elementor-widget-text-editor p::after {
content: "";
flex: none;
width: 6px;
height: 6px;
background: currentColor;
transform: rotate(45deg);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb--1.elementor-widget { border-radius: var(--ab-shape-thumb-1); }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb--2.elementor-widget { border-radius: var(--ab-shape-thumb-2); margin-top: 34px; }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb .elementor-widget-container,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb a,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb.elementor-widget::before,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main.elementor-widget::before,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb--1.elementor-widget::after,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb--1.elementor-widget::after { content: var(--ab-tag-1); }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main .elementor-widget-container,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main a,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main figure,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__float .elementor-widget-container,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__float a,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__float figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main img,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__text.elementor-widget {
width: 100%;
max-width: 620px;
margin-block-end: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__text.elementor-widget-text-editor p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat.elementor-widget:nth-child(2) { margin-top: 22px; }
}
/* garis maroon di atas kartu */
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-widget-container {
height: 100%;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon-box-wrapper {
height: 100%;
padding: 30px 18px 26px;
text-align: center;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon-box-icon .elementor-icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon i {
line-height: 1;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon-box-title span,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon-box-title a {
color: inherit;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb:hover img { transform: scale(1.08); }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual:hover .ars-ab__main img { transform: scale(1.05); }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual:hover .ars-ab__float img { transform: scale(1.08); }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual:hover::before { transform: translate(-6px, 6px); }
/* kilau lewat sekali */
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb:hover::before,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main:hover::before,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__float:hover::before {
transform: translateX(130%);
transition: transform .9s var(--ab-ease);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat.elementor-widget:hover::before {
transform: scaleX(1);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__content.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat.elementor-widget {
animation: arsAbIn linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__content.e-con { animation-range: entry 8% cover 30%; }
/* kartu muncul bergantian */
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat.elementor-widget:nth-child(1) { animation-range: entry 10% cover 34%; }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat.elementor-widget:nth-child(2) { animation-range: entry 16% cover 40%; }
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat.elementor-widget:nth-child(3) { animation-range: entry 22% cover 46%; }
}
}
/* ---------------------------------------------------------------------
10. TABLET (≤ 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-51669ee).e-con {
--ab-pad-x: 32px;
--ab-col-gap: 40px;
--ab-row-gap: 52px;
--ab-watermark-size: clamp(72px, 16vw, 150px);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__top.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__top.e-con-boxed > .e-con-inner,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__bottom.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__bottom.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__top.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__bottom.e-con {
--row-gap: 44px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con {
max-width: 560px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con {
max-width: 680px;
margin-inline: auto;
margin-bottom: 24px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__float.elementor-widget {
right: -3%;
bottom: -8%;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con::before {
inset: -12px 12px 12px -12px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con::after {
right: -10px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .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-5278 .elementor-element.elementor-element-51669ee).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-5278 .elementor-element.elementor-element-51669ee) .ars-ab__top.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__bottom.e-con {
--row-gap: 36px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__intro.e-con {
--padding-left: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__intro.e-con::after {
width: 4px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__gallery.e-con {
--gap: 12px;
--row-gap: 12px;
--column-gap: 12px;
max-width: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb.elementor-widget {
border-width: 4px;
aspect-ratio: 4 / 4.6;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb--2.elementor-widget {
margin-top: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb--1.elementor-widget::after,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__thumb--2.elementor-widget::after {
bottom: 10px;
padding: 7px 11px;
font-size: 9px;
letter-spacing: .1em;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__float.elementor-widget {
border-width: 5px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__main.elementor-widget {
aspect-ratio: 4 / 3.7;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__float.elementor-widget {
right: -2%;
bottom: -7%;
width: 44%;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con {
margin-bottom: 18px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con::before {
inset: -10px 10px 10px -10px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__visual.e-con::after {
display: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__content.e-con {
--gap: 24px;
--row-gap: 24px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stats.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stats.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stats.e-con {
--gap: 12px;
--row-gap: 12px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon-box-wrapper {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 18px;
text-align: left;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon-box-icon {
flex: none;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat .elementor-icon-box-icon .elementor-icon {
width: 50px;
height: 50px;
font-size: 21px;
}
:where(.elementor-5278 .elementor-element.elementor-element-51669ee) .ars-ab__stat.elementor-widget::after {
font-size: 28px;
}
}
/* ---------------------------------------------------------------------
12. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-51669ee).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-51669ee).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe6ece6 *//* =====================================================================
TOUR PACKAGE (TABS) – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Why Choose Us, Signature Tour, Loop Card.
Latar putih + cahaya maroon tipis, watermark bergaris tipis kiri bawah.
Layout desktop:
[ Judul (kiri) | Teks (kanan) ]
[ TAB BERBENTUK KOTAK (border maroon) ]
[ Loop Grid (isi tab aktif) ]
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class yang harus dipasang (Advanced > CSS Classes):
Container (root) ........................ ars-tp
├─ Container (header) ................... ars-tp__head
│ ├─ Container (kiri) ................. ars-tp__intro
│ │ └─ Heading ...................... ars-tp__title
│ └─ Container (kanan) ................ ars-tp__side
│ └─ Text Editor .................. ars-tp__text
└─ Tabs (widget) ........................ ars-tp__tabs
├─ Tab #1 (container isi) ........... (class opsional: ars-tp__panel)
│ └─ Loop Grid
├─ Tab #2 ... Loop Grid
└─ Tab #3 ... Loop Grid
PENTING DI PANEL ELEMENTOR (widget Tabs):
- Content > Tabs > "Breakpoint" = None / Tidak ada
(supaya di mobile tetap jadi tab horizontal yang bisa digeser,
bukan berubah menjadi accordion)
- Kosongkan warna / border / background tab di panel Style agar
tampilan dari CSS ini yang terlihat. Nilai dari panel tetap menang
bila diisi (tidak ada !important di style tab).
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
border, radius yang diatur dari panel menimpa CSS ini.
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, hover hanya di perangkat mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh: Tour Package
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6).e-con {
/* Warna */
--tp-maroon: #74142A;
--tp-maroon-dark: #4A0C1B;
--tp-maroon-light: #A32244;
--tp-maroon-rgb: 116, 20, 42;
--tp-white: #ffffff;
--tp-tint: #FBF3F5;
--tp-ink: #2B1519;
--tp-muted: rgba(43, 21, 25, .74);
--tp-line: rgba(var(--tp-maroon-rgb), .16);
/* Font */
--tp-font-display: "El Messiri", Georgia, serif;
--tp-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--tp-max: 1240px;
--tp-pad-x: 48px;
--tp-pad-top: clamp(64px, 7vw, 108px);
--tp-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--tp-row-gap: clamp(40px, 5vw, 72px);
--tp-col-gap: clamp(32px, 5vw, 84px);
/* Teks */
--tp-title-size: clamp(34px, 4.2vw, 58px);
--tp-text-size: 16px;
/* Tab */
--tp-tab-radius: 0px; /* 0 = kotak tegas, 6px = sedikit membulat */
--tp-tab-border: 1.5px;
--tp-tab-pad-y: 16px;
--tp-tab-pad-x: 30px;
--tp-tab-gap: 14px;
--tp-tab-numbers: 1; /* 1 = tampilkan 01/02/03, 0 = sembunyi */
--tp-swipe-text: "Geser untuk lihat paket lainnya"; /* "" = hilangkan teks petunjuk (mobile) */
/* Watermark ("" = hilang) */
--tp-watermark: "Tour Package";
--tp-watermark-size: clamp(72px, 13vw, 210px);
--tp-wm-stroke: rgba(var(--tp-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--tp-reveal: 1; /* 0 = tanpa animasi */
--tp-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(--tp-row-gap);
--row-gap: var(--tp-row-gap);
--column-gap: var(--tp-row-gap);
--padding-top: var(--tp-pad-top);
--padding-bottom: var(--tp-pad-bottom);
--padding-left: max(var(--tp-pad-x), calc((100% - var(--tp-max)) / 2));
--padding-right: max(var(--tp-pad-x), calc((100% - var(--tp-max)) / 2));
--content-width: min(100%, var(--tp-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--tp-font);
background-color: var(--tp-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--tp-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--tp-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6).e-con::after {
content: var(--tp-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--tp-font-display);
font-size: var(--tp-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--tp-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__head.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.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;
}
/* HEADER: judul kiri | teks kanan */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__head.e-con {
--gap: var(--tp-col-gap);
--row-gap: 24px;
--column-gap: var(--tp-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__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(--tp-maroon), rgba(var(--tp-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--tp-maroon-rgb), .4), rgba(var(--tp-maroon-rgb), .05));
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. JUDUL & TEKS
Semua pakai :where() => pengaturan panel Elementor tetap menang.
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__title.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__text.elementor-widget {
width: 100%;
margin-block-end: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__title.elementor-widget .elementor-heading-title {
margin: 0;
font-family: var(--tp-font-display);
font-size: var(--tp-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--tp-ink);
text-wrap: balance;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__title.elementor-widget .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--tp-maroon);
background: linear-gradient(transparent 64%, rgba(var(--tp-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__text.elementor-widget {
max-width: 560px;
font-family: var(--tp-font);
font-size: var(--tp-text-size);
line-height: 1.85;
color: var(--tp-muted);
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__text.elementor-widget p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__text.elementor-widget p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
4. TABS – wadah
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs {
width: 100%;
gap: 0;
/* scope untuk indikator geser (mobile) */
timeline-scope: --tpScroll;
}
/* baris tab */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-heading {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: var(--tp-tab-gap);
order: 1;
width: 100%;
padding: 8px 8px 18px; /* ruang untuk bayangan & penanda */
counter-reset: tptab;
scroll-timeline: --tpScroll inline;
}
/* judul tab versi accordion (di dalam isi) tidak dipakai */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-content > .e-n-tab-title {
display: none;
}
/* isi tab */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-content {
order: 3;
width: 100%;
overflow: visible;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-content > .e-con {
--padding-top: 28px;
--padding-right: 0px;
--padding-bottom: 8px;
--padding-left: 0px;
width: 100%;
min-width: 0;
overflow: visible;
}
/* indikator & petunjuk geser: hanya muncul di mobile (bagian 9) */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs::before,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs::after {
display: none;
}
/* ---------------------------------------------------------------------
5. TABS – tombol tab (kotak, hanya border maroon)
Normal : putih, border maroon tipis, nomor kecil di depan teks
Hover : isi maroon menyapu dari kiri, tombol naik + bayangan keras
Aktif : isi maroon penuh, bayangan keras, penanda berlian di bawah
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 0 1 auto;
min-width: 0;
margin: 0;
padding: var(--tp-tab-pad-y) var(--tp-tab-pad-x);
counter-increment: tptab;
font-family: var(--tp-font);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
color: var(--tp-maroon);
background-color: var(--tp-white);
background-image: none;
border: var(--tp-tab-border) solid rgba(var(--tp-maroon-rgb), .5);
border-radius: var(--tp-tab-radius);
box-shadow: 0 0 0 0 rgba(var(--tp-maroon-rgb), 0);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
transform .4s var(--tp-ease),
box-shadow .4s var(--tp-ease),
color .3s ease,
border-color .3s ease;
}
/* isi maroon yang menyapu (transform saja) */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, var(--tp-maroon-light), var(--tp-maroon-dark));
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s var(--tp-ease);
pointer-events: none;
}
/* penanda berlian di bawah tab aktif */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title::after {
content: "";
position: absolute;
left: 50%;
bottom: -7px;
z-index: 2;
width: 11px;
height: 11px;
background: var(--tp-maroon);
transform: translateX(-50%) rotate(45deg) scale(0);
transition: transform .4s var(--tp-ease);
pointer-events: none;
}
/* isi tab di atas lapisan sapuan */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title > * {
position: relative;
z-index: 1;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title-text {
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* nomor 01 / 02 / 03 (ubah --tp-tab-numbers jadi 0 untuk sembunyi) */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title-text::before {
content: counter(tptab, decimal-leading-zero);
display: inline-block;
margin-right: 12px;
padding-right: 12px;
font-family: var(--tp-font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
border-right: 1px solid currentColor;
opacity: calc(.6 * var(--tp-tab-numbers));
/* sembunyi total bila 0 */
width: calc(var(--tp-tab-numbers) * 1.4em);
padding-right: calc(var(--tp-tab-numbers) * 12px);
margin-right: calc(var(--tp-tab-numbers) * 12px);
overflow: hidden;
vertical-align: baseline;
border-right-width: calc(var(--tp-tab-numbers) * 1px);
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-icon,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-icon i,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-icon svg {
color: inherit;
fill: currentColor;
}
/* AKTIF */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"],
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active {
color: var(--tp-white);
background-color: var(--tp-maroon);
border-color: var(--tp-maroon);
box-shadow: 6px 6px 0 0 rgba(var(--tp-maroon-rgb), .22);
transform: translate(-2px, -2px);
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"]::before,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active::before {
transform: scaleX(1);
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"]::after,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active::after {
transform: translateX(-50%) rotate(45deg) scale(1);
}
/* fokus keyboard */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title:focus-visible {
outline: 2px solid var(--tp-maroon-light);
outline-offset: 4px;
}
/* tekan (sentuh / klik) */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title:active {
transform: translate(0, 0);
box-shadow: 0 0 0 0 rgba(var(--tp-maroon-rgb), 0);
}
/* ---------------------------------------------------------------------
6. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title:hover {
color: var(--tp-white);
border-color: var(--tp-maroon);
box-shadow: 5px 5px 0 0 rgba(var(--tp-maroon-rgb), .85);
transform: translate(-3px, -3px);
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title:hover::before {
transform: scaleX(1);
}
/* tab aktif yang di-hover: bayangan lebih tegas */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"]:hover,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active:hover {
box-shadow: 7px 7px 0 0 rgba(var(--tp-maroon-rgb), .32);
transform: translate(-3px, -3px);
}
}
/* ---------------------------------------------------------------------
7. ANIMASI
a) Isi tab muncul halus setiap kali tab diganti
b) Masuk saat scroll – DESKTOP saja
--------------------------------------------------------------------- */
@keyframes arsTpPanel {
from { opacity: 0; translate: 0 18px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsTpUp {
from { opacity: calc(1 - var(--tp-reveal)); translate: 0 calc(34px * var(--tp-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsTpThumb {
from { background-position: 0% 0; }
to { background-position: 100% 0; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-content > .e-con {
animation: arsTpPanel .55s var(--tp-ease) both;
}
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget {
animation: arsTpUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget { animation-range: entry 4% cover 30%; }
}
}
/* ---------------------------------------------------------------------
8. TABLET (≤ 1024px)
Judul → teks, tab rata tengah boleh turun baris
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6).e-con {
--tp-pad-x: 32px;
--tp-col-gap: 24px;
--tp-row-gap: 44px;
--tp-watermark-size: clamp(72px, 16vw, 150px);
--tp-tab-pad-y: 14px;
--tp-tab-pad-x: 24px;
--tp-tab-gap: 12px;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.e-con {
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.e-con::before {
display: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__text.elementor-widget {
max-width: none;
}
}
/* ---------------------------------------------------------------------
9. MOBILE (≤ 767px)
Tab 1 baris, bisa digeser ke samping sampai tepi layar, snap per tab,
indikator geser di bawahnya (mengikuti posisi scroll bila didukung
browser, bila tidak akan bergerak pelan sebagai petunjuk).
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6).e-con {
--tp-pad-x: 20px;
--tp-pad-top: 56px;
--tp-pad-bottom: 84px;
--tp-row-gap: 32px;
--tp-col-gap: 16px;
--tp-title-size: clamp(30px, 8.6vw, 40px);
--tp-text-size: 15px;
--tp-watermark-size: 22vw;
--tp-tab-pad-y: 15px;
--tp-tab-pad-x: 22px;
--tp-tab-gap: 12px;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__side.e-con {
--padding-left: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__intro.e-con::after {
width: 4px;
}
/* baris tab: 1 baris, geser samping, sampai tepi layar */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-heading {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
margin-inline: calc(var(--tp-pad-x) * -1);
width: calc(100% + var(--tp-pad-x) * 2);
padding: 8px var(--tp-pad-x) 18px;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--tp-pad-x);
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-heading::-webkit-scrollbar {
display: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title {
flex: 0 0 auto;
min-width: max(46vw, 190px);
scroll-snap-align: start;
font-size: 12.5px;
letter-spacing: .14em;
}
/* tidak ada efek hover-naik di sentuh; aktif cukup bayangan kecil */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"],
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active {
box-shadow: 5px 5px 0 0 rgba(var(--tp-maroon-rgb), .22);
transform: translate(-2px, -2px);
}
/* INDIKATOR GESER: garis + thumb maroon */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs::before {
content: "";
display: block;
order: 2;
height: 4px;
margin: 6px 2px 0;
border-radius: 999px;
background-color: rgba(var(--tp-maroon-rgb), .14);
background-image: linear-gradient(90deg, var(--tp-maroon-light), var(--tp-maroon));
background-repeat: no-repeat;
background-size: 34% 100%;
background-position: 0% 0;
/* cadangan: thumb bergerak pelan bolak-balik */
animation: arsTpThumb 2.6s ease-in-out infinite alternate;
}
/* teks petunjuk kecil di bawah indikator */
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs::after {
content: var(--tp-swipe-text);
display: block;
order: 2;
margin-top: 10px;
font-family: var(--tp-font);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .18em;
text-align: center;
text-transform: uppercase;
color: rgba(var(--tp-maroon-rgb), .6);
}
/* browser yang mendukung scroll-timeline: thumb mengikuti geseran */
@supports (animation-timeline: scroll()) {
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs::before {
animation: arsTpThumb linear both;
animation-timeline: --tpScroll;
}
}
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6) .ars-tp__tabs .e-n-tabs-content > .e-con {
--padding-top: 22px;
}
}
/* ---------------------------------------------------------------------
10. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-fe6ece6).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-80d784e *//* =====================================================================
ALUR / STEPS (3 LANGKAH + GARIS BERLIKU) – MAROON & PUTIH (v1.3 – foto tidak terpotong)
Serasi dengan Hero, About Us, Why Choose Us, Tour Package, Top Places, FAQ.
Latar putih + cahaya maroon tipis, watermark "How It Works" bergaris tipis,
judul El Messiri, teks DM Sans.
Desktop: 3 gambar berselang-seling tinggi-rendah, disambung garis
melengkung yang diselaraskan ke tengah gambar dan gap grid.
Tablet : sama, lebih rapat. [TIDAK BERUBAH]
Mobile : TIMELINE VERTIKAL (dipertahankan seperti sebelumnya). Kotak nomor 01 / 02 / 03 ada
di sisi kiri sebagai "titik", disambung REL GARIS UTUH yang
berjalan di samping gambar & teks. Garis tidak lagi terpotong
teks, karena rel-nya ada di kolom sendiri.
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-st
├─ Container (header) ................... ars-st__head
│ ├─ Container (kiri) ................. ars-st__intro
│ │ └─ Heading ...................... ars-st__title
│ └─ Container (kanan) ................ ars-st__side
│ └─ Text Editor .................. ars-st__text
└─ Container (baris langkah) ............ ars-st__steps
├─ Container (langkah 1) ............ ars-st__step
│ └─ Image Box .................... ars-st__box
├─ Container (langkah 2) ............ ars-st__step
│ └─ Image Box .................... ars-st__box
└─ Container (langkah 3) ............ ars-st__step
└─ Image Box .................... ars-st__box
NOMOR OTOMATIS: kotak "01 / 02 / 03" dan label "STEP 01" dibuat
otomatis. Anda tinggal mengisi gambar, judul, dan deskripsi di Image Box.
UKURAN TEKS: Heading desktop 55 · tablet 50 · mobile 45
Deskripsi desktop 16 · mobile 15
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, border,
radius yang diatur dari panel menimpa CSS ini. (Lihat bagian 10 untuk
warna bawaan template.)
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, hover hanya di perangkat mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh: From Booking To Bali Adventure
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con {
/* Warna */
--st-maroon: #74142A;
--st-maroon-dark: #4A0C1B;
--st-maroon-light: #A32244;
--st-maroon-rgb: 116, 20, 42;
--st-white: #ffffff;
--st-tint: #FBF3F5;
--st-ink: #2B1519;
--st-muted: rgba(43, 21, 25, .74);
--st-line: rgba(var(--st-maroon-rgb), .55); /* warna garis penghubung */
/* Font */
--st-font-display: "El Messiri", Georgia, serif;
--st-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--st-max: 1240px;
--st-pad-x: 48px;
--st-pad-top: clamp(64px, 7vw, 108px);
--st-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--st-row-gap: clamp(48px, 6vw, 88px); /* header ↔ langkah */
--st-col-gap: clamp(32px, 5vw, 84px); /* judul ↔ teks */
/* Teks */
--st-title-size: 55px; /* heading desktop */
--st-text-size: 16px; /* deskripsi desktop */
--st-card-title: 28px; /* judul tiap langkah */
--st-card-text: 15.5px; /* deskripsi tiap langkah */
/* Langkah & garis ular */
--st-gap: 120px; /* jarak kolom/baris dan garis penghubung */
--st-drop: 72px; /* selisih tinggi gambar 1→2→3 */
--st-ratio: 4 / 3; /* bentuk kotak foto. Samakan dengan rasio file foto Anda (mis. 1 / 1, 5 / 4, 3 / 2) agar tanpa ruang kosong */
--st-fit: contain; /* contain = foto TAMPIL UTUH (tidak terpotong) · cover = memenuhi kotak tapi tepinya terpotong */
--st-radius: 30px; /* lengkung gambar */
--st-dash: 1; /* 1 = garis tampil, 0 = garis sembunyi */
--st-frame: 1; /* bingkai garis di belakang gambar: 1 / 0 */
--st-badge: 1; /* kotak nomor: 1 / 0 */
--st-dots: 1; /* titik hiasan kanan atas: 1 / 0 */
/* Timeline mobile */
--st-node: 44px; /* ukuran kotak nomor di mobile */
--st-rail: 2px; /* tebal garis rel di mobile */
/* Watermark ("" = hilang) */
--st-watermark: "How It Works";
--st-watermark-size: clamp(72px, 13vw, 210px);
--st-wm-stroke: rgba(var(--st-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--st-reveal: 1; /* 0 = tanpa animasi */
--st-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(--st-row-gap);
--row-gap: var(--st-row-gap);
--column-gap: var(--st-row-gap);
--padding-top: var(--st-pad-top);
--padding-bottom: var(--st-pad-bottom);
--padding-left: max(var(--st-pad-x), calc((100% - var(--st-max)) / 2));
--padding-right: max(var(--st-pad-x), calc((100% - var(--st-max)) / 2));
--content-width: min(100%, var(--st-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--st-font);
background-color: var(--st-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--st-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--st-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con::after {
content: var(--st-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--st-font-display);
font-size: var(--st-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--st-wm-stroke);
pointer-events: none;
user-select: none;
}
/* titik dekoratif kanan atas */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con::before {
content: "";
position: absolute;
inset: 34px 34px auto auto;
z-index: 0;
width: 110px;
height: 110px;
opacity: var(--st-dots);
background-image: radial-gradient(rgba(var(--st-maroon-rgb), .34) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__head.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__steps.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.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;
}
/* HEADER: judul kiri | teks kanan */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__head.e-con {
--gap: var(--st-col-gap);
--row-gap: 24px;
--column-gap: var(--st-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__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(--st-maroon), rgba(var(--st-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--st-maroon-rgb), .4), rgba(var(--st-maroon-rgb), .05));
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. JUDUL & TEKS HEADER
Specificity (0,3,0): mengalahkan bawaan Elementor, kalah dari panel.
--------------------------------------------------------------------- */
.ars-st .ars-st__title .elementor-heading-title {
margin: 0;
font-family: var(--st-font-display);
font-size: var(--st-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--st-ink);
text-wrap: balance;
}
.ars-st .ars-st__title .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--st-maroon);
background: linear-gradient(transparent 64%, rgba(var(--st-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.ars-st .ars-st__text {
max-width: 560px;
font-family: var(--st-font);
font-size: var(--st-text-size);
line-height: 1.85;
color: var(--st-muted);
}
.ars-st .ars-st__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.ars-st .ars-st__text p:last-child { margin-bottom: 0; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__intro .elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side .elementor-widget { margin-block-end: 0; }
/* ---------------------------------------------------------------------
4. BARIS LANGKAH – 3 kolom, kartu 2 lebih rendah (berselang-seling)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__steps.e-con {
--gap: var(--st-gap);
--row-gap: var(--st-gap);
--column-gap: var(--st-gap);
counter-reset: arsSt;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__steps.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__steps.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: var(--st-gap) !important;
row-gap: var(--st-gap) !important;
column-gap: var(--st-gap) !important;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con {
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: 0px;
--row-gap: 0px;
counter-increment: arsSt;
transition: transform .5s var(--st-ease);
}
/* kartu tengah turun, kartu 1 & 3 sejajar */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(2) { margin-top: var(--st-drop); }
/* bingkai garis: kartu ganjil bergeser ke kiri-atas, genap ke kanan-bawah */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(odd) { --st-fx: -12px; --st-fy: -12px; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(even) { --st-fx: 12px; --st-fy: 12px; }
/* KOTAK NOMOR di pojok kiri atas gambar (otomatis 01, 02, 03) */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con::before {
content: counter(arsSt, decimal-leading-zero);
position: absolute;
inset: 16px auto auto 16px;
z-index: 3;
width: 52px;
height: 52px;
display: grid;
place-items: center;
font-family: var(--st-font-display);
font-size: 22px;
font-weight: 600;
line-height: 1;
letter-spacing: .02em;
color: #fff;
background: var(--st-maroon);
box-shadow: 5px 5px 0 rgba(255, 255, 255, .55);
opacity: var(--st-badge);
transition: background-color .3s ease;
pointer-events: none;
}
/* ---------------------------------------------------------------------
5. IMAGE BOX – gambar berlengkung + bingkai + garis ular + teks
Semua di figure gambar (.elementor-image-box-img) sebagai acuan posisi.
--------------------------------------------------------------------- */
.ars-st .ars-st__box.elementor-widget {
width: 100%;
margin: 0;
}
.ars-st .ars-st__box.elementor-widget .elementor-image-box-wrapper {
display: block;
text-align: left;
}
/* figure = acuan posisi bingkai & garis */
.ars-st .ars-st__box.elementor-widget .elementor-image-box-img {
position: relative;
isolation: isolate;
display: block;
width: 100%;
margin: 0 0 26px;
}
.ars-st .ars-st__box.elementor-widget .elementor-image-box-img img {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: var(--st-ratio);
object-fit: var(--st-fit, contain);
background-color: var(--st-white);
border-radius: var(--st-radius);
box-shadow: 0 26px 40px -24px rgba(var(--st-maroon-rgb), .5);
}
/* bingkai garis tipis di belakang gambar */
.ars-st .ars-st__box.elementor-widget .elementor-image-box-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border: 1.5px solid rgba(var(--st-maroon-rgb), .36);
border-radius: calc(var(--st-radius) + 4px);
opacity: var(--st-frame);
transform: translate(var(--st-fx, -12px), var(--st-fy, -12px));
transition: transform .55s var(--st-ease);
pointer-events: none;
}
/* GARIS BERLIKU UTUH (ular): dari gambar ke gambar berikutnya.
Dibuat dengan mask SVG supaya warna mengikuti --st-line. */
.ars-st .ars-st__step:nth-child(-n+2) .elementor-image-box-img::after {
content: "";
position: absolute;
z-index: 0;
left: calc(100% - 24px);
width: calc(var(--st-gap) * 2 + 64px);
height: var(--st-drop);
opacity: var(--st-dash);
background-color: var(--st-line);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2C100 2 100 98 200 98' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2C100 2 100 98 200 98' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
pointer-events: none;
}
/* 1 → 2 : turun */
.ars-st .ars-st__step:nth-child(1) .elementor-image-box-img::after { top: 50%; }
/* 2 → 3 : naik (cermin vertikal) */
.ars-st .ars-st__step:nth-child(2) .elementor-image-box-img::after {
bottom: 50%;
transform: scaleY(-1);
}
/* ---- teks langkah ---- */
.ars-st .ars-st__box.elementor-widget .elementor-image-box-content { width: 100%; }
/* label "STEP 01" otomatis di atas judul */
.ars-st .ars-st__box.elementor-widget .elementor-image-box-title::before {
content: "STEP " counter(arsSt, decimal-leading-zero);
display: block;
margin-bottom: 10px;
font-family: var(--st-font);
font-size: 12.5px;
font-weight: 700;
line-height: 1;
letter-spacing: .24em;
color: var(--st-maroon);
}
.ars-st .ars-st__box.elementor-widget .elementor-image-box-title {
margin: 0 0 10px;
font-family: var(--st-font-display);
font-size: var(--st-card-title);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.005em;
color: var(--st-ink);
}
.ars-st .ars-st__box.elementor-widget .elementor-image-box-description {
margin: 0;
font-family: var(--st-font);
font-size: var(--st-card-text);
line-height: 1.8;
color: var(--st-muted);
}
/* ---------------------------------------------------------------------
6. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:hover { transform: translateY(-8px); }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:hover::before { background: var(--st-maroon-dark); }
.ars-st .ars-st__step:hover .elementor-image-box-img::before {
transform: translate(calc(var(--st-fx, -12px) * 1.6), calc(var(--st-fy, -12px) * 1.6));
}
}
/* ---------------------------------------------------------------------
7. ANIMASI MASUK – DESKTOP saja (translate + opacity)
--------------------------------------------------------------------- */
@keyframes arsStUp {
from { opacity: calc(1 - var(--st-reveal)); translate: 0 calc(36px * var(--st-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con {
animation: arsStUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(2) { animation-range: entry 8% cover 30%; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(3) { animation-range: entry 16% cover 36%; }
}
}
/* ---------------------------------------------------------------------
8. TABLET (≤ 1024px) – tetap 3 kolom, lebih rapat
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con {
--st-pad-x: 32px;
--st-col-gap: 24px;
--st-row-gap: 56px;
--st-title-size: 50px;
--st-watermark-size: clamp(72px, 16vw, 150px);
--st-gap: 64px;
--st-drop: 52px;
--st-radius: 24px;
--st-card-title: 23px;
--st-card-text: 15px;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con { --padding-left: 30px; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con::before { display: none; }
.ars-st .ars-st__text { max-width: none; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con::before {
inset: 12px auto auto 12px;
width: 42px;
height: 42px;
font-size: 18px;
}
.ars-st .ars-st__box.elementor-widget .elementor-image-box-img { margin-bottom: 20px; }
}
/* ---------------------------------------------------------------------
9. MOBILE (≤ 767px) – TIMELINE VERTIKAL
Kotak nomor 01/02/03 di kolom kiri sebagai titik, disambung rel garis
UTUH di sampingnya. Gambar & teks di kolom kanan.
Heading 45px, deskripsi 15px.
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con {
--st-pad-x: 20px;
--st-pad-top: 56px;
--st-pad-bottom: 84px;
--st-row-gap: 36px;
--st-col-gap: 16px;
--st-title-size: 45px;
--st-text-size: 15px;
--st-watermark-size: 20vw;
--st-gap: 54px; /* jarak antar langkah (panjang rel di sela langkah) */
--st-ratio: 4 / 3;
--st-radius: 20px;
--st-card-title: 24px;
--st-card-text: 15px;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con::before { display: none; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__side.e-con { --padding-left: 22px; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__intro.e-con::after { width: 4px; }
/* satu kolom */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__steps.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__steps.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
/* kolom kiri (titik + rel) selebar kotak nomor + jarak */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con {
--padding-left: calc(var(--st-node) + 16px);
transition: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(2) { margin-top: 0; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(odd) { --st-fx: -7px; --st-fy: -7px; }
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:nth-child(even) { --st-fx: 7px; --st-fy: 7px; }
/* garis ular horizontal (desktop) dimatikan */
.ars-st .ars-st__step .elementor-image-box-img::after { display: none; }
/* TITIK: kotak nomor sejajar tepi atas gambar, dengan cincin putih */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con::before {
inset: 0 auto auto 0;
width: var(--st-node);
height: var(--st-node);
font-size: 18px;
box-shadow: 0 0 0 5px var(--st-white), 0 0 0 6px rgba(var(--st-maroon-rgb), .22);
}
/* REL GARIS UTUH: dari bawah kotak nomor ini sampai atas kotak nomor
langkah berikutnya (menembus jarak antar langkah) */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con::after {
content: "";
position: absolute;
left: calc(var(--st-node) / 2 - var(--st-rail) / 2);
top: calc(var(--st-node) + 12px);
bottom: calc(12px - var(--st-gap));
z-index: 0;
width: var(--st-rail);
border-radius: 999px;
background: var(--st-line);
opacity: var(--st-dash);
pointer-events: none;
}
/* langkah terakhir: rel memudar ke bawah (tanda "selesai") */
:where(.elementor-5278 .elementor-element.elementor-element-80d784e) .ars-st__step.e-con:last-child::after {
bottom: auto;
height: 96px;
background: linear-gradient(180deg, var(--st-line), rgba(var(--st-maroon-rgb), 0));
}
.ars-st .ars-st__box.elementor-widget .elementor-image-box-img { margin-bottom: 18px; }
}
/* ---------------------------------------------------------------------
9A. PERBAIKAN GARIS DESKTOP (v1.2)
Area foto diseragamkan 4:3 agar titik tengahnya sama. Garis hanya
melewati gap antar-kartu, lalu ujungnya bertemu di tengah gambar.
Mobile tidak terkena aturan ini; timeline mobile tetap seperti semula.
--------------------------------------------------------------------- */
@media (min-width: 1025px) {
/* Tetapkan rasio pada wadah foto, bukan hanya pada img yang punya
rasio intrinsik berbeda-beda. Dengan begitu tinggi semua kartu sama. */
.ars-st .ars-st__box.elementor-widget .elementor-image-box-img {
position: relative;
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--st-ratio, 4 / 3);
overflow: visible;
}
/* Foto mengisi area 4:3 tanpa distorsi; kelebihan tepi di-crop rapi. */
.ars-st .ars-st__box.elementor-widget .elementor-image-box-img img {
position: absolute;
inset: 0;
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: var(--st-fit, contain);
object-position: center;
background-color: var(--st-white);
}
/* Panjangkan kurva agar menjangkau kartu berikutnya.
Bagian yang melewati tepi target tertutup oleh gambar di depannya. */
.ars-st .ars-st__step:nth-child(-n+2) .elementor-image-box-img::after {
left: calc(100% - 1px);
width: calc(var(--st-gap) * 2);
height: var(--st-drop);
}
/* Langkah 1 → 2: dari titik tengah kartu 1 ke titik tengah kartu 2. */
.ars-st .ars-st__step:nth-child(1) .elementor-image-box-img::after {
top: 50%;
bottom: auto;
transform: none;
}
/* Langkah 2 → 3: dari titik tengah kartu 2 ke titik tengah kartu 3. */
.ars-st .ars-st__step:nth-child(2) .elementor-image-box-img::after {
top: auto;
bottom: 50%;
transform: scaleY(-1);
}
}
/* ---------------------------------------------------------------------
10. PEMAKSA WARNA (HAPUS BAGIAN INI jika ingin warna diatur penuh dari panel)
Elemen mentah dari template Elementor membawa warna bawaan (heading
biru #6EC1E4, teks abu-abu) yang tersimpan di panel dan menimpa CSS di
atas. Bagian ini memaksa warna maroon/ink. Setelah warna bawaan di panel
(Style > Text Color) Anda kosongkan, bagian 10 boleh dihapus.
Font, ukuran, spasi tetap bisa diatur dari panel.
--------------------------------------------------------------------- */
.ars-st.ars-st.ars-st .ars-st__title .elementor-heading-title { color: var(--st-ink); }
.ars-st.ars-st.ars-st .ars-st__text { color: var(--st-muted); }
.ars-st.ars-st.ars-st .ars-st__box .elementor-image-box-title { color: var(--st-ink); }
.ars-st.ars-st.ars-st .ars-st__box .elementor-image-box-title::before { color: var(--st-maroon); }
.ars-st.ars-st.ars-st .ars-st__box .elementor-image-box-description { color: var(--st-muted); }
/* ---------------------------------------------------------------------
11. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-80d784e).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-738aeb9 *//* =====================================================================
WHY CHOOSE US – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Signature Tour, dan Loop Card.
Latar putih + cahaya maroon tipis, watermark bergaris tipis di
bawah (kiri) sesuai judul section.
Layout desktop:
[ Judul (kiri) | Teks (kanan) ]
[ 3 Icon Box | 2 Gambar | 3 Icon Box ]
Icon box kiri rata kanan (ikon di sisi dalam), icon box kanan rata
kiri. Item tengah sedikit menjauh dari gambar (melengkung).
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class yang harus dipasang (Advanced > CSS Classes):
Container (root) ........................ ars-wc
├─ Container (header) ................... ars-wc__head
│ ├─ Container (kiri) ................. ars-wc__intro
│ │ └─ Heading ...................... ars-wc__title
│ └─ Container (kanan) ................ ars-wc__side
│ └─ Text Editor .................. ars-wc__text
└─ Container (isi) ...................... ars-wc__body
├─ Container (kiri) ................. ars-wc__col ars-wc__col--left
│ ├─ Icon Box ..................... ars-wc__item
│ ├─ Icon Box ..................... ars-wc__item
│ └─ Icon Box ..................... ars-wc__item
├─ Container (tengah) ............... ars-wc__visual
│ ├─ Image ........................ ars-wc__img ars-wc__img--1
│ └─ Image ........................ ars-wc__img ars-wc__img--2
└─ Container (kanan) ................ ars-wc__col ars-wc__col--right
├─ Icon Box ..................... ars-wc__item
├─ Icon Box ..................... ars-wc__item
└─ Icon Box ..................... ars-wc__item
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
border, radius yang diatur dari panel menimpa CSS ini.
CATATAN: posisi ikon (kiri/kanan) & rata teks Icon Box diatur oleh
CSS ini agar layout kiri-kanan rapi, jadi pengaturan "Position" dan
"Alignment" di panel Icon Box tidak dipakai.
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, hover hanya di perangkat mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh: Why Choose Us
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9).e-con {
/* Warna */
--wc-maroon: #74142A;
--wc-maroon-dark: #4A0C1B;
--wc-maroon-light: #A32244;
--wc-maroon-rgb: 116, 20, 42;
--wc-white: #ffffff;
--wc-tint: #FBF3F5;
--wc-ink: #2B1519;
--wc-muted: rgba(43, 21, 25, .74);
--wc-line: rgba(var(--wc-maroon-rgb), .16);
/* Font */
--wc-font-display: "El Messiri", Georgia, serif;
--wc-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--wc-max: 1240px;
--wc-pad-x: 48px;
--wc-pad-top: clamp(64px, 7vw, 108px);
--wc-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--wc-row-gap: clamp(40px, 5vw, 72px); /* header ↔ isi */
--wc-col-gap: clamp(32px, 5vw, 84px); /* judul ↔ teks */
--wc-body-gap: clamp(28px, 4vw, 64px); /* kolom kiri | tengah | kanan */
--wc-radius-sm: 12px;
--wc-bulge: 44px; /* item tengah menjauh dari gambar */
/* Teks */
--wc-title-size: clamp(34px, 4.2vw, 58px);
--wc-text-size: 16px;
/* Watermark ("" = hilang) */
--wc-watermark: "Why Choose Us";
--wc-watermark-size: clamp(72px, 13vw, 210px);
--wc-wm-stroke: rgba(var(--wc-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--wc-reveal: 1; /* 0 = tanpa animasi */
--wc-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(--wc-row-gap);
--row-gap: var(--wc-row-gap);
--column-gap: var(--wc-row-gap);
--padding-top: var(--wc-pad-top);
--padding-bottom: var(--wc-pad-bottom);
--padding-left: max(var(--wc-pad-x), calc((100% - var(--wc-max)) / 2));
--padding-right: max(var(--wc-pad-x), calc((100% - var(--wc-max)) / 2));
--content-width: min(100%, var(--wc-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--wc-font);
background-color: var(--wc-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--wc-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--wc-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9).e-con::after {
content: var(--wc-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--wc-font-display);
font-size: var(--wc-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--wc-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__head.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.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;
}
/* HEADER: judul kiri | teks kanan */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__head.e-con {
--gap: var(--wc-col-gap);
--row-gap: 24px;
--column-gap: var(--wc-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__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(--wc-maroon), rgba(var(--wc-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--wc-maroon-rgb), .4), rgba(var(--wc-maroon-rgb), .05));
pointer-events: none;
}
/* ISI: kiri | gambar | kanan */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con {
--gap: var(--wc-body-gap);
--row-gap: 32px;
--column-gap: var(--wc-body-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .86fr) minmax(0, 1fr);
align-items: center;
}
/* kolom icon box */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col.e-con {
--flex-direction: column;
--justify-content: center;
--gap: 20px;
--row-gap: 20px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--left.e-con { --align-items: flex-end; }
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--right.e-con { --align-items: flex-start; }
/* kolom gambar tengah */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.e-con {
--flex-direction: column;
--align-items: stretch;
--gap: 0px;
--row-gap: 0px;
max-width: 400px;
margin-inline: auto;
}
/* ---------------------------------------------------------------------
3. JUDUL & TEKS
Tanpa !important, jadi pengaturan panel tetap menang.
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__title.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__text.elementor-widget {
width: 100%;
margin-block-end: 0;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__title .elementor-heading-title {
margin: 0;
font-family: var(--wc-font-display);
font-size: var(--wc-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--wc-ink);
text-wrap: balance;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__title .elementor-heading-title :is(span, em, b, strong) {
font-style: normal;
font-weight: inherit;
color: var(--wc-maroon);
background: linear-gradient(transparent 64%, rgba(var(--wc-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__text {
max-width: 560px;
font-family: var(--wc-font);
font-size: var(--wc-text-size);
line-height: 1.85;
color: var(--wc-muted);
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__text p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
4. GAMBAR TENGAH
Gambar 1 = kubah besar, lingkaran maroon menyembul di belakangnya.
Gambar 2 = lingkaran kecil melayang di pojok kanan bawah.
--------------------------------------------------------------------- */
/* lingkaran maroon di belakang gambar besar */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.e-con::before {
content: "";
position: absolute;
inset: auto auto -8% -12%;
z-index: 0;
width: 86%;
aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(145deg, var(--wc-maroon-light), var(--wc-maroon-dark));
opacity: .94;
pointer-events: none;
}
/* titik-titik dekoratif kanan atas */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.e-con::after {
content: "";
position: absolute;
inset: 28px -26px auto auto;
z-index: 0;
width: 92px;
height: 92px;
background-image: radial-gradient(rgba(var(--wc-maroon-rgb), .4) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img--1.elementor-widget {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
margin: 0;
aspect-ratio: 4 / 5;
border: 6px solid var(--wc-white);
border-radius: 999px 999px 26px 26px;
background: var(--wc-tint);
box-shadow: 0 36px 56px -28px rgba(var(--wc-maroon-rgb), .6), 0 0 0 1px var(--wc-line);
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img--2.elementor-widget {
position: absolute;
right: -8%;
bottom: -4%;
z-index: 3;
overflow: hidden;
width: 38%;
margin: 0;
aspect-ratio: 1;
border: 6px solid var(--wc-white);
border-radius: 50%;
background: var(--wc-tint);
box-shadow: 0 24px 40px -18px rgba(var(--wc-maroon-rgb), .65), 0 0 0 1px var(--wc-line);
}
/* isi gambar penuh (aman untuk Optimized Markup Elementor) */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img .elementor-widget-container,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img a,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform .9s var(--wc-ease);
}
/* ---------------------------------------------------------------------
5. ICON BOX – ars-wc__item
Kiri: ikon di sisi kanan, teks rata kanan.
Kanan: ikon di sisi kiri, teks rata kiri.
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__item.elementor-widget {
position: relative;
width: 100%;
margin: 0;
padding: 16px 18px;
border: 1px solid transparent;
border-radius: var(--wc-radius-sm);
transition: transform .4s var(--wc-ease), background-color .35s ease, border-color .35s ease;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
text-align: left;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__col--left .elementor-icon-box-wrapper {
flex-direction: row-reverse;
text-align: right;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-icon {
flex: none;
margin: 0;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-content {
flex: 1 1 auto;
min-width: 0;
}
/* ikon: lingkaran maroon + cincin tipis */
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .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(--wc-white);
background: linear-gradient(145deg, var(--wc-maroon-light), var(--wc-maroon-dark));
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(var(--wc-maroon-rgb), .08), 0 12px 20px -10px rgba(var(--wc-maroon-rgb), .8);
transition: transform .45s var(--wc-ease), box-shadow .45s ease;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon i {
line-height: 1;
}
/* judul item (span/link ikut warna judul, supaya panel tetap bisa ubah) */
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-title {
margin: 0 0 6px;
font-family: var(--wc-font-display);
font-size: clamp(20px, 1.7vw, 24px);
font-weight: 600;
line-height: 1.2;
color: var(--wc-ink);
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-title span,
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-title a {
color: inherit;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-description {
margin: 0;
font-family: var(--wc-font);
font-size: 14.5px;
line-height: 1.7;
color: var(--wc-muted);
}
/* ---------------------------------------------------------------------
6. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual:hover .ars-wc__img img { transform: scale(1.06); }
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__item.elementor-widget:hover {
transform: translateY(-4px);
background-color: var(--wc-tint);
border-color: rgba(var(--wc-maroon-rgb), .3);
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item:hover .elementor-icon-box-icon .elementor-icon {
transform: rotate(-8deg) scale(1.08);
box-shadow: 0 0 0 10px rgba(var(--wc-maroon-rgb), .1), 0 16px 24px -10px rgba(var(--wc-maroon-rgb), .85);
}
}
/* ---------------------------------------------------------------------
7. ANIMASI
a) Gambar kecil melayang pelan (translate, murah)
b) Masuk saat scroll – DESKTOP saja: kiri dari kiri, kanan dari
kanan, gambar naik + membesar sedikit.
--------------------------------------------------------------------- */
@keyframes arsWcBob {
from { translate: 0 0; }
to { translate: 0 -12px; }
}
@keyframes arsWcUp {
from { opacity: calc(1 - var(--wc-reveal)); translate: 0 calc(34px * var(--wc-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsWcLeft {
from { opacity: calc(1 - var(--wc-reveal)); translate: calc(-44px * var(--wc-reveal)) 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsWcRight {
from { opacity: calc(1 - var(--wc-reveal)); translate: calc(44px * var(--wc-reveal)) 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsWcZoom {
from { opacity: calc(1 - var(--wc-reveal)); translate: 0 calc(34px * var(--wc-reveal)); scale: calc(1 - .06 * var(--wc-reveal)); }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img--2.elementor-widget {
animation: arsWcBob 5s ease-in-out infinite alternate;
}
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con {
animation: arsWcUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--left.e-con {
animation: arsWcLeft linear both;
animation-timeline: view();
animation-range: entry 4% cover 30%;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--right.e-con {
animation: arsWcRight linear both;
animation-timeline: view();
animation-range: entry 4% cover 30%;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.e-con {
animation: arsWcZoom linear both;
animation-timeline: view();
animation-range: entry 0% cover 28%;
}
}
}
/* ---------------------------------------------------------------------
8. DESKTOP: item tengah melengkung menjauh dari gambar (≥ 1025px)
--------------------------------------------------------------------- */
@media (min-width: 1025px) {
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--left .ars-wc__item.elementor-widget:nth-child(2) {
width: calc(100% - var(--wc-bulge));
margin-right: var(--wc-bulge);
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--right .ars-wc__item.elementor-widget:nth-child(2) {
width: calc(100% - var(--wc-bulge));
margin-left: var(--wc-bulge);
}
}
/* ---------------------------------------------------------------------
9. TABLET (≤ 1024px)
Judul → teks → gambar di tengah → 2 kolom icon box berdampingan
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9).e-con {
--wc-pad-x: 32px;
--wc-col-gap: 24px;
--wc-row-gap: 44px;
--wc-body-gap: 28px;
--wc-watermark-size: clamp(72px, 16vw, 150px);
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con {
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con::before {
display: none;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__text {
max-width: none;
}
/* gambar di atas (lebar penuh), kolom icon box di bawahnya */
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con-boxed > .e-con-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con {
--row-gap: 44px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.e-con {
grid-column: 1 / -1;
order: -1;
max-width: 340px;
margin-bottom: 24px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--left.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col--right.e-con {
--align-items: stretch;
}
/* semua icon box: ikon kiri, teks rata kiri */
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__col--left .elementor-icon-box-wrapper {
flex-direction: row;
text-align: left;
}
}
/* ---------------------------------------------------------------------
10. MOBILE (≤ 767px)
Gambar → icon box kiri → icon box kanan, semua 1 kolom
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9).e-con {
--wc-pad-x: 20px;
--wc-pad-top: 56px;
--wc-pad-bottom: 84px;
--wc-row-gap: 36px;
--wc-col-gap: 16px;
--wc-body-gap: 12px;
--wc-title-size: clamp(30px, 8.6vw, 40px);
--wc-text-size: 15px;
--wc-watermark-size: 22vw;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__side.e-con {
--padding-left: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__intro.e-con::after {
width: 4px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__body.e-con {
--row-gap: 12px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__col.e-con {
--gap: 12px;
--row-gap: 12px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.e-con {
max-width: 270px;
margin-bottom: 28px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__visual.e-con::after {
display: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img--1.elementor-widget {
border-width: 5px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__img--2.elementor-widget {
right: -10%;
bottom: -5%;
width: 40%;
border-width: 5px;
}
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9) .ars-wc__item.elementor-widget {
padding: 14px 16px;
border-color: var(--wc-line);
background-color: rgba(255, 255, 255, .7);
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-wrapper {
gap: 14px;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-icon .elementor-icon {
width: 50px;
height: 50px;
font-size: 21px;
}
.elementor-5278 .elementor-element.elementor-element-738aeb9 .ars-wc__item .elementor-icon-box-description {
font-size: 14px;
}
}
/* ---------------------------------------------------------------------
11. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-738aeb9).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0335091 *//* =====================================================================
GUEST REVIEWS – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Signature Tour, Why Choose Us, Loop Card.
Latar putih + cahaya maroon tipis, watermark bergaris tipis di bawah.
KONSEP
- Kiri : kartu skor maroon bentuk "daun" dengan DIAL melingkar
(cincin emas = nilai rating, titik emas mengorbit pelan),
bintang berkilau bergelombang, label pill, garis emas.
- Kanan : carousel Reviews, tiap kartu bentuk daun dengan garis
maroon di kiri, tanda kutip besar samar, avatar bercincin,
panah kotak ala tombol Hero, bullet pil memanjang.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class (Advanced > CSS Classes):
Container (root) ........................ ars-rv
├─ Container (header) ................... ars-rv__head
│ ├─ Container (kiri) ................. ars-rv__intro
│ │ └─ Heading ...................... ars-rv__title
│ └─ Container (kanan) ................ ars-rv__side
│ └─ Text Editor .................. ars-rv__text
└─ Container (isi) ...................... ars-rv__body
├─ Container (kiri, kartu skor) ..... ars-rv__score
│ ├─ Heading "TRAVELER RATING" ... ars-rv__label
│ ├─ Heading "5.0" ............... ars-rv__num
│ ├─ Rating ....................... ars-rv__stars
│ ├─ Heading "Excellent" ......... ars-rv__verdict
│ └─ Text Editor .................. ars-rv__note
└─ Container (kanan) ................ ars-rv__list
└─ Reviews ...................... ars-rv__reviews
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
border, radius, jumlah slide, panah, bullet yang diatur dari panel
menimpa CSS ini. CSS ini hanya "tampilan bawaan".
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/scale/opacity; hover hanya di mouse.
TIPS : - Heading judul: bungkus kata dengan … agar
maroon, contoh: Guest Reviews
- Nilai pada dial: ubah --rv-score di bagian 1
(5.0 = 100%, 4.8 = 96%, 4.5 = 90%).
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091).e-con {
/* Warna */
--rv-maroon: #74142A;
--rv-maroon-dark: #4A0C1B;
--rv-maroon-light: #A32244;
--rv-maroon-rgb: 116, 20, 42;
--rv-gold: #E0A93B;
--rv-gold-light: #F4CF7A;
--rv-white: #ffffff;
--rv-tint: #FBF3F5;
--rv-blush: #F4D3DB;
--rv-ink: #2B1519;
--rv-muted: rgba(43, 21, 25, .74);
--rv-line: rgba(var(--rv-maroon-rgb), .16);
/* Font */
--rv-font-display: "El Messiri", Georgia, serif;
--rv-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--rv-max: 1240px;
--rv-pad-x: 48px;
--rv-pad-top: clamp(64px, 7vw, 108px);
--rv-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--rv-row-gap: clamp(40px, 5vw, 72px);
--rv-col-gap: clamp(32px, 5vw, 84px);
--rv-body-gap: clamp(24px, 3.4vw, 52px);
/* Bentuk (atas-kiri atas-kanan bawah-kanan bawah-kiri) */
--rv-shape-score: 96px 16px 96px 16px; /* kartu skor */
--rv-shape-card: 6px 34px 6px 34px; /* kartu review. 14px = kotak membulat */
/* Dial skor */
--rv-dial: 176px; /* diameter dial */
--rv-ring: 10px; /* tebal cincin */
--rv-score: 100%; /* isi cincin: 100% = 5.0 */
--rv-dial-bg: #3A0915;
/* Panah carousel: grid = tampil, none = sembunyi */
--rv-arrows: grid;
/* Teks */
--rv-title-size: clamp(34px, 4.2vw, 58px);
--rv-text-size: 16px;
/* Watermark ("" = hilang) */
--rv-watermark: "Guest Reviews";
--rv-watermark-size: clamp(72px, 12.5vw, 200px);
--rv-wm-stroke: rgba(var(--rv-maroon-rgb), .13);
/* Animasi */
--rv-reveal: 1; /* 0 = tanpa animasi masuk */
--rv-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(--rv-row-gap);
--row-gap: var(--rv-row-gap);
--column-gap: var(--rv-row-gap);
--padding-top: var(--rv-pad-top);
--padding-bottom: var(--rv-pad-bottom);
--padding-left: max(var(--rv-pad-x), calc((100% - var(--rv-max)) / 2));
--padding-right: max(var(--rv-pad-x), calc((100% - var(--rv-max)) / 2));
--content-width: min(100%, var(--rv-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--rv-font);
background-color: var(--rv-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--rv-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--rv-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-0335091).e-con::after {
content: var(--rv-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--rv-font-display);
font-size: var(--rv-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--rv-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__head.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__body.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__list.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;
}
/* HEADER */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__head.e-con {
--gap: var(--rv-col-gap);
--row-gap: 24px;
--column-gap: var(--rv-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__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(--rv-maroon), rgba(var(--rv-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
height: auto;
border: 0;
opacity: 1;
mix-blend-mode: normal;
transition: none;
background: linear-gradient(180deg, rgba(var(--rv-maroon-rgb), .4), rgba(var(--rv-maroon-rgb), .05));
pointer-events: none;
}
/* ISI: kartu skor | carousel */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__body.e-con {
--gap: var(--rv-body-gap);
--row-gap: 28px;
--column-gap: var(--rv-body-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__body.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__body.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
align-items: stretch;
}
/* kolom kanan: carousel di tengah vertikal */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__list.e-con {
--flex-direction: column;
--align-items: stretch;
--justify-content: center;
}
/* titik dekoratif di kanan atas carousel (desktop) */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__list.e-con::after {
content: "";
position: absolute;
inset: -22px -10px auto auto;
z-index: 0;
width: 92px;
height: 92px;
background-image: radial-gradient(rgba(var(--rv-maroon-rgb), .38) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. JUDUL & TEKS HEADER (tanpa !important, panel tetap menang)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__title.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__text.elementor-widget {
width: 100%;
margin-block-end: 0;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__title .elementor-heading-title {
margin: 0;
font-family: var(--rv-font-display);
font-size: var(--rv-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--rv-ink);
text-wrap: balance;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__title .elementor-heading-title :is(span, em, b, strong) {
font-style: normal;
font-weight: inherit;
color: var(--rv-maroon);
background: linear-gradient(transparent 64%, rgba(var(--rv-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__text {
max-width: 560px;
font-family: var(--rv-font);
font-size: var(--rv-text-size);
line-height: 1.85;
color: var(--rv-muted);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__text p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
4. KARTU SKOR (kiri) – ars-rv__score
Container sebagai kartu maroon bentuk daun.
Warna/background bisa diganti dari panel container.
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con {
--flex-direction: column;
--align-items: center;
--justify-content: center;
--gap: 18px;
--row-gap: 18px;
--padding-top: 52px;
--padding-right: 32px;
--padding-bottom: 48px;
--padding-left: 32px;
overflow: hidden;
text-align: center;
border-radius: var(--rv-shape-score);
background-color: var(--rv-maroon-dark);
background-image:
radial-gradient(circle at 14% 94%, rgba(163, 34, 68, .6), transparent 46%),
radial-gradient(circle at 88% 6%, rgba(255, 255, 255, .1), transparent 38%),
linear-gradient(165deg, var(--rv-maroon) 0%, var(--rv-maroon-dark) 100%);
box-shadow: 0 40px 60px -32px rgba(var(--rv-maroon-rgb), .75), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
/* cincin besar samar di pojok kanan atas */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con::before {
content: "";
position: absolute;
inset: -90px -90px auto auto;
z-index: 0;
width: 260px;
height: 260px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 50%;
opacity: 1;
mix-blend-mode: normal;
transition: none;
background: none;
box-shadow: 0 0 0 36px rgba(255, 255, 255, .04);
pointer-events: none;
}
/* titik-titik di pojok kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con::after {
content: "";
position: absolute;
inset: auto auto 26px 26px;
z-index: 0;
width: 84px;
height: 56px;
background-image: radial-gradient(rgba(255, 255, 255, .3) 1.4px, transparent 1.7px);
background-size: 14px 14px;
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score .elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
text-align: center;
}
/* ---- label pill ---- */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__label .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 8px 16px;
font-family: var(--rv-font);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--rv-blush);
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__label .elementor-heading-title::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rv-gold);
}
/* ---- DIAL: angka di dalam cincin emas ---- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__num.elementor-widget {
display: grid;
place-items: center;
width: var(--rv-dial);
max-width: 100%;
aspect-ratio: 1;
margin-block: 14px;
margin-inline: auto;
border-radius: 50%;
background:
radial-gradient(closest-side, var(--rv-dial-bg) calc(100% - var(--rv-ring)), transparent calc(100% - var(--rv-ring) + 1px)),
conic-gradient(from 0deg, var(--rv-gold-light) 0, var(--rv-gold) var(--rv-score), rgba(255, 255, 255, .16) 0);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 30px -16px rgba(0, 0, 0, .55);
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__num .elementor-widget-container {
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__num .elementor-heading-title {
margin: 0;
font-family: var(--rv-font-display);
font-size: calc(var(--rv-dial) * .34);
font-weight: 700;
line-height: 1;
letter-spacing: -.02em;
color: var(--rv-white);
}
/* cincin putus-putus berputar pelan di luar dial */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__num.elementor-widget::before {
content: "";
position: absolute;
inset: -14px;
border: 1px dashed rgba(255, 255, 255, .34);
border-radius: 50%;
pointer-events: none;
}
/* titik emas yang mengorbit */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__num.elementor-widget::after {
content: "";
position: absolute;
inset: -14px;
border-radius: 50%;
background: radial-gradient(circle 4.5px at 50% 0, var(--rv-gold-light) 96%, transparent 100%);
pointer-events: none;
}
/* ---- bintang (Rating widget baru & Star Rating klasik) ---- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__stars.elementor-widget {
--e-rating-icon-marked-color: var(--rv-gold);
--e-rating-icon-color: rgba(255, 255, 255, .25);
color: var(--rv-gold);
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__stars .e-rating-wrapper {
justify-content: center;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__stars :is(.e-icon, .elementor-star-rating i) {
display: inline-block;
}
/* ---- verdict ---- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__verdict.elementor-widget::before {
content: "";
display: block;
width: 52px;
height: 2px;
margin: 0 auto 14px;
background: linear-gradient(90deg, transparent, var(--rv-gold), transparent);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__verdict .elementor-heading-title {
margin: 0;
font-family: var(--rv-font-display);
font-size: clamp(26px, 2.4vw, 34px);
font-weight: 600;
line-height: 1.1;
color: var(--rv-white);
}
/* ---- catatan ---- */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__note {
font-family: var(--rv-font);
font-size: 14.5px;
line-height: 1.7;
color: rgba(255, 255, 255, .78);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__note p {
margin: 0;
color: inherit;
font: inherit;
}
/* ---------------------------------------------------------------------
5. CAROUSEL REVIEWS (kanan) – ars-rv__reviews
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__reviews.elementor-widget {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .swiper-slide {
height: auto;
}
/* kartu review bentuk daun */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial {
position: relative;
box-sizing: border-box;
height: 100%;
overflow: hidden;
padding: 30px 32px 28px 36px;
background: linear-gradient(180deg, var(--rv-white) 40%, var(--rv-tint) 100%);
border: 1px solid var(--rv-line);
border-radius: var(--rv-shape-card);
box-shadow: 0 10px 18px -14px rgba(var(--rv-maroon-rgb), .5);
}
/* garis maroon di sisi kiri kartu */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial::before {
content: "";
position: absolute;
inset: 22px auto 22px 0;
width: 4px;
border-radius: 0 999px 999px 0;
background: linear-gradient(180deg, var(--rv-maroon), var(--rv-maroon-light));
pointer-events: none;
}
/* tanda kutip besar samar di pojok kanan bawah */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__content {
position: relative;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__content::after {
content: "\201D";
position: absolute;
right: 4px;
bottom: -46px;
z-index: 0;
font-family: var(--rv-font-display);
font-size: 150px;
line-height: 1;
color: rgba(var(--rv-maroon-rgb), .08);
pointer-events: none;
}
/* header: avatar, nama, ikon platform */
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__reviews .elementor-testimonial__header {
gap: 14px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px dashed var(--rv-line);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__image img {
display: block;
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 0 0 3px var(--rv-white), 0 0 0 5px var(--rv-maroon);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__name {
font-family: var(--rv-font-display);
font-size: 19px;
font-weight: 600;
line-height: 1.2;
color: var(--rv-ink);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__title {
font-family: var(--rv-font);
font-size: 12.5px;
line-height: 1.4;
letter-spacing: .04em;
color: rgba(var(--rv-maroon-rgb), .78);
}
/* ikon platform: bulatan blush, ikon maroon */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__icon {
display: inline-grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
color: var(--rv-maroon);
background: var(--rv-tint);
border: 1px solid var(--rv-line);
border-radius: 50%;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__icon i {
color: inherit;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__icon svg {
fill: currentColor;
}
/* isi review */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__text {
position: relative;
z-index: 1;
font-family: var(--rv-font);
font-size: 15.5px;
line-height: 1.85;
color: rgba(43, 21, 25, .82);
}
/* bintang di dalam review (jika diaktifkan) */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial :is(.elementor-star-rating, .e-rating) {
--e-rating-icon-marked-color: var(--rv-gold);
color: var(--rv-gold);
}
/* panah: kotak seperti tombol Hero */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-swiper-button {
display: var(--rv-arrows, grid);
place-items: center;
width: 42px;
height: 42px;
font-size: 15px;
color: var(--rv-maroon);
background: var(--rv-white);
border: 1.5px solid var(--rv-maroon);
border-radius: 0;
transition: color .3s ease, background-color .3s ease, transform .35s var(--rv-ease);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-swiper-button svg {
fill: currentColor;
}
/* bullet: pil memanjang pada slide aktif */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 4px;
background: var(--rv-maroon);
border-radius: 999px;
opacity: .25;
transition: width .35s var(--rv-ease), opacity .3s ease;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .swiper-pagination-bullet-active {
width: 28px;
opacity: 1;
}
/* ---------------------------------------------------------------------
6. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial {
transition: border-color .35s ease;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial:hover {
border-color: rgba(var(--rv-maroon-rgb), .4);
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-swiper-button:hover {
color: var(--rv-white);
background: var(--rv-maroon);
}
}
/* ---------------------------------------------------------------------
7. ANIMASI (ringan: transform / translate / scale / opacity)
a) Cincin dial berputar pelan + titik emas mengorbit
b) Bintang berkilau bergelombang
c) Masuk saat scroll – DESKTOP saja
--------------------------------------------------------------------- */
@keyframes arsRvSpin {
to { transform: rotate(360deg); }
}
@keyframes arsRvStar {
0%, 100% { scale: 1; }
50% { scale: 1.2; }
}
@keyframes arsRvUp {
from { opacity: calc(1 - var(--rv-reveal)); translate: 0 calc(34px * var(--rv-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsRvLeft {
from { opacity: calc(1 - var(--rv-reveal)); translate: calc(-44px * var(--rv-reveal)) 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsRvRight {
from { opacity: calc(1 - var(--rv-reveal)); translate: calc(44px * var(--rv-reveal)) 0; }
to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__num.elementor-widget::before {
animation: arsRvSpin 40s linear infinite;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__num.elementor-widget::after {
animation: arsRvSpin 12s linear infinite;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__stars :is(.e-icon, .elementor-star-rating i) {
animation: arsRvStar 2.8s ease-in-out infinite;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__stars :is(.e-icon, .elementor-star-rating i):nth-child(2) { animation-delay: .22s; }
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__stars :is(.e-icon, .elementor-star-rating i):nth-child(3) { animation-delay: .44s; }
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__stars :is(.e-icon, .elementor-star-rating i):nth-child(4) { animation-delay: .66s; }
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__stars :is(.e-icon, .elementor-star-rating i):nth-child(5) { animation-delay: .88s; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con {
animation: arsRvUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con {
animation: arsRvLeft linear both;
animation-timeline: view();
animation-range: entry 4% cover 30%;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__list.e-con {
animation: arsRvRight linear both;
animation-timeline: view();
animation-range: entry 8% cover 34%;
}
}
}
/* ---------------------------------------------------------------------
8. TABLET (≤ 1024px)
Judul → teks → kartu skor (dial di kiri, teks di kanan) → carousel
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-0335091).e-con {
--rv-pad-x: 32px;
--rv-col-gap: 24px;
--rv-row-gap: 44px;
--rv-body-gap: 28px;
--rv-watermark-size: clamp(72px, 15vw, 150px);
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con {
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con::before {
display: none;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__text {
max-width: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__body.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__body.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__body.e-con {
--row-gap: 40px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__list.e-con::after {
display: none;
}
}
/* tablet lebar: kartu skor horizontal (dial kiri, teks kanan) */
@media (min-width: 768px) and (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con {
--padding-top: 40px;
--padding-bottom: 40px;
--padding-left: 44px;
--padding-right: 44px;
--row-gap: 12px;
--column-gap: 40px;
text-align: left;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
justify-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score .elementor-widget {
grid-column: 2;
text-align: left;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__num.elementor-widget {
grid-column: 1;
grid-row: 1 / span 4;
margin-block: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__stars .e-rating-wrapper {
justify-content: flex-start;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__verdict.elementor-widget::before {
margin-inline: 0;
}
}
/* ---------------------------------------------------------------------
9. MOBILE (≤ 767px)
Kartu skor tersusun tengah (kompak) → carousel tanpa panah (swipe)
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-0335091).e-con {
--rv-pad-x: 20px;
--rv-pad-top: 56px;
--rv-pad-bottom: 84px;
--rv-row-gap: 36px;
--rv-col-gap: 16px;
--rv-body-gap: 20px;
--rv-title-size: clamp(30px, 8.6vw, 40px);
--rv-text-size: 15px;
--rv-watermark-size: 22vw;
--rv-shape-score: 56px 12px 56px 12px;
--rv-shape-card: 6px 24px 6px 24px;
--rv-dial: 150px;
--rv-ring: 9px;
--rv-arrows: none; /* ganti ke grid untuk menampilkan panah di HP */
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__side.e-con {
--padding-left: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__intro.e-con::after {
width: 4px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con {
--padding-top: 40px;
--padding-right: 22px;
--padding-bottom: 36px;
--padding-left: 22px;
--gap: 14px;
--row-gap: 14px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con::before {
inset: -70px -70px auto auto;
width: 200px;
height: 200px;
}
:where(.elementor-5278 .elementor-element.elementor-element-0335091) .ars-rv__score.e-con::after {
display: none;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__label .elementor-heading-title {
padding: 7px 14px;
font-size: 10px;
letter-spacing: .22em;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__verdict .elementor-heading-title {
font-size: 26px;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__note {
font-size: 14px;
}
/* kartu review */
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial {
padding: 24px 20px 22px 26px;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__image img {
width: 48px;
height: 48px;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__name {
font-size: 17px;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__text {
font-size: 14.5px;
line-height: 1.8;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__icon {
width: 34px;
height: 34px;
}
.elementor-5278 .elementor-element.elementor-element-0335091 .ars-rv__reviews .elementor-testimonial__content::after {
font-size: 120px;
bottom: -38px;
}
}
/* ---------------------------------------------------------------------
10. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-0335091).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-0335091).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-0335091).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-12c9589 *//* =====================================================================
GALLERY – 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
- Bingkai kotak besar DIHAPUS. Gallery & carousel "lepas".
- Desktop: Basic Gallery kini MEMENUHI tinggi Media Carousel
(carousel + thumbnail = tinggi yang sama dengan gallery), foto
gallery besar & rapi dalam grid, bukan kecil-kecil lagi.
- Foto terakhir yang "sendirian" otomatis melebar mengisi baris.
- Tiap foto tetap berborder maroon (matras putih + garis maroon).
- Aksen mewah tanpa kotak: bingkai garis maroon bergeser di
belakang carousel (kiri-atas) dan gallery (kanan-bawah), masing-
masing dengan kotak emas kecil di sudutnya.
- Hover: kilau, zoom, bingkai putih tipis, tanda "+" (mouse saja).
Class (Advanced > CSS Classes):
Container (root) ........................ ars-gl
├─ Container (header) ................... ars-gl__head
│ ├─ Container (kiri) ................. ars-gl__intro
│ │ └─ Heading ...................... ars-gl__title
│ └─ Container (kanan) ................ ars-gl__side
│ └─ Text Editor .................. ars-gl__text
├─ Container (isi) ...................... ars-gl__body
│ ├─ Media Carousel ................... ars-gl__carousel
│ └─ Basic Gallery .................... ars-gl__grid
└─ Button ............................... ars-gl__btn
PANEL ELEMENTOR TETAP MENANG untuk font, warna, ukuran, padding, gap,
tinggi carousel, panah, bullet, gambar, link/lightbox, caption.
PENGECUALIAN (diatur CSS agar gallery pas selalu): jumlah kolom &
jarak foto Basic Gallery memakai --gl-cols dan --gl-gap di bagian 1
(panel Columns/Spacing widget itu tidak dipakai).
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/scale/opacity; hover hanya di mouse.
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589).e-con {
/* Warna */
--gl-maroon: #74142A;
--gl-maroon-dark: #4A0C1B;
--gl-maroon-light: #A32244;
--gl-maroon-rgb: 116, 20, 42;
--gl-gold: #D9A441;
--gl-gold-rgb: 217, 164, 65;
--gl-white: #ffffff;
--gl-tint: #FBF3F5;
--gl-ink: #2B1519;
--gl-muted: rgba(43, 21, 25, .74);
--gl-line: rgba(var(--gl-maroon-rgb), .16);
/* Font */
--gl-font-display: "El Messiri", Georgia, serif;
--gl-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--gl-max: 1240px;
--gl-pad-x: 48px;
--gl-pad-top: clamp(64px, 7vw, 108px);
--gl-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--gl-row-gap: clamp(40px, 5vw, 68px);
--gl-col-gap: clamp(32px, 5vw, 84px);
--gl-body-gap: clamp(28px, 3.4vw, 48px); /* carousel ↔ gallery */
--gl-radius: 4px; /* foto. 0px = kotak penuh */
/* BASIC GALLERY */
--gl-cols: 3; /* jumlah kolom. 9 foto = 3 | 8 foto = 2 | 12 foto = 3 atau 4 */
--gl-gap: 10px; /* jarak antar foto */
--gl-min-h: 360px; /* tinggi minimum gallery di desktop */
--gl-row-h: 200px; /* tinggi baris di tablet/HP (otomatis diubah di bawah) */
--gl-offset: 12px; /* geser bingkai garis di belakang carousel/gallery */
/* Panah carousel: grid = tampil, none = sembunyi */
--gl-arrows: grid;
/* Teks */
--gl-title-size: clamp(34px, 4.2vw, 58px);
--gl-text-size: 16px;
/* Watermark ("" = hilang) */
--gl-watermark: "Gallery";
--gl-watermark-size: clamp(80px, 15vw, 240px);
--gl-wm-stroke: rgba(var(--gl-maroon-rgb), .13);
/* Animasi */
--gl-reveal: 1; /* 0 = tanpa animasi masuk */
--gl-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(--gl-row-gap);
--row-gap: var(--gl-row-gap);
--column-gap: var(--gl-row-gap);
--padding-top: var(--gl-pad-top);
--padding-bottom: var(--gl-pad-bottom);
--padding-left: max(var(--gl-pad-x), calc((100% - var(--gl-max)) / 2));
--padding-right: max(var(--gl-pad-x), calc((100% - var(--gl-max)) / 2));
--content-width: min(100%, var(--gl-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--gl-font);
background-color: var(--gl-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--gl-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--gl-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589).e-con::after {
content: var(--gl-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--gl-font-display);
font-size: var(--gl-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--gl-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar) + HEADER
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__head.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__body.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-5278 .elementor-element.elementor-element-12c9589) .ars-gl__head.e-con {
--gap: var(--gl-col-gap);
--row-gap: 24px;
--column-gap: var(--gl-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__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(--gl-maroon), rgba(var(--gl-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
height: auto;
border: 0;
opacity: 1;
mix-blend-mode: normal;
transition: none;
background: linear-gradient(180deg, rgba(var(--gl-maroon-rgb), .4), rgba(var(--gl-maroon-rgb), .05));
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. JUDUL & TEKS HEADER (tanpa !important, panel tetap menang)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__title.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__text.elementor-widget {
width: 100%;
margin-block-end: 0;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__title .elementor-heading-title {
margin: 0;
font-family: var(--gl-font-display);
font-size: var(--gl-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--gl-ink);
text-wrap: balance;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__title .elementor-heading-title :is(span, em, b, strong) {
font-style: normal;
font-weight: inherit;
color: var(--gl-maroon);
background: linear-gradient(transparent 64%, rgba(var(--gl-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__text {
max-width: 560px;
font-family: var(--gl-font);
font-size: var(--gl-text-size);
line-height: 1.85;
color: var(--gl-muted);
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__text p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
4. ISI: carousel | gallery (tanpa bingkai kotak, "lepas")
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__body.e-con {
--gap: var(--gl-body-gap);
--row-gap: var(--gl-body-gap);
--column-gap: var(--gl-body-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__body.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__body.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
align-items: stretch;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel.elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid.elementor-widget {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
}
/* ---------------------------------------------------------------------
5. MEDIA CAROUSEL – ars-gl__carousel
--------------------------------------------------------------------- */
/* bingkai garis maroon bergeser di belakang carousel + kotak emas sudut */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel.elementor-widget::before {
content: "";
position: absolute;
inset: calc(var(--gl-offset) * -1) var(--gl-offset) var(--gl-offset) calc(var(--gl-offset) * -1);
z-index: -1;
border: 1.5px solid rgba(var(--gl-maroon-rgb), .42);
border-radius: var(--gl-radius);
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel.elementor-widget::after {
content: "";
position: absolute;
top: calc(var(--gl-offset) * -1 - 4px);
left: calc(var(--gl-offset) * -1 - 4px);
z-index: -1;
width: 14px;
height: 14px;
background: var(--gl-gold);
pointer-events: none;
}
/* foto utama: bingkai putih + cincin maroon */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-main-swiper {
border: 5px solid var(--gl-white);
border-radius: var(--gl-radius);
background: var(--gl-tint);
box-shadow: 0 0 0 1px rgba(var(--gl-maroon-rgb), .5), 0 30px 48px -28px rgba(var(--gl-maroon-rgb), .6);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-main-swiper .swiper-slide {
position: relative;
overflow: hidden;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-main-swiper .elementor-carousel-image {
transition: transform 1.2s var(--gl-ease);
}
/* gradasi maroon di bawah foto utama */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-main-swiper .swiper-slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(74, 12, 27, 0) 55%, rgba(74, 12, 27, .45) 100%);
pointer-events: none;
}
/* kilau diagonal (diam di luar layar, menyapu saat hover) */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .swiper-slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
transform: translateX(-130%);
pointer-events: none;
}
/* thumbnail: kerudung putih, aktif = bingkai maroon */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-thumbnails-swiper .swiper-slide {
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: calc(var(--gl-radius) - 1px);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-thumbnails-swiper .swiper-slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(255, 255, 255, .45);
transition: opacity .35s ease;
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-thumbnails-swiper .swiper-slide-thumb-active::before {
opacity: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-thumbnails-swiper .swiper-slide-thumb-active .elementor-carousel-image {
outline: 2px solid var(--gl-maroon);
outline-offset: -2px;
}
/* panah: kotak maroon */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__carousel .elementor-swiper-button {
display: var(--gl-arrows, grid);
place-items: center;
width: 44px;
height: 44px;
font-size: 16px;
color: var(--gl-white);
background: var(--gl-maroon);
border: 1.5px solid rgba(255, 255, 255, .7);
border-radius: 0;
transition: color .3s ease, background-color .3s ease;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__carousel .elementor-swiper-button svg {
fill: currentColor;
}
/* bullet (jika diaktifkan): pil memanjang pada slide aktif */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__carousel .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 4px;
background: var(--gl-maroon);
border-radius: 999px;
opacity: .25;
transition: width .35s var(--gl-ease), opacity .3s ease;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__carousel .swiper-pagination-bullet-active {
width: 28px;
opacity: 1;
}
/* ---------------------------------------------------------------------
6. BASIC GALLERY – ars-gl__grid
Grid CSS: jumlah kolom = --gl-cols, jarak = --gl-gap.
Desktop: tinggi gallery = tinggi carousel (isi gallery dilepas dari
perhitungan tinggi, lalu baris dibagi rata).
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid.elementor-widget {
min-height: var(--gl-min-h);
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery {
display: grid;
grid-template-columns: repeat(var(--gl-cols, 3), minmax(0, 1fr));
gap: var(--gl-gap);
margin: 0;
padding: 0;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery-item {
display: block;
width: auto;
max-width: none;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
}
/* foto terakhir yang sendirian melebar mengisi baris (grid 3 kolom) */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery-item:last-child:nth-child(3n + 1) {
grid-column: 1 / -1;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery-item:last-child:nth-child(3n + 2) {
grid-column: span 2;
}
/* tiap foto: matras putih + garis maroon tipis */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery-icon {
position: relative;
isolation: isolate;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
border: 3px solid var(--gl-white);
border-radius: var(--gl-radius);
outline: 1px solid rgba(var(--gl-maroon-rgb), .4);
background: var(--gl-tint);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform 1s var(--gl-ease);
}
/* gradasi maroon (muncul saat hover) */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon a::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(74, 12, 27, 0) 35%, rgba(74, 12, 27, .6) 100%);
opacity: 0;
transition: opacity .45s ease;
pointer-events: none;
}
/* tanda "+" kotak di tengah (muncul saat hover) */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon a::after {
content: "+";
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: -22px 0 0 -22px;
font-family: var(--gl-font);
font-size: 26px;
font-weight: 300;
line-height: 1;
color: var(--gl-white);
background: var(--gl-maroon);
border: 1px solid var(--gl-gold);
opacity: 0;
scale: .6;
transition: opacity .3s ease, scale .45s var(--gl-ease);
pointer-events: none;
}
/* bingkai putih tipis di dalam foto */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon::before {
content: "";
position: absolute;
inset: 8px;
z-index: 3;
border: 1px solid rgba(255, 255, 255, .85);
opacity: 0;
transform: scale(1.1);
transition: opacity .45s ease, transform .6s var(--gl-ease);
pointer-events: none;
}
/* kilau diagonal */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
transform: translateX(-130%);
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-caption {
font-family: var(--gl-font);
}
/* baris tablet/HP: tinggi tetap lewat --gl-row-h */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery {
grid-auto-rows: var(--gl-row-h);
}
/* ---------------------------------------------------------------------
7. TOMBOL: kotak seperti Hero (class: ars-gl__btn)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__btn.elementor-widget {
position: relative;
z-index: 1;
margin: 0;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__btn .elementor-button-wrapper {
text-align: center;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button {
position: relative;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
min-height: 48px;
padding: 15px 30px;
font-family: var(--gl-font);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: var(--gl-white);
background: var(--gl-maroon);
border: 1.5px solid var(--gl-maroon);
border-radius: 0;
box-shadow: none;
transition: color .35s ease, border-color .35s ease, transform .35s var(--gl-ease), box-shadow .35s var(--gl-ease);
}
/* isian putih meluncur dari kiri */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--gl-white);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s var(--gl-ease);
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button-content-wrapper {
justify-content: center;
gap: 10px;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button-text {
color: inherit;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button-icon {
color: inherit;
transition: transform .35s var(--gl-ease);
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button-icon svg {
fill: currentColor;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button:active {
transform: translate(0, 0);
box-shadow: none;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button:focus-visible {
outline: 2px solid var(--gl-maroon);
outline-offset: 3px;
}
/* ---------------------------------------------------------------------
8. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
/* --- Media Carousel (foto utama) --- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-main-swiper .swiper-slide:hover .elementor-carousel-image {
transform: scale(1.05);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .swiper-slide:hover::after {
transform: translateX(130%);
transition: transform 1s var(--gl-ease);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-thumbnails-swiper .swiper-slide:hover::before {
opacity: 0;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__carousel .elementor-swiper-button:hover {
color: var(--gl-maroon);
background: var(--gl-white);
}
/* --- Basic Gallery --- */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon:hover img {
transform: scale(1.1);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon:hover a::before {
opacity: 1;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon:hover a::after {
opacity: 1;
scale: 1;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon:hover::before {
opacity: 1;
transform: scale(1);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid .gallery-icon:hover::after {
transform: translateX(130%);
transition: transform .9s var(--gl-ease);
}
/* --- Tombol --- */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button:hover,
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button:focus-visible {
color: var(--gl-maroon);
border-color: var(--gl-maroon);
transform: translate(-3px, -3px);
box-shadow: 5px 5px 0 var(--gl-maroon-light);
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button:hover::before,
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button:focus-visible::before {
transform: scaleX(1);
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button:hover .elementor-button-icon {
transform: translateX(4px);
}
}
/* ---------------------------------------------------------------------
9. ANIMASI MASUK – hanya DESKTOP (≥1025px), tanpa "kurangi gerakan"
--------------------------------------------------------------------- */
@keyframes arsGlUp {
from { opacity: calc(1 - var(--gl-reveal)); translate: 0 calc(34px * var(--gl-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsGlLeft {
from { opacity: calc(1 - var(--gl-reveal)); translate: calc(-44px * var(--gl-reveal)) 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsGlRight {
from { opacity: calc(1 - var(--gl-reveal)); translate: calc(44px * var(--gl-reveal)) 0; }
to { opacity: 1; translate: 0 0; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__btn.elementor-widget {
animation: arsGlUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel.elementor-widget {
animation: arsGlLeft linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid.elementor-widget {
animation: arsGlRight linear both;
animation-timeline: view();
animation-range: entry 4% cover 34%;
}
}
}
/* ---------------------------------------------------------------------
10. DESKTOP (≥ 1025px): gallery memenuhi tinggi carousel
Isi gallery dilepas dari perhitungan tinggi (position: absolute),
jadi tinggi baris grid = tinggi carousel + thumbnail. Baris dibagi rata.
--------------------------------------------------------------------- */
@media (min-width: 1025px) {
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid.elementor-widget > :is(.elementor-widget-container, .elementor-image-gallery) {
position: absolute;
inset: 0;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .elementor-image-gallery,
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery {
height: 100%;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery {
grid-auto-rows: minmax(0, 1fr);
}
/* bingkai garis di belakang gallery: bergeser ke kanan-bawah + kotak emas */
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid.elementor-widget::before {
content: "";
position: absolute;
inset: var(--gl-offset) calc(var(--gl-offset) * -1) calc(var(--gl-offset) * -1) var(--gl-offset);
z-index: -1;
border: 1.5px solid rgba(var(--gl-maroon-rgb), .42);
border-radius: var(--gl-radius);
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__grid.elementor-widget::after {
content: "";
position: absolute;
right: calc(var(--gl-offset) * -1 - 4px);
bottom: calc(var(--gl-offset) * -1 - 4px);
z-index: -1;
width: 14px;
height: 14px;
background: var(--gl-gold);
pointer-events: none;
}
}
/* ---------------------------------------------------------------------
11. TABLET (≤ 1024px)
Judul → teks → carousel → gallery (3 kolom, baris tinggi tetap) → tombol
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-12c9589).e-con {
--gl-pad-x: 32px;
--gl-col-gap: 24px;
--gl-row-gap: 40px;
--gl-body-gap: 40px;
--gl-cols: 3;
--gl-gap: 8px;
--gl-row-h: clamp(150px, 22vw, 210px);
--gl-offset: 10px;
--gl-min-h: 0px;
--gl-watermark-size: clamp(80px, 18vw, 170px);
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__head.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con {
--padding-left: 30px;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con::before {
display: none;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__text {
max-width: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__body.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__body.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
}
/* ---------------------------------------------------------------------
12. MOBILE (≤ 767px)
Gallery 2 kolom; foto terakhir yang sendirian melebar penuh.
Saran panel: atur tinggi Media Carousel versi mobile (± 280px).
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-12c9589).e-con {
--gl-pad-x: 20px;
--gl-pad-top: 56px;
--gl-pad-bottom: 84px;
--gl-row-gap: 32px;
--gl-col-gap: 16px;
--gl-body-gap: 32px;
--gl-cols: 2;
--gl-gap: 6px;
--gl-row-h: clamp(120px, 38vw, 170px);
--gl-offset: 7px;
--gl-title-size: clamp(30px, 8.6vw, 40px);
--gl-text-size: 15px;
--gl-watermark-size: 26vw;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__side.e-con {
--padding-left: 22px;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__intro.e-con::after {
width: 4px;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel.elementor-widget::after {
width: 11px;
height: 11px;
}
:where(.elementor-5278 .elementor-element.elementor-element-12c9589) .ars-gl__carousel .elementor-main-swiper {
border-width: 4px;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery-icon {
border-width: 2px;
}
/* 2 kolom: foto terakhir yang ganjil melebar penuh */
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__grid .gallery-item:last-child:nth-child(2n + 1) {
grid-column: 1 / -1;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__carousel .elementor-swiper-button {
width: 36px;
height: 36px;
font-size: 13px;
}
.elementor-5278 .elementor-element.elementor-element-12c9589 .ars-gl__btn .elementor-button {
min-height: 46px;
padding: 14px 24px;
font-size: 12px;
letter-spacing: .12em;
}
}
/* ---------------------------------------------------------------------
13. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-12c9589).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-12c9589).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1793813 *//* =====================================================================
FAQ (ACCORDION) – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Why Choose Us, Tour Package, Top Places.
Latar putih + cahaya maroon tipis, watermark "FAQ" bergaris tipis,
judul El Messiri, teks DM Sans, tombol KOTAK, accordion berkotak.
Layout desktop:
[ Eyebrow / Judul / Teks / Tombol (kiri, sticky) | Accordion (kanan) ]
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-fq
└─ Container (baris, level 2) ........... ars-fq__intro (alias: ars-fq__row)
├─ Container (isi kiri) ............. ars-fq__copy
│ ├─ Heading (kecil) .............. ars-fq__eyebrow
│ ├─ Heading (besar) .............. ars-fq__title
│ ├─ Text Editor .................. ars-fq__text
│ └─ Button ....................... ars-fq__btn
└─ Container (kolom kanan) .......... ars-fq__faq
└─ Accordion .................... ars-fq__acc
UKURAN TEKS: Heading desktop 55 · tablet 50 · mobile 45
Deskripsi desktop 16 · mobile 15
Ubah di bagian 1 (--fq-title-size / --fq-text-size) bila perlu.
PANEL ELEMENTOR TETAP MENANG: warna, font, ukuran, padding, border,
radius, ikon yang diatur dari panel Elementor menimpa CSS ini
(specificity sengaja dibuat lebih rendah dari panel, tanpa !important).
Hanya berlaku untuk Accordion bawaan Elementor (juga mendukung
Nested Accordion).
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, hover hanya di perangkat mouse.
TIPS : di Heading besar, bungkus kata dengan … agar
berwarna maroon, contoh: Frequently Asked Questions
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con {
/* Warna */
--fq-maroon: #74142A;
--fq-maroon-dark: #4A0C1B;
--fq-maroon-light: #A32244;
--fq-maroon-rgb: 116, 20, 42;
--fq-white: #ffffff;
--fq-tint: #FBF3F5;
--fq-ink: #2B1519;
--fq-muted: rgba(43, 21, 25, .74);
--fq-line: rgba(var(--fq-maroon-rgb), .22);
/* Font */
--fq-font-display: "El Messiri", Georgia, serif;
--fq-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--fq-max: 1240px;
--fq-pad-x: 48px;
--fq-pad-top: clamp(64px, 7vw, 108px);
--fq-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--fq-col-gap: clamp(36px, 5.5vw, 96px); /* kiri ↔ kanan */
--fq-sticky-top: 110px; /* jarak kolom kiri saat menempel */
/* Teks */
--fq-title-size: 55px; /* heading desktop */
--fq-text-size: 16px; /* deskripsi desktop */
--fq-q-size: 17px; /* pertanyaan (bisa diubah dari panel) */
--fq-a-size: 15.5px; /* jawaban (bisa diubah dari panel) */
/* Accordion */
--fq-item-gap: 14px; /* jarak antar pertanyaan */
--fq-item-radius: 0px; /* 0 = kotak */
--fq-icon-box: 36px; /* kotak ikon +/- */
/* Hiasan */
--fq-dots: 1; /* titik hiasan kanan atas: 1 / 0 */
/* Watermark ("" = hilang) */
--fq-watermark: "FAQ";
--fq-watermark-size: clamp(90px, 17vw, 270px);
--fq-wm-stroke: rgba(var(--fq-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--fq-reveal: 1; /* 0 = tanpa animasi */
--fq-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(--fq-pad-top);
--padding-bottom: var(--fq-pad-bottom);
--padding-left: max(var(--fq-pad-x), calc((100% - var(--fq-max)) / 2));
--padding-right: max(var(--fq-pad-x), calc((100% - var(--fq-max)) / 2));
--content-width: min(100%, var(--fq-max));
position: relative;
overflow: clip; /* clip (bukan hidden) agar sticky tetap jalan */
isolation: isolate;
font-family: var(--fq-font);
background-color: var(--fq-white);
background-image:
radial-gradient(ellipse 50% 40% at 0% 0%, rgba(var(--fq-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 100% 100%, rgba(var(--fq-maroon-rgb), .08), transparent 70%);
}
/* root = satu kolom penuh; dua kolom dibuat oleh container baris (ars-fq__intro) */
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con::after {
content: var(--fq-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--fq-font-display);
font-size: var(--fq-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--fq-wm-stroke);
pointer-events: none;
user-select: none;
}
/* titik dekoratif kanan atas */
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con::before {
content: "";
position: absolute;
inset: 34px 34px auto auto;
z-index: 0;
width: 110px;
height: 110px;
opacity: var(--fq-dots);
background-image: radial-gradient(rgba(var(--fq-maroon-rgb), .34) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
/* ---------------------------------------------------------------------
2. KOLOM (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__faq.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;
}
/* BARIS (container level 2) = dua kolom: teks kiri | accordion kanan */
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con {
--gap: var(--fq-col-gap);
--row-gap: 40px;
--column-gap: var(--fq-col-gap);
}
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con-boxed > .e-con-inner,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
align-items: start;
}
/* kolom kiri menempel saat halaman di-scroll (desktop) */
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy.e-con {
position: sticky;
top: var(--fq-sticky-top);
align-self: start;
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-start;
--gap: 18px;
--row-gap: 18px;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy.e-con::after {
content: "";
position: absolute;
inset: 4px auto 4px 0;
z-index: 0;
width: 5px;
border-radius: 999px;
background: linear-gradient(180deg, var(--fq-maroon), rgba(var(--fq-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__faq.e-con {
--flex-direction: column;
--align-items: stretch;
--gap: 0px;
}
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy .elementor-widget,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__faq .elementor-widget {
margin-block-end: 0;
}
/* ---------------------------------------------------------------------
3. EYEBROW, JUDUL, TEKS
Specificity (0,3,0): mengalahkan bawaan Elementor, kalah dari panel.
--------------------------------------------------------------------- */
.ars-fq .ars-fq__eyebrow .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0;
font-family: var(--fq-font);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--fq-maroon);
}
/* garis kecil sebelum eyebrow */
.ars-fq .ars-fq__eyebrow .elementor-heading-title::before {
content: "";
flex: none;
width: 34px;
height: 2px;
background: var(--fq-maroon);
}
.ars-fq .ars-fq__title .elementor-heading-title {
margin: 0;
font-family: var(--fq-font-display);
font-size: var(--fq-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--fq-ink);
text-wrap: balance;
}
.ars-fq .ars-fq__title .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--fq-maroon);
background: linear-gradient(transparent 64%, rgba(var(--fq-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
.ars-fq .ars-fq__text {
max-width: 480px;
font-family: var(--fq-font);
font-size: var(--fq-text-size);
line-height: 1.85;
color: var(--fq-muted);
}
.ars-fq .ars-fq__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.ars-fq .ars-fq__text p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------
4. TOMBOL – kotak, solid maroon, sapuan warna + bayangan bergeser
(sama gayanya dengan tombol section lain)
--------------------------------------------------------------------- */
.ars-fq .ars-fq__btn { margin-top: 10px; }
.ars-fq .ars-fq__btn .elementor-button {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 17px 34px;
font-family: var(--fq-font);
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: var(--fq-maroon);
border: 1.5px solid var(--fq-maroon);
border-radius: 0;
box-shadow: 6px 6px 0 rgba(var(--fq-maroon-rgb), .22);
transition: transform .35s var(--fq-ease), box-shadow .35s var(--fq-ease), color .3s ease;
}
/* sapuan warna dari kiri */
.ars-fq .ars-fq__btn .elementor-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--fq-maroon-dark);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s var(--fq-ease);
}
.ars-fq .ars-fq__btn .elementor-button-content-wrapper { gap: 12px; }
.ars-fq .ars-fq__btn .elementor-button-icon svg,
.ars-fq .ars-fq__btn .elementor-button-icon i {
transition: transform .35s var(--fq-ease);
}
.ars-fq .ars-fq__btn .elementor-button:focus-visible {
outline: 2px solid var(--fq-maroon);
outline-offset: 4px;
}
@media (hover: hover) {
.ars-fq .ars-fq__btn .elementor-button:hover {
color: #fff;
background: var(--fq-maroon);
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0 rgba(var(--fq-maroon-rgb), .3);
}
.ars-fq .ars-fq__btn .elementor-button:hover::before { transform: scaleX(1); }
.ars-fq .ars-fq__btn .elementor-button:hover .elementor-button-icon svg,
.ars-fq .ars-fq__btn .elementor-button:hover .elementor-button-icon i { transform: translateX(4px); }
}
/* ---------------------------------------------------------------------
5. ACCORDION (bawaan Elementor)
Tiap pertanyaan = kotak berborder maroon, terpisah, dengan ikon
berkotak. Aktif: bar maroon di kiri, latar tint, bayangan keras.
--------------------------------------------------------------------- */
.ars-fq .ars-fq__acc .elementor-accordion {
display: grid;
gap: var(--fq-item-gap);
font-family: var(--fq-font);
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-item {
position: relative;
overflow: hidden;
margin: 0;
background: var(--fq-white);
border: 1.5px solid var(--fq-line);
border-radius: var(--fq-item-radius);
box-shadow: 0 0 0 rgba(var(--fq-maroon-rgb), 0);
transition: border-color .3s ease, box-shadow .4s var(--fq-ease), transform .4s var(--fq-ease), background-color .3s ease;
}
/* hapus garis pemisah bawaan */
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-item + .elementor-accordion-item { border-top-width: 1.5px; }
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content { border-top: 0; }
/* judul pertanyaan */
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title {
position: relative;
display: flex;
align-items: center;
gap: 16px;
margin: 0;
padding: 18px 22px;
font-size: var(--fq-q-size);
font-weight: 700;
line-height: 1.4;
color: var(--fq-ink);
background: transparent;
border: 0;
cursor: pointer;
transition: color .3s ease, background-color .3s ease;
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-title {
flex: 1 1 auto;
min-width: 0;
font: inherit;
color: inherit;
text-decoration: none;
outline: none;
}
/* bar maroon di kiri (muncul saat aktif) */
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--fq-maroon-light), var(--fq-maroon-dark));
transform: scaleY(0);
transform-origin: top center;
transition: transform .45s var(--fq-ease);
}
/* kotak ikon +/- */
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-icon {
flex: none;
display: grid;
place-items: center;
width: var(--fq-icon-box);
height: var(--fq-icon-box);
margin: 0;
float: none;
font-size: 14px;
line-height: 1;
text-align: center;
color: var(--fq-maroon);
background: var(--fq-white);
border: 1.5px solid rgba(var(--fq-maroon-rgb), .4);
border-radius: 0;
transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .45s var(--fq-ease);
}
/* ikon di kanan (jika dipilih di panel) */
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-icon-right {
order: 3;
margin-left: auto;
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-icon i,
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-icon svg {
width: 1em;
height: 1em;
color: inherit;
fill: currentColor;
}
/* isi jawaban */
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content {
padding: 2px 26px 26px calc(22px + var(--fq-icon-box) + 16px);
font-family: var(--fq-font);
font-size: var(--fq-a-size);
line-height: 1.85;
color: var(--fq-muted);
background: transparent;
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content p {
margin: 0 0 .9em;
color: inherit;
font: inherit;
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content p:last-child { margin-bottom: 0; }
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content :is(ul, ol) {
margin: 0 0 .9em;
padding-left: 1.2em;
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content a {
color: var(--fq-maroon);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---- aktif / terbuka ---- */
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title.elementor-active {
color: var(--fq-maroon-dark);
background: var(--fq-tint);
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title.elementor-active::before {
transform: scaleY(1);
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
color: #fff;
background: var(--fq-maroon);
border-color: var(--fq-maroon);
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title.elementor-active + .elementor-tab-content {
background: var(--fq-tint);
}
/* kotak yang berisi pertanyaan aktif ikut menyala (browser yang mendukung :has) */
@supports .elementor-5278 .elementor-element.elementor-element-1793813(:has(*)) {
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-item:has(> .elementor-tab-title.elementor-active) {
border-color: var(--fq-maroon);
background: var(--fq-tint);
box-shadow: 8px 8px 0 rgba(var(--fq-maroon-rgb), .14);
}
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title:focus-visible {
outline: 2px solid var(--fq-maroon);
outline-offset: -4px;
}
/* ---- hover: hanya perangkat mouse ---- */
@media (hover: hover) {
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-item:hover {
border-color: rgba(var(--fq-maroon-rgb), .6);
transform: translateX(4px);
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title:hover { color: var(--fq-maroon); }
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon {
border-color: var(--fq-maroon);
transform: rotate(90deg);
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title.elementor-active:hover .elementor-accordion-icon {
transform: rotate(180deg);
}
}
/* ---------------------------------------------------------------------
5b. NESTED ACCORDION (jika Anda memakai widget Accordion versi baru)
--------------------------------------------------------------------- */
.ars-fq .ars-fq__acc .e-n-accordion {
display: grid;
gap: var(--fq-item-gap);
font-family: var(--fq-font);
}
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item {
overflow: hidden;
background: var(--fq-white);
border: 1.5px solid var(--fq-line);
border-radius: var(--fq-item-radius);
transition: border-color .3s ease, box-shadow .4s var(--fq-ease), background-color .3s ease;
}
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item[open] {
border-color: var(--fq-maroon);
background: var(--fq-tint);
box-shadow: 8px 8px 0 rgba(var(--fq-maroon-rgb), .14);
}
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item-title {
gap: 16px;
padding: 18px 22px;
font-size: var(--fq-q-size);
font-weight: 700;
line-height: 1.4;
color: var(--fq-ink);
cursor: pointer;
}
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title { color: var(--fq-maroon-dark); }
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item-title-icon {
display: grid;
place-items: center;
width: var(--fq-icon-box);
height: var(--fq-icon-box);
color: var(--fq-maroon);
background: var(--fq-white);
border: 1.5px solid rgba(var(--fq-maroon-rgb), .4);
}
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
color: #fff;
background: var(--fq-maroon);
border-color: var(--fq-maroon);
}
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item-title-icon :is(span, i, svg) {
color: inherit;
fill: currentColor;
}
/* ---------------------------------------------------------------------
6. ANIMASI MASUK – DESKTOP saja (translate + opacity)
--------------------------------------------------------------------- */
@keyframes arsFqUp {
from { opacity: calc(1 - var(--fq-reveal)); translate: 0 calc(30px * var(--fq-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy.e-con,
.ars-fq .ars-fq__acc .elementor-accordion-item {
animation: arsFqUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 22%;
}
}
}
/* ---------------------------------------------------------------------
7. TABLET (≤ 1024px) – satu kolom: teks lalu accordion
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con {
--fq-pad-x: 32px;
--fq-title-size: 50px;
--fq-watermark-size: clamp(90px, 22vw, 190px);
--fq-item-gap: 12px;
}
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con-boxed > .e-con-inner,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
row-gap: 44px;
}
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy.e-con {
position: relative;
top: auto;
}
.ars-fq .ars-fq__text { max-width: none; }
}
/* ---------------------------------------------------------------------
8. MOBILE (≤ 767px)
Heading 45px, deskripsi 15px, accordion lebih rapat, tombol penuh
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con {
--fq-pad-x: 20px;
--fq-pad-top: 56px;
--fq-pad-bottom: 84px;
--fq-title-size: 45px;
--fq-text-size: 15px;
--fq-q-size: 15.5px;
--fq-a-size: 15px;
--fq-icon-box: 32px;
--fq-item-gap: 10px;
--fq-watermark-size: 30vw;
}
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con::before { display: none; }
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__intro.e-con-boxed > .e-con-inner,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__row.e-con-boxed > .e-con-inner { row-gap: 36px; }
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy.e-con {
--padding-left: 22px;
--gap: 16px;
}
:where(.elementor-5278 .elementor-element.elementor-element-1793813) .ars-fq__copy.e-con::after { width: 4px; }
.ars-fq .ars-fq__eyebrow .elementor-heading-title { font-size: 12px; letter-spacing: .18em; }
.ars-fq .ars-fq__btn,
.ars-fq .ars-fq__btn .elementor-button { width: 100%; }
.ars-fq .ars-fq__btn .elementor-button { justify-content: center; }
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title,
.ars-fq .ars-fq__acc .e-n-accordion .e-n-accordion-item-title {
gap: 12px;
padding: 15px 16px;
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content {
padding: 0 18px 20px 18px;
}
.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-item { box-shadow: none; }
}
/* ---------------------------------------------------------------------
9. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-1793813).e-con *::after {
animation: none !important;
transition: none !important;
}
}
/* ---------------------------------------------------------------------
10. PEMAKSA WARNA (HAPUS BAGIAN INI jika ingin warna diatur penuh dari panel)
Elemen mentah dari template Elementor membawa warna bawaan (heading
biru #6EC1E4, tombol hijau #61CE70, border abu-abu) yang tersimpan di
panel dan menimpa CSS di atas. Bagian ini memaksa warna maroon.
Setelah Anda mengosongkan warna bawaan itu di panel (Style > Text Color,
Background, Border), bagian 10 ini boleh dihapus.
Font, ukuran, spasi tetap bisa diatur dari panel.
--------------------------------------------------------------------- */
.ars-fq.ars-fq.ars-fq .ars-fq__eyebrow .elementor-heading-title { color: var(--fq-maroon); }
.ars-fq.ars-fq.ars-fq .ars-fq__title .elementor-heading-title { color: var(--fq-ink); }
.ars-fq.ars-fq.ars-fq .ars-fq__text { color: var(--fq-muted); }
.ars-fq.ars-fq.ars-fq .ars-fq__btn .elementor-button {
color: #fff;
background-color: var(--fq-maroon);
border: 1.5px solid var(--fq-maroon);
border-radius: 0;
}
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-item {
border: 1.5px solid var(--fq-line);
border-radius: var(--fq-item-radius);
}
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title { color: var(--fq-ink); border: 0; }
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title.elementor-active { color: var(--fq-maroon-dark); }
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-title { color: inherit; }
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-icon { color: var(--fq-maroon); border-color: rgba(var(--fq-maroon-rgb), .4); }
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon { color: #fff; border-color: var(--fq-maroon); }
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-tab-content { color: var(--fq-muted); border: 0; }
.ars-fq.ars-fq.ars-fq .ars-fq__acc .elementor-accordion .elementor-accordion-icon :is(i, svg) { color: inherit; fill: currentColor; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9924e43 *//* =====================================================================
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-5278 .elementor-element.elementor-element-9924e43).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-5278 .elementor-element.elementor-element-9924e43).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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__card.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .ars-ct__media.e-con,
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__card.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__content .elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
/* ---- judul ---- */
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .ars-ct__title .elementor-heading-title :is(span, em, b, strong) {
font-style: normal;
font-weight: inherit;
color: var(--ct-blush);
}
/* ---- teks ---- */
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .ars-ct__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__text p:last-child {
margin-bottom: 0;
}
/* ---- ICON LIST: baris panel transparan + garis putih di kiri ---- */
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__list .elementor-icon-list-items {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .ars-ct__list .elementor-icon-list-icon {
flex: none;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__list .elementor-icon-list-icon i {
color: var(--e-icon-list-icon-color, var(--ct-white));
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__list .elementor-icon-list-icon svg {
fill: var(--e-icon-list-icon-color, var(--ct-white));
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__btn.elementor-widget {
margin-top: 6px;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button-content-wrapper {
justify-content: center;
gap: 10px;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button-text {
color: inherit;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button-icon {
color: inherit;
transition: transform .35s var(--ct-ease);
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button-icon svg {
fill: currentColor;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button:active {
transform: translate(0, 0);
box-shadow: none;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__card.e-con:hover::after {
transform: translateX(130%);
transition: transform 1.1s var(--ct-ease);
}
/* baris icon list */
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .ars-ct__list .elementor-icon-list-item:hover::before {
transform: scaleX(1);
}
/* tombol */
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button:hover,
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button:hover::before,
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button:focus-visible::before {
transform: scaleX(1);
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__btn .elementor-button:hover .elementor-button-icon {
transform: translateX(4px);
}
}
/* ---------------------------------------------------------------------
7. TABLET (≤ 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5278 .elementor-element.elementor-element-9924e43).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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__card.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .ars-ct__card.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__text {
max-width: none;
}
}
/* ---------------------------------------------------------------------
8. MOBILE (≤ 767px)
Foto di atas, konten di bawah, tombol selebar penuh
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5278 .elementor-element.elementor-element-9924e43).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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__card.e-con-full,
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .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-5278 .elementor-element.elementor-element-9924e43) .ars-ct__media.e-con::before {
inset: auto auto 18px 18px;
padding: 7px 13px;
font-size: 9.5px;
}
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .ars-ct__content.e-con {
--padding-top: 30px;
--padding-right: 22px;
--padding-bottom: 32px;
--padding-left: 22px;
--gap: 16px;
--row-gap: 16px;
}
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .ars-ct__content.e-con::before {
inset: -70px -70px auto auto;
width: 190px;
height: 190px;
}
:where(.elementor-5278 .elementor-element.elementor-element-9924e43) .ars-ct__content.e-con::after {
display: none;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__list .elementor-icon-list-item {
padding: 11px 14px 11px 18px;
gap: 12px;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .ars-ct__list .elementor-icon-list-text {
font-size: 14.5px;
}
.elementor-5278 .elementor-element.elementor-element-9924e43 .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-5278 .elementor-element.elementor-element-9924e43).e-con *,
:where(.elementor-5278 .elementor-element.elementor-element-9924e43).e-con *::before,
:where(.elementor-5278 .elementor-element.elementor-element-9924e43).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */