.elementor-16 .elementor-element.elementor-element-65ba9cc{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-1846ac0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-16 .elementor-element.elementor-element-4ad07af{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-c5cf63d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-16 .elementor-element.elementor-element-9a01134{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16 .elementor-element.elementor-element-4e929e2{--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-16 .elementor-element.elementor-element-cfa5ffd{--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;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-abda754{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -30px) 0px;}.elementor-16 .elementor-element.elementor-element-a8bd724{--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;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16 .elementor-element.elementor-element-f0d230e{--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;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16 .elementor-element.elementor-element-b9e1ce2{--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;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16 .elementor-element.elementor-element-f652a3e{--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;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-16 .elementor-element.elementor-element-4e929e2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-1846ac0 *//* =========================================
   RESET GAP ANTAR SECTION
   ========================================= */

/* Pastikan tidak ada margin antar section */
.section-keunggulan {
  margin-bottom: 0 !important;
  padding-bottom: 90px;
}

.section-produk {
  margin-top: 0 !important;
  padding-top: 90px;
}

/* =========================================
   FULL WIDTH BLEED (HILANGKAN FRAME PUTIH)
   ========================================= */

/* Paksa section jadi full width */
.section-produk {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Hilangkan padding container Elementor */
.section-produk .elementor-container,
.section-produk .elementor-column-gap-default {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Pastikan body & wrapper tidak bocor putih */
html, body {
  background-color: #0b1220;
  overflow-x: hidden;
}

/* =========================================
   JAGA KONTEN TETAP TENGAH
   ========================================= */

.produk-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c5cf63d *//* ======================================================
   SECTION KEUNGGULAN — PREMIUM POLISH
   ====================================================== */

/* Background lebih dalam & cinematic */
.section-keunggulan {
  background:
    radial-gradient(
      1200px 400px at 50% -200px,
      rgba(255,255,255,0.06),
      transparent 70%
    ),
    linear-gradient(
      to bottom,
      rgba(11,18,32,0.94),
      rgba(11,18,32,0.99)
    );
}

/* Divider dari hero lebih subtle */
.section-keunggulan::before {
  opacity: 0.6;
}

/* ======================================================
   HEADER — LEBIH MAHAL & TENANG
   ====================================================== */
.keunggulan-header {
  margin-bottom: 72px;
}

.keunggulan-title {
  font-size: 38px;
  letter-spacing: -0.4px;
}

.keunggulan-desc {
  max-width: 620px;
  opacity: 0.9;
}

/* ======================================================
   GRID — RHYTHM & BREATHING SPACE
   ====================================================== */
.keunggulan-grid {
  column-gap: 32px;
  row-gap: 38px;
}

/* ======================================================
   CARD — FLOATING GLASS PREMIUM
   ====================================================== */
.keunggulan-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.075),
      rgba(255,255,255,0.02)
    );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow:
    0 25px 55px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition:
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.45s cubic-bezier(.2,.8,.2,1),
    background 0.45s ease;
}

/* Hover sangat halus (kelas enterprise) */
.keunggulan-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.1),
      rgba(255,255,255,0.03)
    );
}

/* ======================================================
   ICON — DEPTH & ACCENT LUXURY
   ====================================================== */
.keunggulan-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(230,182,92,0.35),
      rgba(230,182,92,0.15)
    );
  box-shadow:
    0 12px 26px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
  font-size: 21px;
}

/* ======================================================
   TYPOGRAPHY — CLEAN & CORPORATE
   ====================================================== */
.keunggulan-card h3 {
  letter-spacing: -0.2px;
}

.keunggulan-card p {
  opacity: 0.9;
}

/* ======================================================
   MOBILE — TETAP PREMIUM, TIDAK RAMAI
   ====================================================== */
@media (max-width: 768px) {

  .keunggulan-title {
    font-size: 30px;
  }

  .keunggulan-header {
    margin-bottom: 56px;
  }

  .keunggulan-card {
    border-radius: 18px;
  }
}
/* ======================================================
   GLOBAL: RAPATKAN JARAK ANTAR SECTION (DESKTOP + MOBILE)
   ====================================================== */

/* 1) Reset margin bawaan block/section supaya tidak numpuk */
main section,
.elementor-section,
.wp-block-group,
.wp-block-cover {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 2) Spacing standar antar section (auto responsif) */
:root{
  --sec-y: clamp(56px, 6vw, 90px);  /* jarak vertikal default */
  --sec-y-tight: clamp(42px, 4.5vw, 72px); /* versi lebih rapat */
}

/* Terapkan spacing default ke semua section di main (aman) */
main > section{
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}

/* Kalau ada wrapper group di WP yang jadi "section", rapikan juga */
main > .wp-block-group,
main > .wp-block-cover{
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}

/* ======================================================
   KHUSUS: SECTION KLIEN (biar gak kejauhan)
   ====================================================== */
.section-klien{
  /* sebelumnya 110px 20px 120px -> terlalu tinggi */
  padding: var(--sec-y-tight) 20px var(--sec-y-tight) !important;
}

/* Header jangan terlalu jauh ke carousel */
.section-klien .klien-header{
  margin: 0 auto clamp(26px, 3.4vw, 44px) !important;
}

/* ======================================================
   MOBILE: lebih rapat lagi
   ====================================================== */
@media (max-width: 768px){
  :root{
    --sec-y: clamp(42px, 7vw, 66px);
    --sec-y-tight: clamp(36px, 6vw, 56px);
  }

  main > section,
  main > .wp-block-group,
  main > .wp-block-cover{
    padding-top: var(--sec-y);
    padding-bottom: var(--sec-y);
  }

  .section-klien{
    padding: var(--sec-y-tight) 18px var(--sec-y-tight) !important;
  }
}
/* ===============================
   KEUNGGULAN — CENTER VERSION
   =============================== */

/* grid tetap */
.keunggulan-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* card rata tengah */
.keunggulan-card{
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* icon di tengah */
.keunggulan-icon{
  margin: 0 auto 14px !important;
}

/* judul & desc rata tengah */
.keunggulan-card h3,
.keunggulan-card p{
  text-align: center !important;
}

/* biar paragraf rapi dan tidak kepanjangan */
.keunggulan-card p{
  max-width: 260px;
}

/* tablet */
@media (max-width: 1024px){
  .keunggulan-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile */
@media (max-width: 768px){
  .keunggulan-grid{
    grid-template-columns: 1fr;
  }
  .keunggulan-card p{
    max-width: 320px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0f932c8 *//* =========================================
   FIX JARAK ANTAR SECTION
   ========================================= */

/* KEUNGGULAN → PRODUK */
.section-keunggulan {
  padding-bottom: 60px !important; /* sebelumnya terlalu besar */
  margin-bottom: 0 !important;
}

/* PRODUK SECTION */
.section-produk {
  padding-top: 60px !important;   /* dipersempit */
  margin-top: 0 !important;
}
/* =========================================
   CTA MOBILE: TEXT CENTER + HOVER KONTRAS
   Target: tombol CTA yang bentuknya pill/box
   ========================================= */

/* Pakai .elementor-16 .elementor-element.elementor-element-0f932c8 yang aman:
   - hero CTA: .hero-btn-primary / .hero-btn-secondary
   - produk CTA utama: .produk-main-cta (kalau kamu pakai)
   Kalau CTA kamu beda class-nya, ganti .elementor-16 .elementor-element.elementor-element-0f932c8 di bawah sesuai class tombolmu.
*/

/* 1) Default: pastikan teks selalu center */
.hero-btn-primary,
.hero-btn-secondary,
.produk-main-cta{
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* Jika tombol punya icon + teks, tetap rapi di center */
.hero-btn-secondary,
.produk-main-cta{
  display: inline-flex;
}

/* 2) MOBILE: teks rata tengah, line-break tetap center */
@media (max-width: 768px){
  .hero-btn-primary,
  .hero-btn-secondary,
  .produk-main-cta{
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;

    text-align: center !important;
    justify-content: center !important;
  }

  /* biar caption 2 baris tetap center */
  .hero-btn-secondary span,
  .produk-main-cta{
    text-align: center !important;
    line-height: 1.35;
  }
}

/* 3) HOVER: jangan biru gelap (naikkan kontras)
      - background dibuat lebih terang
      - teks dibuat putih/emas tetap kebaca
*/
.hero-btn-secondary:hover,
.produk-main-cta:hover{
  background: rgba(230,182,92,0.14) !important;          /* lebih terang */
  border-color: rgba(230,182,92,0.65) !important;
  transform: translateY(-1px);
}

/* teks tetap kontras saat hover */
.hero-btn-secondary:hover span,
.produk-main-cta:hover{
  color: #FFF !important;                                 /* kontras */
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

/* kalau ada icon svg ikut terang */
.hero-btn-secondary:hover svg{
  filter: brightness(1.15);
}
/* ======================================================
   FIX HOVER: semua hyperlink di SECTION PRODUK
   - hover tidak gelap
   - kontras tetap terbaca
   ====================================================== */
.section-produk a{
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    filter .22s ease;
}

/* Default hover untuk SEMUA link di section:
   jangan gelap, cukup "naik" sedikit + lebih terang */
.section-produk a:hover{
  filter: brightness(1.12);
}

/* =========================================
   1) Link teks kecil (contoh: .produk-cta)
   -> jangan pakai background gelap, cukup underline + warna lebih terang
   ========================================= */
.section-produk .produk-cta{
  color: #E6B65C;
}

.section-produk .produk-cta:hover{
  filter: none;
  color: #FFD58A;                 /* lebih terang */
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================================
   2) Link yang bentuknya tombol/pill (CTA utama)
   -> hover dibuat terang + kontras teks putih
   ========================================= */
.section-produk .produk-main-cta:hover,
.section-produk a.btn:hover,
.section-produk a.button:hover{
  filter: none;
  background: rgba(230,182,92,0.14) !important;   /* terang, bukan gelap */
  border-color: rgba(230,182,92,0.65) !important;
  color: #FFFFFF !important;                       /* kontras */
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}

/* Focus keyboard (aksesibilitas) */
.section-produk a:focus-visible{
  outline: 3px solid rgba(230,182,92,0.45);
  outline-offset: 3px;
  border-radius: 12px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c621f74 *//* ======================================================
   SECTION LOGO KLIEN — FORCE FIX (ELEMENTOR SAFE)
   ====================================================== */
.section-klien {
  position: relative;
  padding: 110px 20px 120px;
  background: linear-gradient(
    to bottom,
    rgba(11,18,32,1),
    rgba(11,18,32,0.98)
  );
  color: #ffffff;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===============================
   GRID & ITEM
   =============================== */
.section-klien .klien-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 36px;
  align-items: center;
}

.section-klien .klien-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  transition: all 0.35s ease;
}

/* ===============================
   LOGO NORMAL — PASTI TERLIHAT
   =============================== */
.section-klien .klien-logo img {
  max-width: 120px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;

  /* FORCE TERANG */
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;

  transition: all 0.35s ease;
}

/* ===============================
   HOVER — PUTIH & ASLI
   =============================== */
.section-klien .klien-logo:hover {
  background: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.section-klien .klien-logo:hover img {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.05);
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width: 768px) {
  .section-klien {
    padding: 80px 18px 90px;
  }

  .section-klien .klien-logo img {
    max-width: 100px;
    max-height: 40px;
  }
}/* End custom CSS */