.elementor-8 .elementor-element.elementor-element-ec0710d{--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;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-ec0710d, .elementor-8 .elementor-element.elementor-element-ec0710d::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-95111f7{--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;--align-items:center;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-235088f{--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;--align-items:center;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-235088f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8 .elementor-element.elementor-element-568b774 .elementor-button{font-family:"Roboto Mono", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;background-color:#9344FF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-568b774 .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-568b774 .elementor-button:focus{color:#FFFFFF;background-color:#02010100;border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-568b774 .elementor-button:hover svg, .elementor-8 .elementor-element.elementor-element-568b774 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-4dba611 .elementor-button{font-family:"Roboto Mono", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;background-color:#9344FF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-4dba611 .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-4dba611 .elementor-button:focus{color:#FFFFFF;background-color:#02010100;border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-4dba611 .elementor-button:hover svg, .elementor-8 .elementor-element.elementor-element-4dba611 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-f4d3f0b .elementor-button{font-family:"Roboto Mono", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;background-color:#9344FF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-f4d3f0b .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-f4d3f0b .elementor-button:focus{color:#FFFFFF;background-color:#02010100;border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-f4d3f0b .elementor-button:hover svg, .elementor-8 .elementor-element.elementor-element-f4d3f0b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-4f67872 .elementor-button{font-family:"Roboto Mono", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;background-color:#9344FF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-4f67872 .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-4f67872 .elementor-button:focus{color:#FFFFFF;background-color:#02010100;border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-4f67872 .elementor-button:hover svg, .elementor-8 .elementor-element.elementor-element-4f67872 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-0a38856{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-985b6a4{--grid-template-columns:repeat(0, auto);--icon-size:25px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-8 .elementor-element.elementor-element-985b6a4 .elementor-widget-container{text-align:right;}.elementor-8 .elementor-element.elementor-element-985b6a4 .elementor-social-icon{background-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-985b6a4 .elementor-social-icon i{color:#9344FF;}.elementor-8 .elementor-element.elementor-element-985b6a4 .elementor-social-icon svg{fill:#9344FF;}.elementor-8 .elementor-element.elementor-element-985b6a4 .elementor-icon{border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-f6215b9{--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;--align-items:center;--background-transition:0.3s;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-82673a1{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-82673a1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8 .elementor-element.elementor-element-ef791a4{text-align:center;}.elementor-8 .elementor-element.elementor-element-ef791a4 .elementor-heading-title{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:30px;font-weight:500;}.elementor-8 .elementor-element.elementor-element-550aa91 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-550aa91{text-align:center;}.elementor-8 .elementor-element.elementor-element-550aa91 .elementor-heading-title{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:25px;font-weight:300;line-height:27px;}.elementor-8 .elementor-element.elementor-element-5ab1efa{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-6e99b09 > .elementor-widget-container{padding:19px 19px 19px 19px;}.elementor-8 .elementor-element.elementor-element-6e99b09.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-6e99b09 .elementor-button{font-family:"Roboto Mono", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;background-color:#9344FF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-6e99b09 .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-6e99b09 .elementor-button:focus{color:#FFFFFF;background-color:#02010100;border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-6e99b09 .elementor-button:hover svg, .elementor-8 .elementor-element.elementor-element-6e99b09 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-d0438fc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-d0438fc.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-d0438fc{text-align:center;}.elementor-8 .elementor-element.elementor-element-d0438fc .elementor-heading-title{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;line-height:27px;}.elementor-8 .elementor-element.elementor-element-33406cc{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-4b5476b{--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;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:3px 0px 3px 0px;--border-top-width:3px;--border-right-width:0px;--border-bottom-width:3px;--border-left-width:0px;border-color:#FFFFFF;--border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-4b5476b:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-4b5476b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(155deg, #B281F5 0%, #A802FF 100%);}.elementor-8 .elementor-element.elementor-element-4b5476b, .elementor-8 .elementor-element.elementor-element-4b5476b::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-35e8369{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-630ba9b{--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;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-630ba9b:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-630ba9b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://prettysoluna.xyz/wp-content/uploads/2025/08/2.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8 .elementor-element.elementor-element-630ba9b, .elementor-8 .elementor-element.elementor-element-630ba9b::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-5ec5419{--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;--align-items:center;--background-transition:0.3s;--margin-top:150px;--margin-bottom:150px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-311c590{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-311c590.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8 .elementor-element.elementor-element-2a50005{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-a73ce69{text-align:center;}.elementor-8 .elementor-element.elementor-element-a73ce69 img{width:78%;}.elementor-8 .elementor-element.elementor-element-61a84df{text-align:center;}.elementor-8 .elementor-element.elementor-element-61a84df .elementor-heading-title{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:25px;font-weight:300;line-height:27px;}.elementor-8 .elementor-element.elementor-element-b93d761 .elementor-button{font-family:"Roboto Mono", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;background-color:#9344FF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-b93d761 .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-b93d761 .elementor-button:focus{color:#FFFFFF;background-color:#02010100;border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-b93d761 .elementor-button:hover svg, .elementor-8 .elementor-element.elementor-element-b93d761 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-c203d2c{--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;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:3px 0px 3px 0px;--border-top-width:3px;--border-right-width:0px;--border-bottom-width:3px;--border-left-width:0px;border-color:#FFFFFF;--border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-c203d2c:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-c203d2c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(155deg, #B281F5 0%, #A802FF 100%);}.elementor-8 .elementor-element.elementor-element-c203d2c, .elementor-8 .elementor-element.elementor-element-c203d2c::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-94c935d{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-e8e02da{--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;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-e8e02da:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-e8e02da > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://prettysoluna.xyz/wp-content/uploads/2025/08/3.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8 .elementor-element.elementor-element-e8e02da, .elementor-8 .elementor-element.elementor-element-e8e02da::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-ca7f638{--display:flex;--background-transition:0.3s;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-12463ac img{width:48%;}.elementor-8 .elementor-element.elementor-element-7ce85c8{text-align:center;}.elementor-8 .elementor-element.elementor-element-7ce85c8 .elementor-heading-title{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:30px;font-weight:500;}.elementor-8 .elementor-element.elementor-element-9bc4317{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-b5104c6{--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;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:3px 0px 3px 0px;--border-top-width:3px;--border-right-width:0px;--border-bottom-width:3px;--border-left-width:0px;border-color:#FFFFFF;--border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-b5104c6:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-b5104c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(155deg, #B281F5 0%, #A802FF 100%);}.elementor-8 .elementor-element.elementor-element-b5104c6, .elementor-8 .elementor-element.elementor-element-b5104c6::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-50bc429{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-e3e2a9e{--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;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-e3e2a9e:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-e3e2a9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://prettysoluna.xyz/wp-content/uploads/2025/08/4.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8 .elementor-element.elementor-element-e3e2a9e, .elementor-8 .elementor-element.elementor-element-e3e2a9e::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-7839904{--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;--background-transition:0.3s;--margin-top:150px;--margin-bottom:150px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-c68c318{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-c68c318.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8 .elementor-element.elementor-element-d43afe3 img{width:70%;}.elementor-8 .elementor-element.elementor-element-c5faa61{text-align:center;}.elementor-8 .elementor-element.elementor-element-c5faa61 .elementor-heading-title{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:25px;font-weight:300;line-height:27px;}.elementor-8 .elementor-element.elementor-element-77cee3f .elementor-button{font-family:"Roboto Mono", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;background-color:#9344FF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;}.elementor-8 .elementor-element.elementor-element-77cee3f .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-77cee3f .elementor-button:focus{color:#FFFFFF;background-color:#02010100;border-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-77cee3f .elementor-button:hover svg, .elementor-8 .elementor-element.elementor-element-77cee3f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-a733df4{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-f97482d{--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;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-f97482d:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-f97482d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#9344FF;}.elementor-8 .elementor-element.elementor-element-f97482d, .elementor-8 .elementor-element.elementor-element-f97482d::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-dd21597{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-9bc7ea9{text-align:center;}.elementor-8 .elementor-element.elementor-element-9bc7ea9 .elementor-heading-title{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:300;line-height:27px;}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-235088f{--justify-content:center;}.elementor-8 .elementor-element.elementor-element-568b774 .elementor-button{font-size:12px;}.elementor-8 .elementor-element.elementor-element-4dba611 .elementor-button{font-size:12px;}.elementor-8 .elementor-element.elementor-element-f4d3f0b .elementor-button{font-size:12px;}.elementor-8 .elementor-element.elementor-element-4f67872 .elementor-button{font-size:12px;}.elementor-8 .elementor-element.elementor-element-985b6a4 .elementor-widget-container{text-align:center;}.elementor-8 .elementor-element.elementor-element-985b6a4{--icon-size:18px;}.elementor-8 .elementor-element.elementor-element-ef791a4 .elementor-heading-title{font-size:25px;}.elementor-8 .elementor-element.elementor-element-550aa91 .elementor-heading-title{font-size:18px;}.elementor-8 .elementor-element.elementor-element-d0438fc .elementor-heading-title{font-size:18px;}.elementor-8 .elementor-element.elementor-element-a73ce69 img{width:100%;}.elementor-8 .elementor-element.elementor-element-61a84df .elementor-heading-title{font-size:18px;}.elementor-8 .elementor-element.elementor-element-12463ac img{width:83%;}.elementor-8 .elementor-element.elementor-element-7ce85c8 .elementor-heading-title{font-size:25px;}.elementor-8 .elementor-element.elementor-element-d43afe3 img{width:94%;}.elementor-8 .elementor-element.elementor-element-c5faa61 .elementor-heading-title{font-size:20px;}}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-235088f{--width:53.918%;}.elementor-8 .elementor-element.elementor-element-82673a1{--width:57.216%;}.elementor-8 .elementor-element.elementor-element-311c590{--width:34.845%;}.elementor-8 .elementor-element.elementor-element-c68c318{--width:62.265%;}}/* Start custom CSS for image, class: .elementor-element-4fa1243 */
/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a73ce69 */
/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-12463ac *//* ===========================
SOLUNA // PURE-CSS LIGHT FX
(no JS, loop, safe for Elementor)
=========================== */
/* ==== 0) Variabel opsional (gampang di-tweak) ==== */
:root{
--soluna-light: rgba(255,255,255,.65); /* warna kilau */
--soluna-core : #ffffff; /* inti kilau */
--soluna-shadow: rgba(163,129,218,.35);/* bayangan ungu lembut */
--soluna-glow: #A381DA; /* glow utama */
}
/* ======================================
1) LIGHT SWEEP (kilau menyapu permukaan)
--------------------------------------
Cara pakai: tambahkan class .fx-light-sweep pada wrapper
Misal: ...gambar/teks...
====================================== */
.fx-light-sweep{
position: relative;
overflow: hidden; /* biar kilau tidak keluar kontainer */
will-change: transform; /* aman untuk animasi */
}
.fx-light-sweep::after{
content:"";
position:absolute;
top:-20%;
left:-150%;
width:60%;
height:140%;
transform: rotate(20deg);
background: linear-gradient( to right,
transparent 0%,
var(--soluna-light) 45%,
var(--soluna-core) 50%,
var(--soluna-light) 55%,
transparent 100%
);
filter: blur(1px);
pointer-events:none;
animation: solunaSweep 2.8s linear infinite;
}
@keyframes solunaSweep{
from{ left:-150%; }
to { left:160%; }
}
/* ======================================
2) GLOW PULSE (bercahaya berdenyut halus)
--------------------------------------
Cara pakai: tambahkan class .fx-glow-pulse pada elemen/card
====================================== */
.fx-glow-pulse{
position: relative;
animation: solunaPulse 2.2s ease-in-out infinite;
}
@keyframes solunaPulse{
0% { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); filter: brightness(1); }
50% { box-shadow: 0 10px 26px var(--soluna-shadow), 0 0 26px var(--soluna-glow); filter: brightness(1.05); }
100%{ box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); filter: brightness(1); }
}
/* ======================================
3) TEXT SHEEN (kilau berjalan di teks)
--------------------------------------
Cara pakai: .fx-text-sheen pada heading/teks
Catatan: warna teks asli dipakai sebagai dasar,
kilau lewat di atasnya.
====================================== */
.fx-text-sheen{
position: relative;
display: inline-block;
background:
linear-gradient(100deg,
transparent 0%,
transparent 35%,
rgba(255,255,255,.6) 50%,
transparent 65%,
transparent 100%);
background-size: 280% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: inherit; /* tetap pakai warna teks sekarang */
animation: solunaSheen 3.2s linear infinite;
}
@keyframes solunaSheen{
from{ background-position: 0% 50%; }
to { background-position: 200% 50%; }
}
/* ===========================
Aksesibilitas: kurangi animasi
=========================== */
@media (prefers-reduced-motion: reduce){
.fx-light-sweep::after,
.fx-glow-pulse,
.fx-text-sheen{
animation: none !important;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d43afe3 *//* ===========================
SOLUNA // PURE-CSS LIGHT FX
(no JS, loop, safe for Elementor)
=========================== */
/* ==== 0) Variabel opsional (gampang di-tweak) ==== */
:root{
--soluna-light: rgba(255,255,255,.65); /* warna kilau */
--soluna-core : #ffffff; /* inti kilau */
--soluna-shadow: rgba(163,129,218,.35);/* bayangan ungu lembut */
--soluna-glow: #A381DA; /* glow utama */
}
/* ======================================
1) LIGHT SWEEP (kilau menyapu permukaan)
--------------------------------------
Cara pakai: tambahkan class .fx-light-sweep pada wrapper
Misal: ...gambar/teks...
====================================== */
.fx-light-sweep{
position: relative;
overflow: hidden; /* biar kilau tidak keluar kontainer */
will-change: transform; /* aman untuk animasi */
}
.fx-light-sweep::after{
content:"";
position:absolute;
top:-20%;
left:-150%;
width:60%;
height:140%;
transform: rotate(20deg);
background: linear-gradient( to right,
transparent 0%,
var(--soluna-light) 45%,
var(--soluna-core) 50%,
var(--soluna-light) 55%,
transparent 100%
);
filter: blur(1px);
pointer-events:none;
animation: solunaSweep 2.8s linear infinite;
}
@keyframes solunaSweep{
from{ left:-150%; }
to { left:160%; }
}
/* ======================================
2) GLOW PULSE (bercahaya berdenyut halus)
--------------------------------------
Cara pakai: tambahkan class .fx-glow-pulse pada elemen/card
====================================== */
.fx-glow-pulse{
position: relative;
animation: solunaPulse 2.2s ease-in-out infinite;
}
@keyframes solunaPulse{
0% { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); filter: brightness(1); }
50% { box-shadow: 0 10px 26px var(--soluna-shadow), 0 0 26px var(--soluna-glow); filter: brightness(1.05); }
100%{ box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); filter: brightness(1); }
}
/* ======================================
3) TEXT SHEEN (kilau berjalan di teks)
--------------------------------------
Cara pakai: .fx-text-sheen pada heading/teks
Catatan: warna teks asli dipakai sebagai dasar,
kilau lewat di atasnya.
====================================== */
.fx-text-sheen{
position: relative;
display: inline-block;
background:
linear-gradient(100deg,
transparent 0%,
transparent 35%,
rgba(255,255,255,.6) 50%,
transparent 65%,
transparent 100%);
background-size: 280% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: inherit; /* tetap pakai warna teks sekarang */
animation: solunaSheen 3.2s linear infinite;
}
@keyframes solunaSheen{
from{ background-position: 0% 50%; }
to { background-position: 200% 50%; }
}
/* ===========================
Aksesibilitas: kurangi animasi
=========================== */
@media (prefers-reduced-motion: reduce){
.fx-light-sweep::after,
.fx-glow-pulse,
.fx-text-sheen{
animation: none !important;
}
}/* End custom CSS */