.elementor-8 .elementor-element.elementor-element-d64e7f6 {
  --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;
  --overlay-opacity: 0.5;
  --margin-top: -1px;
  --margin-bottom: -1px;
  --margin-left: -1px;
  --margin-right: -1px;
}
.elementor-8 .elementor-element.elementor-element-d64e7f6::before,
.elementor-8
  .elementor-element.elementor-element-d64e7f6
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-d64e7f6
  > .e-con-inner
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-d64e7f6
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-d64e7f6
  > .e-con-inner
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-d64e7f6
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer::before {
  --background-overlay: "";
  background-color: #000000;
}
.elementor-8 .elementor-element.elementor-element-d64e7f6,
.elementor-8 .elementor-element.elementor-element-d64e7f6::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-c6202f6 {
  --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;
  border-style: solid;
  --border-style: solid;
  border-width: 2px 5px 5px 2px;
  --border-top-width: 2px;
  --border-right-width: 5px;
  --border-bottom-width: 5px;
  --border-left-width: 2px;
  border-color: #ffffff;
  --border-color: #ffffff;
  --border-radius: 20px 20px 20px 20px;
}
.elementor-8
  .elementor-element.elementor-element-c6202f6:not(.elementor-motion-effects-element-type-background),
.elementor-8
  .elementor-element.elementor-element-c6202f6
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer {
  background-color: #0D2D28;
}
.elementor-8 .elementor-element.elementor-element-c6202f6,
.elementor-8 .elementor-element.elementor-element-c6202f6::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-b31475c {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-b31475c.e-con {
  --flex-grow: 0;
  --flex-shrink: 0;
}
.elementor-8 .elementor-element.elementor-element-be94248 {
  text-align: left;
}
.elementor-8 .elementor-element.elementor-element-be94248 img {
  width: 42%;
}
.elementor-8 .elementor-element.elementor-element-e37a88c {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-items:not(.elementor-inline-items)
  .elementor-icon-list-item:not(:last-child) {
  padding-bottom: calc(50px / 2);
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-items:not(.elementor-inline-items)
  .elementor-icon-list-item:not(:first-child) {
  margin-top: calc(50px / 2);
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-items.elementor-inline-items
  .elementor-icon-list-item {
  margin-right: calc(50px / 2);
  margin-left: calc(50px / 2);
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-items.elementor-inline-items {
  margin-right: calc(-50px / 2);
  margin-left: calc(-50px / 2);
}
body.rtl
  .elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-items.elementor-inline-items
  .elementor-icon-list-item:after {
  left: calc(-50px / 2);
}
body:not(.rtl)
  .elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-items.elementor-inline-items
  .elementor-icon-list-item:after {
  right: calc(-50px / 2);
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-icon
  i {
  color: #ffffff;
  transition: color 0.3s;
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-icon
  svg {
  fill: #ffffff;
  transition: fill 0.3s;
}
.elementor-8 .elementor-element.elementor-element-4183ed9 {
  --e-icon-list-icon-size: 34px;
  --icon-vertical-offset: 0px;
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-item
  > .elementor-icon-list-text,
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-item
  > a {
  font-family: "Delicious Handrawn", Sans-serif;
  font-weight: 400;
}
.elementor-8
  .elementor-element.elementor-element-4183ed9
  .elementor-icon-list-text {
  color: #ffffff;
  transition: color 0.3s;
}
.elementor-8 .elementor-element.elementor-element-73750a5 {
  --display: flex;
  --background-transition: 0.3s;
  --margin-top: 50px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-right: 0px;
}
.elementor-8 .elementor-element.elementor-element-d425ec2 img {
  width: 90%;
}
.elementor-8 .elementor-element.elementor-element-b074226 {
  text-align: center;
}
.elementor-8
  .elementor-element.elementor-element-b074226
  .elementor-heading-title {
  color: #ffffff;
  font-family: "Delicious Handrawn", Sans-serif;
  font-size: 39px;
  font-weight: 600;
}
.elementor-8 .elementor-element.elementor-element-4500b61 {
  text-align: center;
}
.elementor-8
  .elementor-element.elementor-element-4500b61
  .elementor-heading-title {
  color: #ffffff;
  font-family: "Delicious Handrawn", Sans-serif;
  font-size: 30px;
  font-weight: 300;
}
.elementor-8 .elementor-element.elementor-element-4d2d5fe {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-f1ebe55 .elementor-button {
  font-family: "Delicious Handrawn", Sans-serif;
  font-size: 16px;
  font-weight: 300;
  fill: #ffffff;
  color: #ffffff;
  background-color: #0D2D28;
  border-style: solid;
  border-width: 2px 5px 5px 2px;
  border-radius: 100px 100px 100px 100px;
}
.elementor-8 .elementor-element.elementor-element-05b7ae1 {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-d872086 {
  --e-image-carousel-slides-to-show: 3;
}
.elementor-8
  .elementor-element.elementor-element-d872086
  .elementor-image-carousel-wrapper
  .elementor-image-carousel
  .swiper-slide-image {
  border-style: solid;
  border-width: 2px 5px 5px 2px;
  border-color: #ffffff;
  border-radius: 20px 20px 20px 20px;
}
.elementor-8 .elementor-element.elementor-element-aae95e2 {
  --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-aae95e2:not(.elementor-motion-effects-element-type-background),
.elementor-8
  .elementor-element.elementor-element-aae95e2
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer {
  background-color: #0D2D28;
}
.elementor-8 .elementor-element.elementor-element-aae95e2,
.elementor-8 .elementor-element.elementor-element-aae95e2::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-d0d9372 {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-07663e0 {
  --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;
  --overlay-opacity: 0.5;
}
.elementor-8
  .elementor-element.elementor-element-07663e0:not(.elementor-motion-effects-element-type-background),
.elementor-8
  .elementor-element.elementor-element-07663e0
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2025/08/2.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.elementor-8 .elementor-element.elementor-element-07663e0::before,
.elementor-8
  .elementor-element.elementor-element-07663e0
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-07663e0
  > .e-con-inner
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-07663e0
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-07663e0
  > .e-con-inner
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-07663e0
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer::before {
  --background-overlay: "";
  background-color: #000000;
}
.elementor-8 .elementor-element.elementor-element-07663e0,
.elementor-8 .elementor-element.elementor-element-07663e0::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-a30a341 {
  --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-6fde230 {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-6fde230.e-con {
  --flex-grow: 0;
  --flex-shrink: 0;
}
.elementor-8 .elementor-element.elementor-element-ba4eb3c {
  text-align: left;
}
.elementor-8
  .elementor-element.elementor-element-ba4eb3c
  .elementor-heading-title {
  color: #ffffff;
  font-family: "Delicious Handrawn", Sans-serif;
  font-size: 30px;
  font-weight: 300;
}
.elementor-8 .elementor-element.elementor-element-9798a37 .elementor-button {
  font-family: "Delicious Handrawn", Sans-serif;
  font-size: 16px;
  font-weight: 300;
  fill: #ffffff;
  color: #ffffff;
  background-color: #0D2D28;
  border-style: solid;
  border-width: 2px 5px 5px 2px;
  border-radius: 100px 100px 100px 100px;
}
.elementor-8 .elementor-element.elementor-element-f2f07f4 img {
  border-style: solid;
  border-width: 2px 5px 5px 2px;
  border-color: #ffffff;
  border-radius: 20px 20px 20px 20px;
}
.elementor-8 .elementor-element.elementor-element-b4e6e72 {
  --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-b4e6e72:not(.elementor-motion-effects-element-type-background),
.elementor-8
  .elementor-element.elementor-element-b4e6e72
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer {
  background-color: #0D2D28;
}
.elementor-8 .elementor-element.elementor-element-b4e6e72,
.elementor-8 .elementor-element.elementor-element-b4e6e72::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-13adf04 {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-19b436d {
  --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;
  --overlay-opacity: 0.5;
}
.elementor-8
  .elementor-element.elementor-element-19b436d:not(.elementor-motion-effects-element-type-background),
.elementor-8
  .elementor-element.elementor-element-19b436d
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2025/08/3.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.elementor-8 .elementor-element.elementor-element-19b436d::before,
.elementor-8
  .elementor-element.elementor-element-19b436d
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-19b436d
  > .e-con-inner
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-19b436d
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-19b436d
  > .e-con-inner
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-19b436d
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer::before {
  --background-overlay: "";
  background-color: #000000;
}
.elementor-8 .elementor-element.elementor-element-19b436d,
.elementor-8 .elementor-element.elementor-element-19b436d::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-21a9863 {
  --display: flex;
  --background-transition: 0.3s;
  --margin-top: 100px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-right: 0px;
}
.elementor-8 .elementor-element.elementor-element-890f2ee img {
  width: 75%;
}
.elementor-8 .elementor-element.elementor-element-c36e23e {
  text-align: center;
}
.elementor-8
  .elementor-element.elementor-element-c36e23e
  .elementor-heading-title {
  color: #ffffff;
  font-family: "Delicious Handrawn", Sans-serif;
  font-size: 30px;
  font-weight: 300;
}
.elementor-8 .elementor-element.elementor-element-e2b100a {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-154b8d5 {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8
  .elementor-element.elementor-element-c83a11d
  > .elementor-widget-container {
  margin: -66px 0px -59px 0px;
}
.elementor-8 .elementor-element.elementor-element-c83a11d img {
  width: 74%;
}
.elementor-8 .elementor-element.elementor-element-de85e29 {
  --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-de85e29:not(.elementor-motion-effects-element-type-background),
.elementor-8
  .elementor-element.elementor-element-de85e29
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer {
  background-color: #0D2D28;
}
.elementor-8 .elementor-element.elementor-element-de85e29,
.elementor-8 .elementor-element.elementor-element-de85e29::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-9470c6e {
  --display: flex;
  --background-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-fa6beea {
  --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;
  --overlay-opacity: 0.5;
}
.elementor-8 .elementor-element.elementor-element-fa6beea::before,
.elementor-8
  .elementor-element.elementor-element-fa6beea
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-fa6beea
  > .e-con-inner
  > .elementor-background-video-container::before,
.elementor-8
  .elementor-element.elementor-element-fa6beea
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-fa6beea
  > .e-con-inner
  > .elementor-background-slideshow::before,
.elementor-8
  .elementor-element.elementor-element-fa6beea
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer::before {
  --background-overlay: "";
  background-color: #000000;
}
.elementor-8 .elementor-element.elementor-element-fa6beea,
.elementor-8 .elementor-element.elementor-element-fa6beea::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-ce19f9c {
  --display: flex;
  --background-transition: 0.3s;
  --margin-top: 100px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-right: 0px;
}
.elementor-8 .elementor-element.elementor-element-8ccc77f img {
  width: 85%;
}
.elementor-8 .elementor-element.elementor-element-878704f {
  --display: flex;
  --background-transition: 0.3s;
  --margin-top: 0px;
  --margin-bottom: 100px;
  --margin-left: 0px;
  --margin-right: 0px;
}
.elementor-8 .elementor-element.elementor-element-75aad57 .elementor-button {
  font-family: "Delicious Handrawn", Sans-serif;
  font-size: 16px;
  font-weight: 300;
  fill: #ffffff;
  color: #ffffff;
  background-color: #0D2D28;
  border-style: solid;
  border-width: 2px 5px 5px 2px;
  border-radius: 100px 100px 100px 100px;
}
.elementor-8 .elementor-element.elementor-element-c3060f1 {
  --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-c3060f1:not(.elementor-motion-effects-element-type-background),
.elementor-8
  .elementor-element.elementor-element-c3060f1
  > .elementor-motion-effects-container
  > .elementor-motion-effects-layer {
  background-color: #0D2D28;
}
.elementor-8 .elementor-element.elementor-element-c3060f1,
.elementor-8 .elementor-element.elementor-element-c3060f1::before {
  --border-transition: 0.3s;
}
.elementor-8 .elementor-element.elementor-element-131da78 {
  --display: flex;
  --background-transition: 0.3s;
}
@media (min-width: 768px) {
  .elementor-8 .elementor-element.elementor-element-b31475c {
    --width: 35.286%;
  }
  .elementor-8 .elementor-element.elementor-element-6fde230 {
    --width: 58.098%;
  }
}
@media (max-width: 767px) {
  .elementor-8 .elementor-element.elementor-element-c6202f6 {
    --justify-content: center;
  }
  .elementor-8 .elementor-element.elementor-element-be94248 {
    text-align: center;
  }
  .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-items:not(.elementor-inline-items)
    .elementor-icon-list-item:not(:last-child) {
    padding-bottom: calc(16px / 2);
  }
  .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-items:not(.elementor-inline-items)
    .elementor-icon-list-item:not(:first-child) {
    margin-top: calc(16px / 2);
  }
  .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-items.elementor-inline-items
    .elementor-icon-list-item {
    margin-right: calc(16px / 2);
    margin-left: calc(16px / 2);
  }
  .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-items.elementor-inline-items {
    margin-right: calc(-16px / 2);
    margin-left: calc(-16px / 2);
  }
  body.rtl
    .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-items.elementor-inline-items
    .elementor-icon-list-item:after {
    left: calc(-16px / 2);
  }
  body:not(.rtl)
    .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-items.elementor-inline-items
    .elementor-icon-list-item:after {
    right: calc(-16px / 2);
  }
  .elementor-8 .elementor-element.elementor-element-4183ed9 {
    --e-icon-list-icon-size: 17px;
  }
  .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-item
    > .elementor-icon-list-text,
  .elementor-8
    .elementor-element.elementor-element-4183ed9
    .elementor-icon-list-item
    > a {
    font-size: 12px;
  }
  .elementor-8
    .elementor-element.elementor-element-b074226
    .elementor-heading-title {
    font-size: 25px;
  }
  .elementor-8
    .elementor-element.elementor-element-4500b61
    .elementor-heading-title {
    font-size: 20px;
  }
  .elementor-8 .elementor-element.elementor-element-cec71cd img {
    width: 100%;
  }
  .elementor-8
    .elementor-element.elementor-element-ba4eb3c
    .elementor-heading-title {
    font-size: 20px;
  }
  .elementor-8 .elementor-element.elementor-element-890f2ee img {
    width: 100%;
  }
  .elementor-8
    .elementor-element.elementor-element-c36e23e
    .elementor-heading-title {
    font-size: 20px;
  }
  .elementor-8 .elementor-element.elementor-element-c83a11d img {
    width: 100%;
  }
  .elementor-8 .elementor-element.elementor-element-8ccc77f img {
    width: 100%;
  }
} /* Start custom CSS for image, class: .elementor-element-f2f07f4 */ /* === Geleng-Geleng – Pure CSS ===
   Pakai: tambahkan class .geleng (loop) atau .geleng-hover (aktif saat hover)
   Opsi kecepatan & sudut: override --geleng-speed & --geleng-angle di elemen/kelas lain
*/

:root {
  --geleng-angle: 10deg; /* besar goyangan */
  --geleng-speed: 0.6s; /* durasi 1 siklus */
  --geleng-ease: ease-in-out;
}

/* Loop terus */
.geleng {
  display: inline-block;
  transform-origin: 50% 12%;
  animation: geleng var(--geleng-speed) var(--geleng-ease) infinite;
  will-change: transform;
}

/* Aktif hanya saat hover */
.geleng-hover {
  display: inline-block;
  transform-origin: 50% 12%;
  will-change: transform;
}
.geleng-hover:hover {
  animation: geleng var(--geleng-speed) var(--geleng-ease) infinite;
}

/* Varian cepat & lambat (opsional) */
.geleng-fast {
  --geleng-speed: 0.35s;
  --geleng-angle: 12deg;
}
.geleng-slow {
  --geleng-speed: 1.2s;
  --geleng-angle: 8deg;
}

/* Efek tambahan (opsional): geleng + sedikit zoom saat hover */
.geleng-zoom:hover,
.geleng.geleng-zoom {
  animation-name: gelengZoom;
}

/* Keyframes */
@keyframes geleng {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(calc(var(--geleng-angle) * 0.6));
  }
  20% {
    transform: rotate(calc(var(--geleng-angle) * -0.6));
  }
  30% {
    transform: rotate(calc(var(--geleng-angle) * 0.45));
  }
  40% {
    transform: rotate(calc(var(--geleng-angle) * -0.45));
  }
  50% {
    transform: rotate(calc(var(--geleng-angle) * 0.3));
  }
  60% {
    transform: rotate(calc(var(--geleng-angle) * -0.3));
  }
  70% {
    transform: rotate(calc(var(--geleng-angle) * 0.15));
  }
  80% {
    transform: rotate(calc(var(--geleng-angle) * -0.15));
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes gelengZoom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  10% {
    transform: rotate(calc(var(--geleng-angle) * 0.6)) scale(1.02);
  }
  20% {
    transform: rotate(calc(var(--geleng-angle) * -0.6)) scale(1.02);
  }
  30% {
    transform: rotate(calc(var(--geleng-angle) * 0.45)) scale(1.015);
  }
  40% {
    transform: rotate(calc(var(--geleng-angle) * -0.45)) scale(1.015);
  }
  50% {
    transform: rotate(calc(var(--geleng-angle) * 0.3)) scale(1.01);
  }
  60% {
    transform: rotate(calc(var(--geleng-angle) * -0.3)) scale(1.01);
  }
  70% {
    transform: rotate(calc(var(--geleng-angle) * 0.15)) scale(1.005);
  }
  80% {
    transform: rotate(calc(var(--geleng-angle) * -0.15)) scale(1.005);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* Hormati preferensi user yang sensitif terhadap motion */
@media (prefers-reduced-motion: reduce) {
  .geleng,
  .geleng-hover:hover,
  .geleng-zoom,
  .geleng-zoom:hover {
    animation: none !important;
  }
} /* End custom CSS */