.elementor-3491 .elementor-element.elementor-element-b1094bd{--display:flex;--min-height:563px;--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-3491 .elementor-element.elementor-element-b1094bd:not(.elementor-motion-effects-element-type-background), .elementor-3491 .elementor-element.elementor-element-b1094bd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-3491 .elementor-element.elementor-element-ca5c510{--display:flex;}.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-3491 .elementor-element.elementor-element-b223031{font-family:"Space Mono", Sans-serif;font-weight:400;color:#FFFFFF;}.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-3491 .elementor-element.elementor-element-6bccc34{width:var( --container-widget-width, 51.493% );max-width:51.493%;--container-widget-width:51.493%;--container-widget-flex-grow:0;}.elementor-3491 .elementor-element.elementor-element-6bccc34.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-3491 .elementor-element.elementor-element-6bccc34 .elementor-heading-title{font-family:"Pirata One", Sans-serif;font-size:102px;font-weight:500;color:#FFFFFF;}.elementor-3491 .elementor-element.elementor-element-48f59fc{width:var( --container-widget-width, 56.506% );max-width:56.506%;--container-widget-width:56.506%;--container-widget-flex-grow:0;font-family:"Space Mono", Sans-serif;font-size:19px;font-weight:400;color:#FFFFFF;}.elementor-3491 .elementor-element.elementor-element-48f59fc.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-3491 .elementor-element.elementor-element-ac1d440{--display:flex;}.elementor-3491 .elementor-element.elementor-element-ac1d440:not(.elementor-motion-effects-element-type-background), .elementor-3491 .elementor-element.elementor-element-ac1d440 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#020201;}.elementor-widget-gallery .elementor-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-gallery .elementor-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.elementor-widget-gallery .elementor-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-3491 .elementor-element.elementor-element-b59ce9b .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-3491 .elementor-element.elementor-element-b59ce9b .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-3491 .elementor-element.elementor-element-b59ce9b{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-3491 .elementor-element.elementor-element-2616307{--display:flex;--min-height:550px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3491 .elementor-element.elementor-element-2616307:not(.elementor-motion-effects-element-type-background), .elementor-3491 .elementor-element.elementor-element-2616307 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-3491 .elementor-element.elementor-element-e0414d0{width:var( --container-widget-width, 85.85% );max-width:85.85%;--container-widget-width:85.85%;--container-widget-flex-grow:0;text-align:center;}.elementor-3491 .elementor-element.elementor-element-e0414d0.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-3491 .elementor-element.elementor-element-e0414d0 .elementor-heading-title{font-family:"Pirata One", Sans-serif;font-size:93px;font-weight:500;color:#FFFFFF;}.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-3491 .elementor-element.elementor-element-fd2aa07 .elementor-button{background-color:#000000;font-family:"Space Mono", Sans-serif;font-size:16px;font-weight:400;border-style:solid;border-color:#FFFFFF;}.elementor-3491 .elementor-element.elementor-element-fd2aa07 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-3491 .elementor-element.elementor-element-fd2aa07 .elementor-button:hover, .elementor-3491 .elementor-element.elementor-element-fd2aa07 .elementor-button:focus{color:#FFFFFF;}.elementor-3491 .elementor-element.elementor-element-fd2aa07 .elementor-button:hover svg, .elementor-3491 .elementor-element.elementor-element-fd2aa07 .elementor-button:focus svg{fill:#FFFFFF;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-3491 .elementor-element.elementor-element-6bccc34{width:var( --container-widget-width, 200.284px );max-width:200.284px;--container-widget-width:200.284px;--container-widget-flex-grow:0;}.elementor-3491 .elementor-element.elementor-element-6bccc34 .elementor-heading-title{font-size:47px;}.elementor-3491 .elementor-element.elementor-element-48f59fc{width:var( --container-widget-width, 267.333px );max-width:267.333px;--container-widget-width:267.333px;--container-widget-flex-grow:0;font-size:12px;}.elementor-3491 .elementor-element.elementor-element-2616307{--min-height:330px;}.elementor-3491 .elementor-element.elementor-element-e0414d0 .elementor-heading-title{font-size:53px;}}/* Start custom CSS for container, class: .elementor-element-b1094bd *//* =========================================================
   HERO "LORD OF SMOKE" - teks kiri, logo kanan (gelap, mono)
   Paste ke: Elementor > Site Settings > Custom CSS
   (atau WP Admin > Appearance > Customize > Additional CSS)

   Prinsip file ini:
   - Font-family dan isi teks TIDAK diatur di sini. Tetap dari panel Elementor.
   - Ukuran, warna, dan jarak di CSS hanya NILAI AWAL (supaya tampilan mirip
     referensi dan rapi di tablet/HP). Kalau kamu atur di panel Elementor
     (Typography, Text Color, Padding, Background, Width), panel yang menang.
     Kalau ukuran teks di panelmu sudah terisi, kosongkan dulu kalau mau
     memakai ukuran awal dari CSS ini.
   - Tidak ada tanda seru-important di kode.
   - Semua widget tetap native Elementor.

   ---------- STRUKTUR & CSS CLASSES (Advanced > CSS Classes, tanpa titik) ----------
   Container paling luar (section hero) ...... dh-hero
     Container kiri (berisi teks) ............ dh-hero__content
       Text Editor "DROP 1 - HEAVY/SLOW/LOUD" . dh-hero__label
       Heading "LORD OF SMOKE" ............... dh-hero__title
       Text Editor deskripsi ................. dh-hero__desc
       Button "VIEW COLLECTION" .............. dh-hero__btn
     Container kanan (berisi gambar) ......... dh-hero__media
       Image (logo mata) ..................... dh-hero__img

   OPSIONAL: di tablet dan HP gambar tampil di bawah teks. Mau gambar di atas
   teks? Class container paling luar jadi:  dh-hero dh-hero--image-first
   ========================================================= */


/* ---------- 1. VARIABEL (ubah di sini) ---------- */
.dh-hero {
  --dh-bg:        #0A0A0A;   /* latar section */
  --dh-text:      #F2F2F2;   /* judul, tombol */
  --dh-soft:      #D0D0D0;   /* label dan deskripsi */
  --dh-line:      #F2F2F2;   /* garis tombol */
  --dh-hair:      #2E2E2E;   /* garis tipis di dasar section */

  --dh-title-size: clamp(3.4rem, 8.2vw, 7.5rem);   /* ukuran judul (mengecil otomatis) */
  --dh-img-max:    560px;                           /* lebar maksimal logo */
}


/* =========================================================
   2. SECTION
   ========================================================= */
.dh-hero.e-con {
  /* nilai awal layout (bisa ditimpa dari panel Elementor) */
  --flex-direction: row;
  --align-items: center;
  --justify-content: space-between;
  --gap: 56px;
  --row-gap: 56px;
  --column-gap: 56px;
  --padding-top: 72px;
  --padding-right: 5vw;
  --padding-bottom: 72px;
  --padding-left: 5vw;
  --min-height: 720px;

  position: relative;
  overflow: hidden;
  min-height: var(--min-height);
  background-color: var(--dh-bg);
  border-bottom: 1px solid var(--dh-hair);
}


/* =========================================================
   3. KOLOM KIRI: TEKS
   ========================================================= */
.dh-hero .dh-hero__content.e-con {
  --flex-direction: column;
  --align-items: flex-start;
  --justify-content: center;
  --gap: 24px;
  --row-gap: 24px;
  --width: 52%;

  flex: 1 1 auto;
  min-width: 0;
}

/* label kecil di atas judul */
.dh-hero .dh-hero__label {
  color: var(--dh-soft);
  font-size: .8rem;
  line-height: 1.5;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.dh-hero .dh-hero__label p,
.dh-hero .dh-hero__desc p {
  margin: 0;
}

/* judul besar */
.dh-hero .dh-hero__title .elementor-heading-title {
  margin: 0;
  color: var(--dh-text);
  font-size: var(--dh-title-size);
  line-height: .98;
}

/* deskripsi */
.dh-hero .dh-hero__desc {
  max-width: 480px;
  color: var(--dh-text);
  font-size: clamp(.88rem, 1.1vw, 1rem);
  line-height: 1.75;
}

/* tombol outline */
.dh-hero .dh-hero__btn {
  margin-top: 4px;
}
.dh-hero .dh-hero__btn .elementor-button {
  padding: 16px 30px;
  background-color: transparent;
  color: var(--dh-text);
  border: 2px solid var(--dh-line);
  border-radius: 0;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.dh-hero .dh-hero__btn .elementor-button:hover,
.dh-hero .dh-hero__btn .elementor-button:focus {
  background-color: var(--dh-text);
  color: var(--dh-bg);
}


/* =========================================================
   4. KOLOM KANAN: GAMBAR
   ========================================================= */
.dh-hero .dh-hero__media.e-con {
  --flex-direction: column;
  --align-items: center;
  --justify-content: center;
  --width: 48%;

  flex: 1 1 auto;
  min-width: 0;
}

.dh-hero .dh-hero__img {
  width: 100%;
  max-width: var(--dh-img-max);
  margin-left: auto;
  margin-right: auto;
}
.dh-hero .dh-hero__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}


/* =========================================================
   5. TABLET (maks 1024px): satu kolom, teks dulu lalu gambar
   ========================================================= */
@media (max-width: 1024px) {
  .dh-hero {
    --dh-title-size: clamp(3.2rem, 11vw, 6rem);
    --dh-img-max: 420px;
  }

  .dh-hero.e-con {
    --flex-direction: column;
    --align-items: stretch;
    --justify-content: flex-start;
    --gap: 40px;
    --row-gap: 40px;
    --padding-top: 56px;
    --padding-right: 40px;
    --padding-bottom: 56px;
    --padding-left: 40px;
    --min-height: 0px;
  }

  .dh-hero .dh-hero__content.e-con,
  .dh-hero .dh-hero__media.e-con {
    --width: 100%;
  }

  .dh-hero .dh-hero__desc {
    max-width: 560px;
  }

  /* opsional: gambar di atas teks */
  .dh-hero--image-first .dh-hero__media.e-con {
    order: -1;
  }
}


/* =========================================================
   6. MOBILE (maks 767px)
   ========================================================= */
@media (max-width: 767px) {
  .dh-hero {
    --dh-title-size: clamp(3rem, 17vw, 4.6rem);
    --dh-img-max: 300px;
  }

  .dh-hero.e-con {
    --gap: 32px;
    --row-gap: 32px;
    --padding-top: 44px;
    --padding-right: 20px;
    --padding-bottom: 48px;
    --padding-left: 20px;
  }

  .dh-hero .dh-hero__content.e-con {
    --gap: 20px;
    --row-gap: 20px;
  }

  .dh-hero .dh-hero__label {
    font-size: .7rem;
    letter-spacing: .2em;
  }

  .dh-hero .dh-hero__desc {
    font-size: .9rem;
    line-height: 1.7;
  }

  /* tombol selebar kolom di HP */
  .dh-hero .dh-hero__btn,
  .dh-hero .dh-hero__btn .elementor-button {
    width: 100%;
  }
  .dh-hero .dh-hero__btn .elementor-button {
    box-sizing: border-box;
    justify-content: center;
    padding: 15px 20px;
  }
}


/* hormati pengguna yang mematikan animasi di perangkatnya */
@media (prefers-reduced-motion: reduce) {
  .dh-hero .dh-hero__btn .elementor-button {
    transition: none;
  }
}

/* =========================================================
   7. LOGO MATA: cincin berputar, mata diam
   ========================================================= */

/* Wrapper gambar: patokan posisi, melayang, glow */
.dh-hero .dh-hero__img {
  --dh-ring-color: #f2f2f2;
  --dh-ring-soft: rgba(242, 242, 242, .75);
  --dh-ring-w: 2px;

  position: relative;
  animation:
    dh-eye-float 6s ease-in-out infinite,
    dh-eye-glow 4s ease-in-out infinite;
}

/* Gambar: hanya bagian mata (cincin bawaan PNG disembunyikan) */
.dh-hero .dh-hero__img img {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 72.5%, transparent 73.5%);
          mask-image: radial-gradient(circle closest-side, #000 72.5%, transparent 73.5%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: dh-eye-in 1.2s cubic-bezier(.2, .7, .2, 1) both;
}

/* Dasar dua cincin */
.dh-hero .dh-hero__img::before,
.dh-hero .dh-hero__img::after {
  content: "";
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Cincin luar + 4 garis crosshair (putar searah jarum jam) */
.dh-hero .dh-hero__img::before {
  inset: 3%;
  border: var(--dh-ring-w) solid var(--dh-ring-color);
  background:
    linear-gradient(var(--dh-ring-color), var(--dh-ring-color)) top center / var(--dh-ring-w) 12.5% no-repeat border-box,
    linear-gradient(var(--dh-ring-color), var(--dh-ring-color)) bottom center / var(--dh-ring-w) 12.5% no-repeat border-box,
    linear-gradient(var(--dh-ring-color), var(--dh-ring-color)) left center / 12.5% var(--dh-ring-w) no-repeat border-box,
    linear-gradient(var(--dh-ring-color), var(--dh-ring-color)) right center / 12.5% var(--dh-ring-w) no-repeat border-box;
  animation:
    dh-ring-in 1.2s ease both,
    dh-ring-spin 40s linear infinite;
}

/* Lingkaran putus-putus (putar berlawanan arah) */
.dh-hero .dh-hero__img::after {
  inset: 12.4%;
  border: 1px dashed var(--dh-ring-soft);
  animation:
    dh-ring-in 1.2s ease both,
    dh-ring-spin 60s linear infinite reverse;
}

@keyframes dh-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dh-ring-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dh-eye-in {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dh-eye-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes dh-eye-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .12)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255, 255, 255, .4)); }
}

/* Mobile: garis lebih tipis, gerakan lebih kecil */
@media (max-width: 767px) {
  .dh-hero .dh-hero__img {
    --dh-ring-w: 1.5px;
  }

  .dh-hero .dh-hero__img::before {
    animation-duration: 1.2s, 50s;
  }

  .dh-hero .dh-hero__img::after {
    animation-duration: 1.2s, 75s;
  }
}

/* Matikan animasi buat yang pakai reduce motion */
@media (prefers-reduced-motion: reduce) {
  .dh-hero .dh-hero__img,
  .dh-hero .dh-hero__img img,
  .dh-hero .dh-hero__img::before,
  .dh-hero .dh-hero__img::after {
    animation: none;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac1d440 *//* =========================================================
   HEAVY HAZE - GALERI (Elementor Pro "Gallery", widget default)
   Tanpa !important. Layout, kolom, dan jarak dari panel.
   CSS hanya mengatur sudut, hover, dan tanda "+".
   ========================================================= */

/* ---------- 1. CONTAINER ---------- */
.hh-gallery-wrap.e-con {
  --flex-direction: column;
  --align-items: stretch;
  --padding-top: 80px;
  --padding-right: 48px;
  --padding-bottom: 80px;
  --padding-left: 48px;
}

/* ---------- 2. VARIABEL ---------- */
.hh-gallery.elementor-widget {
  --hh-radius: 12px;   /* sudut bulat (0 = kotak) */
  --hh-card:   #1b1b1b;
}

/* Jarak awal (kalau Spacing di panel kosong). Panel yang menang */
.hh-gallery .e-gallery-container {
  --hgap: 8px;
  --vgap: 8px;
}

/* ---------- 3. KARTU ---------- */
.hh-gallery .e-gallery-item {
  overflow: hidden;
  background-color: var(--hh-card);
  border-radius: var(--hh-radius);
}

/* ---------- 4. FOTO ---------- */
.hh-gallery .e-gallery-image {
  transition: transform 0.6s ease;
}

.hh-gallery .e-gallery-item:hover .e-gallery-image {
  transform: scale(1.06);
}

/* ---------- 5. TANDA "+" SAAT DISENTUH ---------- */
.hh-gallery .e-gallery-item::after {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background-color: rgba(10, 10, 10, 0.65);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.hh-gallery .e-gallery-item:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================
   TABLET (<= 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .hh-gallery-wrap.e-con {
    --padding-top: 60px;
    --padding-right: 30px;
    --padding-bottom: 60px;
    --padding-left: 30px;
  }

  .hh-gallery.elementor-widget {
    --hh-radius: 10px;
  }

  .hh-gallery .e-gallery-container {
    --hgap: 6px;
    --vgap: 6px;
  }
}

/* =========================================================
   MOBILE (<= 767px)
   ========================================================= */
@media (max-width: 767px) {
  .hh-gallery-wrap.e-con {
    --padding-top: 40px;
    --padding-right: 16px;
    --padding-bottom: 40px;
    --padding-left: 16px;
  }

  .hh-gallery.elementor-widget {
    --hh-radius: 8px;
  }

  .hh-gallery .e-gallery-item::after {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    font-size: 18px;
  }
}

/* Layar sentuh: nggak ada hover, jadi tanda "+" dan zoom dimatikan */
@media (hover: none) {
  .hh-gallery .e-gallery-item::after {
    display: none;
  }

  .hh-gallery .e-gallery-item:hover .e-gallery-image {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hh-gallery .e-gallery-image,
  .hh-gallery .e-gallery-item::after {
    transition: none;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2616307 *//* =========================================================
   HEAVY HAZE - CTA "WEAR THE NOISE."
   ========================================================= */

/* ---------- Container ---------- */
.hh-cta.e-con {
  --flex-direction: column;
  --align-items: center;
  --justify-content: center;
  --gap: 36px 36px;
  --padding-top: 160px;
  --padding-right: 40px;
  --padding-bottom: 160px;
  --padding-left: 40px;
  --min-height: 520px;

  position: relative;
  min-height: var(--min-height);
  text-align: center;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}

/* ---------- Judul ---------- */
.hh-cta__title .elementor-heading-title {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 7rem);
  line-height: 1;
  text-align: center;
  text-wrap: balance;
  animation: hh-cta-in 1s cubic-bezier(.2, .7, .2, 1) both;
}

/* ---------- Tombol ---------- */
.hh-cta__btn .elementor-button {
  padding: 18px 38px;
  border-width: 3px;
  border-style: solid;
  border-radius: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.hh-cta__btn .elementor-button:hover,
.hh-cta__btn .elementor-button:focus {
  background-color: #ffffff;
  color: #0a0a0a;
  transform: translateY(-3px);
}

/* Ikon panah geser pelan saat hover */
.hh-cta__btn .elementor-button-icon {
  transition: transform 0.25s ease;
}

.hh-cta__btn .elementor-button:hover .elementor-button-icon {
  transform: translateX(6px);
}

@keyframes hh-cta-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET (<= 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .hh-cta.e-con {
    --gap: 30px 30px;
    --padding-top: 120px;
    --padding-right: 30px;
    --padding-bottom: 120px;
    --padding-left: 30px;
    --min-height: 420px;
  }

  .hh-cta__title .elementor-heading-title {
    font-size: clamp(2.6rem, 9vw, 5rem);
  }

  .hh-cta__btn .elementor-button {
    padding: 16px 32px;
  }
}

/* =========================================================
   MOBILE (<= 767px)
   ========================================================= */
@media (max-width: 767px) {
  .hh-cta.e-con {
    --gap: 26px 26px;
    --padding-top: 90px;
    --padding-right: 20px;
    --padding-bottom: 90px;
    --padding-left: 20px;
    --min-height: 340px;
  }

  .hh-cta__title .elementor-heading-title {
    font-size: clamp(2.4rem, 13vw, 3.6rem);
    line-height: 1.05;
  }

  /* Tombol selebar kolom di HP */
  .hh-cta__btn.elementor-widget {
    width: 100%;
    max-width: 320px;
  }

  .hh-cta__btn .elementor-button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: 15px 20px;
    font-size: 14px;
  }
}

/* Hormati pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
  .hh-cta__title .elementor-heading-title,
  .hh-cta__btn .elementor-button,
  .hh-cta__btn .elementor-button-icon {
    animation: none;
    transition: none;
  }
}/* End custom CSS */