/* ==========================================================================
   iLANDING ATOMIK GRADIENT VARIABLES (:ROOT)
   ========================================================================== */
:root {
  /* 1. iLanding Brand Premium */
  --il_hr0: #ffffff0;
  --il_hr1: #eff7ff;
  --il_hr2: #f2f9ff;
  --il_hr3: #e9f4ff;
  --il_hr4: #e1efff;
  --il_hr5: #f1f7fc;
  --il_hr6: #cedff1;
  --il_hr7: #9fbcdb;

  /* 2. Purde Brand Premium */
  --il_pd01: #2c7aff;
  --il_pd02: #e9f1ff;

  --il_pd11: #52edb5;
  --il_pd12: #e1f8ed;
  --il_pd21: #7eb2ff;
  --il_pd22: #ecebfd;
  --il_pd31: #b77eff;
  --il_pd32: #ecf7ff;
  --il_pd41: #efe37a;
  --il_pd42: #ffecec;

  --il_pd51: #e0eafa;
  --il_pd52: #ecebfd;
  --il_pd53: #ecf3f3;
  --il_pd54: #fcfbf7;

  --il_pd61: #52edb5;
  --il_pd62: #7eb2ff;
  --il_pd63: #b67efe;
  --il_pd64: #efe37a;

  --il_pd71: #f3bbbc;
  --il_pd72: #fff6c4;
  --il_pd73: #f6f7f7;
  --il_pd74: #d9d7d1;  

}

/* Pola Komposisi Sesuai Request */
.g4il_hr-1234 { background: linear-gradient(135deg, var(--il_hr1), var(--il_hr2), var(--il_hr3), var(--il_hr4)); }
.g4il_hr-4444 { background: linear-gradient(135deg, var(--il_hr4), var(--il_hr4), var(--il_hr4), var(--il_hr4)); }
.g4il_hr-6666 { background: linear-gradient(135deg, var(--il_hr6), var(--il_hr6), var(--il_hr6), var(--il_hr6)); }

.g4il_pd-32 { background: linear-gradient(135deg, var(--il_pd62), var(--il_pd54), var(--il_pd54), var(--il_pd62)); }

/* Kelas Gradien 4 Warna Purde Premium (g4il_pd-32) */

/* Animasi pergerakan gradien */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Kelas Gradien 4 Warna Purde Premium + Efek Animasi */
.g4il_pd-32515253 {
  background: linear-gradient(-45deg, var(--il_pd32), var(--il_pd51), var(--il_pd52), var(--il_pd53)) !important;
  background-size: 400% 400% !important;
  animation: gradientMove 15s ease infinite !important;
}



/* Gradien 4 Warna - Variasi 1: Ocean Breeze */
.gradient4-ocean {
  background: linear-gradient(135deg, #007bff, #17a2b8, #20c997, #28a745);
}

/* Gradien 4 Warna - Variasi 2: Sunset */
.gradient4-sunset {
  /*background: linear-gradient(135deg, #fd7e14, #ffc107, #dc3545, #e83e8c);*/
  background: linear-gradient(135deg, #fd7e14, #ffc107, #fd7e14, #dc3545);
}

/* Gradien 4 Warna - Variasi 3: Galaxy */
.gradient4-galaxy {
  background: linear-gradient(135deg, #6610f2, #6f42c1, #e83e8c, #fd7e14);
}

/* Gradien 4 Warna - Variasi 4: Forest */
.gradient4-forest {
  background: linear-gradient(135deg, #28a745, #20c997, #17a2b8, #007bff);
}

/* Gradien 4 Warna - Variasi 5: Aurora */
.gradient4-aurora {
  background: linear-gradient(135deg, #00d2ff, #3a7bd5, #00d2ff, #3a7bd5);
}

/* Gradien 4 Warna - Variasi 6: Fire */
.gradient4-fire {
  background: linear-gradient(135deg, #ff0000, #ff7300, #fffb00, #48ff00);
}

/* Gradien 4 Warna - Variasi 7: Ocean Deep */
.gradient4-ocean-deep {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364, #00d2ff);
}

/* Gradien 4 Warna - Variasi 8: Berry */
.gradient4-berry {
  background: linear-gradient(135deg, #ff0844, #ffb199, #ff0844, #ffb199);
}

/* Gradien 4 Warna - Variasi 9: Mint (tambahan) */
.gradient4-mint {
  background: linear-gradient(135deg, #00b09b, #96c93d, #00b09b, #96c93d);
}


/* ==========================================================================
   Tambahan Gradien 4 Warna yang Mendukung Tema & Branding iLanding (Premium Corporate)
   ========================================================================== */

/* Variasi 10: iLanding Premium Corporate (Biru Utama, Deep Navy, Indigo, Soft Cyan) */
.gradient4-ilanding-premium {
  background: linear-gradient(135deg, #0d83fd, #1e40af, #6366f1, #22d3ee);
}

/* Variasi 11: iLanding Deep Night (Sangat elegan untuk section dark-background / Footer) */
.gradient4-ilanding-dark {
  background: linear-gradient(135deg, #031b33, #0b2545, #134074, #0d83fd);
}

/* Variasi 12: iLanding Soft Tech (Gradien bersih, sangat cocok untuk background section terang) */
.gradient4-ilanding-light {
  background: linear-gradient(135deg, #f3f9ff, #e8f3ff, #e0f2fe, #f0fdfa);
}

/* Variasi 13: iLanding Fresh Teal (Kombinasi Biru Brand dengan Hijau Toska Finansial Modern) */
.gradient4-ilanding-fresh {
  background: linear-gradient(135deg, #0d83fd, #06b6d4, #10b981, #059669);
}





/* Stepper Container */
.stepper-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: 20px;
  flex-wrap: nowrap;
}

/* Garis Penghubung di Belakang Lingkaran */
.stepper-wrapper::before {
  content: "";
  position: absolute;
  top: 18px; /* Menyesuaikan posisi vertikal garis tepat di tengah lingkaran */
  left: 20px;
  right: 20px;
  height: 2px;
  background-color: #dee2e6;
  z-index: 1;
}

/* Item Per Langkah */
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 2; /* Agar lingkaran berada di atas garis */
  text-align: center;
}

/* Bulatan Angka / Stepper Counter */
.stepper-item .step-counter {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #0d6efd; /* Menyesuaikan warna utama Bootstrap */
  color: #0d6efd;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Efek Hover Tipis Biar Terlihat Interaktif */
.stepper-item:hover .step-counter {
  background-color: #0d6efd;
  color: #ffffff;
}

/* Teks Label di Bawah Bulatan */
.stepper-item .step-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #495057;
  margin-top: 8px;
  padding: 0 4px;
}

/* Kustomisasi Khusus untuk Step Sinkronisasi Akhir (FAST Bro) */
.stepper-item.step-sync .step-counter {
  animation: pulse-sync 2s infinite;
}

@keyframes pulse-sync {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* Responsive Breakpoint: Otomatis Menjadi Vertikal di Layar HP */
@media (max-width: 576px) {
  .stepper-wrapper {
    flex-direction: column;
    padding-left: 20px;
  }
  
  .stepper-wrapper::before {
    top: 20px;
    bottom: 20px;
    left: 38px;
    width: 2px;
    height: auto;
  }
  
  .stepper-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 15px;
  }
  
  .stepper-item .step-name {
    margin-top: 0;
    margin-left: 15px;
    text-align: left;
  }
}



/* Tweak Khusus untuk Efek Marquee Tanpa Patah-Patah */
.swiper-marquee .swiper-wrapper {
  /* Memaksa transisi pergerakan slide berjalan linear (konstan), bukan ease-out */
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}


/* Optimasi Performa Rendering Browser (Hardware Acceleration) */
.swiper-marquee .swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  
  /* KUNCI PERBAIKAN: Memaksa lebar slide mengikuti ukuran gambar asli agar tidak 0px */
  width: auto !important; 
}

/* Sentuhan estetika ala Midtrans: Logo monokrom, menyala saat di-hover */
.clients .swiper-marquee .swiper-slide img {
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all 0.3s ease;
  
  /* Atur tinggi maksimal logo agar seragam dan rapi (opsional, sesuaikan kebutuhan) */
  height: 35px;
  width: auto;
}

.clients .swiper-marquee .swiper-slide img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Wrapper Tambahan untuk Marquee Dua Baris */
.clients-wrapper-double {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Jarak antar baris atas dan bawah */
}

@media (max-width: 576px) {
  .clients-wrapper-double {
    gap: 1rem; /* Jarak lebih rapat sedikit ketika di HP */
  }
}


.card-premium-blur {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05) !important;
}




/* ==========================================================================
   Efek Bingkai Melayang untuk Stats Row
   ========================================================================== */
.stats-row.stats-border-only {
  border: 2px solid var(--il_pd21); /* Garis bingkai menggunakan warna iLanding premium */
  border-radius: 16px;            /* Lekukan sudut bingkai agar rapi */
  padding: 32px 24px;             /* Jarak ruang di dalam bingkai */
  box-shadow: none !important;    /* Memastikan tidak ada bayangan */
  transform: none !important;     /* Memastikan tidak melayang ke atas */
}