/*
@File: Digiform, penyesuaian template Zinka

Berkas ini hanya berisi gaya tambahan untuk bagian halaman yang tidak tersedia
pada template bawaan, plus koreksi tempat template bawaan gagal memenuhi
kontras dan aksesibilitas. Warna, tipografi, dan bentuk mengikuti
assets/css/style.css agar tampilannya tetap satu kesatuan.

CATATAN KEPUTUSAN (alasan satu baris tiap pilihan utama)

  Warna    Biru #0061d5 dan oranye #f97316 ditetapkan pemilik produk dengan
           rujukan box.com, jadi keduanya dipakai apa adanya sebagai warna
           merek. Turunan yang lebih gelap hanya dibuat untuk teks dan bidang
           berteks putih, karena warna mereknya sendiri belum memenuhi WCAG AA
           pada ukuran teks biasa. Di mode gelap arah koreksinya dibalik.
  Turunan  Oranye: #f97316 dipakai rata untuk semua bidang berwarna oranye,
           yaitu tombol, tab aktif, lencana, garis tepi kartu paket, ikon,
           logo, dan pemutar pramuat. Turunan gelap hanya tersisa untuk teks,
           #bf4a10 di latar terang (5,00:1) dan #ffa273 di latar gelap
           (8,56:1 di #1d1d1d), karena teks perlu rasio yang tidak bisa
           dipenuhi warna mereknya.
  Kontras  Label putih di atas tombol #f97316 hanya 2,80:1, di bawah WCAG AA.
           Itu keputusan pemilik produk setelah tiga pilihan diperlihatkan.
           Sisa halaman tetap memenuhi AA; lihat catatan rasio tiap blok.
           Biru: #0061d5 sebagai inti (5,72:1 dua arah dengan putih), #004aa8
           dan #00408f untuk ujung gelap gradien, #7fb4ff untuk mode gelap.
  Palet    Dua warna inti (biru #0061d5, biru tua #2a284f) + satu aksen oranye.
           Netral tidak dihitung. Tidak ada hue keempat.
  Visual   Mock UI produk, bukan ilustrasi stok: ilustrasi umum tidak
           menjelaskan apa pun tentang aplikasi inspeksi lapangan.
  Ikon     Digambar khusus per kartu; set bawaan template dibuat untuk agensi
           SEO sehingga tidak nyambung dengan isinya.
  Tata     Komposisi tiap seksi sengaja berbeda (banner + mock, deret angka,
  letak    tab, langkah bernomor, seksi gelap berchip, kartu, baris chip,
           dua kolom, tabel harga, tanya jawab dua kolom, panel penutup).
  Kartu    Kartu dalam satu seksi dibuat seragam karena isinya memang setara;
           membedakannya akan menyiratkan hierarki yang tidak ada.
  Gerak    Satu motif saja (apung pelan) di kartu status banner, untuk
           memisahkannya dari kartu formulir yang diam. Dimatikan bila
           pengguna meminta gerak minimal.
  Tema     Sakelar terang/gelap disediakan karena produk dipakai di lantai
           produksi yang terang dan ruang kontrol yang gelap.
  Bentuk   Radius mengikuti template: pil untuk tombol, 20px untuk kartu,
           12px untuk chip. Bukan pil untuk semua.

  Dial: ENERGY 2 / RHYTHM 2 / MOTION 2
  (MOTION 2 karena ada satu gerak ambien di kartu status banner,
   bukan sekadar keadaan hover. Selebihnya hanya transisi.)
*/

/*================================
Pengumuman
===================================*/
/* Pengumuman adalah informasi sekunder, jadi latarnya tidak berwarna: pita
   selebar layar di posisi paling atas menarik mata lebih kuat daripada judul
   halaman. Latarnya disamakan dengan badan halaman dan pemisahnya cukup satu
   garis rambut, supaya bagian atas halaman tidak terlihat pucat. */
.announce-bar {
  background-color: #ffffff;
  border-bottom: 1px solid #ebeef3;
  position: relative;
  z-index: 3;
}
.announce-bar .announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 9px 45px 9px 15px;
  text-align: center;
}
.announce-bar p {
  margin-bottom: 0;
  font-size: 15px;
}
/* Tautan ini teks, bukan bidang, jadi memakai turunan teks #bf4a10 (5,00:1)
   dan bukan oranye merek yang hanya 2,80:1 di atas putih. */
.announce-bar .announce-link {
  color: #bf4a10;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid rgba(191, 74, 16, 0.45);
}
.announce-bar .announce-link:hover {
  color: #2a284f;
  border-bottom-color: #2a284f;
}
.announce-bar .announce-close {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  color: #4a382e;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

/*================================
Daftar centang (dipakai ulang di beberapa bagian)
===================================*/
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: #6c6c6c;
}
.check-list li:last-child {
  margin-bottom: 0;
}
.check-list li i {
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 20px;
  color: #f97316;
}

/*================================
Banner: penyesuaian judul dan daftar poin ringkas
===================================*/
.banner-content .title {
  height: auto;
  min-height: 42px;
  line-height: 1.4;
  padding: 0 20px 0 0;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.banner-content .title span {
  top: 0;
  padding: 6px 0;
}
.banner-content h1 {
  font-size: 64px;
}
.banner-content .banner-list {
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 25px;
}
.banner-content .banner-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: #2a284f;
}
.banner-content .banner-list li i {
  position: absolute;
  left: 0;
  top: 5px;
  color: #f97316;
  font-size: 18px;
}

/*================================
Modul: tab
===================================*/
.module-area {
  position: relative;
  background-color: #f9f9f9;
}
.module-tab .tabs {
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.module-tab .tabs li a {
  display: block;
  padding: 10px 26px;
  border-radius: 50px;
  background-color: #ffffff;
  color: #2a284f;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(42, 40, 79, 0.07);
  transition: 0.5s;
}
.module-tab .tabs li a:hover {
  color: #f97316;
}
.module-tab .tabs li.current a {
  background-color: #f97316;
  color: #ffffff;
}
.module-tab .tab_content {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(42, 40, 79, 0.07);
}
.module-tab .tab_content h3 {
  font-size: 28px;
  color: #0061d5;
  margin-bottom: 15px;
}
.module-tab .tab_content .module-link {
  display: inline-block;
  margin-top: 20px;
  font-weight: 700;
  color: #f97316;
}
.module-tab .tab_content .module-link i {
  position: relative;
  top: 3px;
}
.module-tab .tab_content .module-link:hover {
  color: #0061d5;
}
.module-tab .module-img img {
  border-radius: 20px;
}

/*================================
Kartu fitur dan templat: tinggi seragam
===================================*/
.service-widget-area .service-card {
  height: calc(100% - 30px);
}
.service-widget-area .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/*================================
Skenario penerapan
===================================*/
.scenario-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 35px 30px;
  margin-bottom: 30px;
  height: calc(100% - 30px);
  box-shadow: 0 10px 40px rgba(42, 40, 79, 0.07);
  transition: 0.5s;
}
.scenario-card:hover {
  transform: translateY(-5px);
}
.scenario-card .scenario-tag {
  display: inline-block;
  padding: 4px 18px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #f97316;
  background-color: #fef4f0;
  margin-bottom: 15px;
}
.scenario-card h3 {
  font-size: 22px;
  color: #0061d5;
  margin-bottom: 12px;
}
.scenario-card .check-list {
  margin-top: 18px;
}

/*================================
Jenis field
===================================*/
.field-area {
  background-color: #2a284f;
  position: relative;
}
.field-area .section-title h2,
.field-area .field-content h3 {
  color: #ffffff;
}
.field-area .field-content p {
  color: #d5d4e2;
}
.field-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.field-chips li {
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 15px;
  transition: 0.5s;
}
.field-chips li:hover {
  border-color: #f97316;
  background-color: rgba(255, 57, 0, 0.14);
}

/*================================
Integrasi
===================================*/
.integration-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.integration-list li {
  padding: 14px 30px;
  border-radius: 12px;
  background-color: #ffffff;
  color: #2a284f;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(42, 40, 79, 0.07);
  transition: 0.5s;
}
.integration-list li:hover {
  color: #f97316;
  transform: translateY(-4px);
}

/*================================
Keamanan
===================================*/
.security-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.security-list li {
  position: relative;
  padding: 22px 25px 22px 70px;
  border-radius: 15px;
  background-color: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 8px 30px rgba(42, 40, 79, 0.07);
}
.security-list li:last-child {
  margin-bottom: 0;
}
.security-list li i {
  position: absolute;
  left: 25px;
  top: 25px;
  font-size: 26px;
  color: #f97316;
}
.security-list li b {
  display: block;
  font-size: 18px;
  color: #0061d5;
  margin-bottom: 4px;
}
.security-list li span {
  display: block;
  color: #6c6c6c;
}
.security-content .specs {
  padding: 18px 22px;
  border-left: 3px solid #f97316;
  background-color: #ffffff;
  border-radius: 0 12px 12px 0;
  margin-bottom: 25px;
}

/*================================
Paket
===================================*/
.pricing-card .plan-for {
  min-height: 54px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #cbdcf5;
}
.pricing-card .plan-badge-slot {
  min-height: 30px;
  margin-top: 10px;
}
.pricing-card .plan-badge {
  display: inline-block;
  padding: 3px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  background-color: #ffffff;
}
/* Ketiga kartu paket bawaan template berlatar pastel: biru muda, krem, dan
   abu. Ketiganya disamakan menjadi putih supaya seksi harga tidak terlihat
   pucat dan tidak ada satu kartu yang warnanya menyendiri. Paket yang
   disarankan ditandai garis tepi terakota, bukan blok warna, sehingga
   penekanannya justru lebih jelas daripada sebelumnya. */
.pricing-card .pricing-card-into.color-bg1,
.pricing-card .pricing-card-into.color-bg2,
.pricing-card .pricing-card-into.color-bg3 {
  background-color: #ffffff;
}
.pricing-card:has(.color-bg2) {
  border-style: solid;
  border-color: #f97316;
}
/* Lencana perlu bidang sendiri agar terbaca sebagai lencana di atas putih. */
.pricing-card .plan-badge.color-2 {
  border: 1px solid #f7c6ae;
}
/* Mode gelap: kartu mengikuti permukaan kartu lain, bukan blok putih. */
.theme-dark .pricing-card .pricing-card-into.color-bg1,
.theme-dark .pricing-card .pricing-card-into.color-bg2,
.theme-dark .pricing-card .pricing-card-into.color-bg3 {
  background-color: #252525;
}
.plans-note {
  max-width: 780px;
  margin: 30px auto 0;
  text-align: center;
}

/*================================
Ajakan penutup
===================================*/
/* Gradien biru diredam sekaligus teksnya dicerahkan, sehingga #f0f6ff mendapat
   9,08:1 di ujung gelap dan 5,27:1 di ujung terang. */
.cta-area {
  background-image: linear-gradient(to right, #00408f, #0061d5);
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
}
.cta-area h2 {
  color: #ffffff;
  font-size: 40px;
  margin-bottom: 15px;
}
.cta-area p {
  color: #f0f6ff;
  max-width: 720px;
  margin: 0 auto 25px;
}
.cta-area .cta-note {
  font-size: 15px;
  margin-top: 25px;
  margin-bottom: 0;
}
.cta-area .cta-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.cta-area .cta-btn .light-btn {
  padding: 12px 30px;
  border-radius: 50px;
  background-color: #ffffff;
  color: #0061d5;
  font-weight: 600;
  transition: 0.5s;
}
/* Sorot tombol memakai oranye merek, sama seperti tombol lain di halaman.
   Teks putih di atasnya 2,80:1, mengikuti keputusan warna tombol. */
.cta-area .cta-btn .light-btn:hover {
  background-color: #f97316;
  color: #ffffff;
}
.cta-area .cta-btn .ghost-btn {
  padding: 12px 30px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-weight: 600;
  transition: 0.5s;
}
.cta-area .cta-btn .ghost-btn:hover {
  background-color: #ffffff;
  color: #0061d5;
}

/*================================
Kaki halaman
===================================*/
.footer-tagline {
  margin-bottom: 20px;
  padding-top: 10px;
}

/*================================
Lewati ke konten utama
===================================*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background-color: #0061d5;
  color: #ffffff;
}
.skip-link:focus {
  left: 0;
  color: #ffffff;
}

/*================================
Mode gelap
===================================*/
.theme-dark .module-area {
  background-color: #1d1d1d;
}
.theme-dark .module-tab .tabs li a,
.theme-dark .module-tab .tab_content,
.theme-dark .scenario-card,
.theme-dark .integration-list li,
.theme-dark .security-list li,
.theme-dark .security-content .specs {
  background-color: #252525;
  color: #ffffff;
}
.theme-dark .module-tab .tabs li.current a {
  background-color: #f97316;
}
.theme-dark .check-list li,
.theme-dark .banner-content .banner-list li {
  color: #f1f1f1;
}
/* Template bawaan tidak menyiapkan varian gelap untuk pil di banner. */
.theme-dark .banner-content .title {
  border-color: rgba(255, 255, 255, 0.35);
}
.theme-dark .banner-content .title span {
  color: #ffffff;
}
.theme-dark .scenario-card .scenario-tag {
  background-color: #1d1d1d;
}
.theme-dark .footer-tagline {
  color: #ffffff;
}

/*================================
Layar kecil
===================================*/
@media only screen and (max-width: 991px) {
  .module-tab .tab_content {
    padding: 30px 22px;
  }
  .module-tab .module-img {
    margin-top: 30px;
  }
  .cta-area {
    padding: 45px 22px;
  }
  .cta-area h2 {
    font-size: 30px;
  }
  .banner-content h1 {
    font-size: 42px;
  }
  .security-list {
    margin-top: 30px;
  }
  .field-chips {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 575px) {
  .banner-content h1 {
    font-size: 32px;
  }
  .announce-bar .announce-inner {
    padding-right: 40px;
    font-size: 14px;
  }
  .integration-list li {
    padding: 10px 20px;
    font-size: 15px;
  }
}


/*================================
Visual produk (mock UI)
Kartu-kartu ini menggambarkan layar Digiform yang sebenarnya (pengisian,
antrean luring, laporan cetak, dasbor, alur persetujuan). Dipakai menggantikan
ilustrasi stok karena ilustrasi umum tidak menjelaskan apa pun tentang produk.
Variabel dilingkup di .dgf-mock supaya tidak bocor ke gaya template.
===================================*/
.dgf-mock {
  --m-blue-50: #eff5fd;
  --m-blue-100: #dbe8fa;
  --m-blue-200: #bcd4f0;
  --m-blue-500: #3d7fd1;
  --m-blue-600: #0061d5;
  --m-blue-700: #0050b4;
  --m-blue-900: #00306e;
  --m-accent: #f97316;
  --m-accent-2: #ea6a0c;
  --m-accent-50: #fff2ed;
  --m-ink: #1a1b1e;
  --m-ink-2: #3a3d45;
  --m-muted: #6c6c6c;
  --m-muted-2: #949aa5;
  --m-soft: #f6f8fb;
  --m-line: #e3e8f0;
  --m-line-2: #eef1f7;
  --m-ok: #0a7d55;
  --m-warn: #d98207;
  --m-bad: #c62828;
  --m-r-sm: 10px;
  --m-r-md: 14px;
  --m-r-lg: 20px;
  --m-r-xl: 26px;
  --m-r-full: 999px;
  --m-sh-sm: 0 1px 2px rgba(26, 27, 30, 0.06), 0 1px 3px rgba(26, 27, 30, 0.04);
  --m-sh-md: 0 8px 24px -12px rgba(26, 27, 30, 0.16), 0 2px 6px -3px rgba(26, 27, 30, 0.06);
  --m-sh-lg: 0 28px 60px -28px rgba(26, 27, 30, 0.28), 0 8px 20px -12px rgba(26, 27, 30, 0.12);
  --m-sh-blue: 0 14px 30px -14px rgba(0, 97, 213, 0.32);
  color: var(--m-ink);
  line-height: 1.5;
}

/* Wadah visual di banner: menggantikan .banner-img bawaan template.
   Padding atas/bawah menyisakan ruang agar kartu status yang melayang jatuh
   di luar badan mock, bukan menutupi judul formulir atau tombol kirim. */
.dgf-hero-visual {
  position: absolute;
  top: 150px;
  right: 7%;
  width: min(30vw, 360px);
  padding: 74px 0 66px;
  z-index: 1;
}
/* Kartu melayang digeser ke dalam supaya tidak terpotong tepi layar,
   dan diberi jarak agar tidak menutupi judul formulir atau tombol kirim. */
.dgf-hero-visual .floaty--sync {
  left: -14%;
}
.dgf-hero-visual .floaty--alert {
  top: 52%;
  right: -13%;
}
.dgf-hero-visual .floaty--chart {
  left: -17%;
}

/* Wadah visual di dalam panel modul. */
.module-tab .dgf-mock {
  max-width: 420px;
  margin-left: auto;
}

.dgf-mock .chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--m-r-full); font-size: .68rem; font-weight: 700; }
.dgf-mock .chip--green { background: #ECFDF5; color: #047857; }
/* Mock produk */
/* Ruang atas/bawah disisakan agar kartu melayang jatuh di luar badan mock,
   bukan menutupi judul form atau tombol kirim. */

.dgf-mock .mock {
  border-radius: var(--m-r-xl); background: #fff;
  border: 1px solid var(--m-line); box-shadow: var(--m-sh-lg);
  overflow: hidden;
}
.dgf-mock .mock--form { width: min(100%, 380px); margin-inline: auto; }
.dgf-mock .mock__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; background: var(--m-soft); border-bottom: 1px solid var(--m-line-2);
}
.dgf-mock .mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #E2E8F0; }
.dgf-mock .mock__bar i:first-child { background: #FCA5A5; }
.dgf-mock .mock__bar i:nth-child(2) { background: #FDE68A; }
.dgf-mock .mock__bar i:nth-child(3) { background: #86EFAC; }
.dgf-mock .mock__bar span { margin-left: 8px; color: var(--m-muted-2); font-size: .68rem; font-weight: 600; }
.dgf-mock .mock__body { padding: 18px; display: grid; gap: 11px; }
.dgf-mock .mock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dgf-mock .mock__title { font-size: .9375rem; font-weight: 750; letter-spacing: -.01em; }
.dgf-mock .mock__sub { color: var(--m-muted-2); font-size: .7rem; font-weight: 550; }
.dgf-mock .mock__row { display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; color: var(--m-muted); }
.dgf-mock .mock__row b { color: var(--m-ink); font-weight: 700; }
.dgf-mock .mock__track { height: 7px; border-radius: var(--m-r-full); background: var(--m-line-2); overflow: hidden; }
.dgf-mock .mock__track i { display: block; height: 100%; border-radius: inherit; background: var(--m-blue-500); }
.dgf-mock .mock__track i.warn { background: var(--m-warn); }
.dgf-mock .mock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.dgf-mock .mock__tile {
  display: grid; place-items: center; gap: 5px; padding: 12px 6px;
  border: 1px dashed var(--m-line); border-radius: var(--m-r-md);
  background: var(--m-soft); color: var(--m-muted); font-size: .68rem; font-weight: 650;
}
.dgf-mock .mock__tile svg { width: 18px; height: 18px; stroke: var(--m-blue-500); }
.dgf-mock .mock__sign { border: 1px solid var(--m-line-2); border-radius: var(--m-r-md); padding: 6px 10px; }
.dgf-mock .mock__sign svg { width: 100%; height: 26px; fill: none; stroke: var(--m-ink-2); stroke-width: 2; stroke-linecap: round; }
.dgf-mock .mock__submit {
  margin-top: 2px; padding: 11px; border-radius: var(--m-r-full);
  background: var(--m-blue-600); color: #fff; text-align: center;
  font-size: .84rem; font-weight: 700; box-shadow: var(--m-sh-blue);
}

.dgf-mock .floaty {
  position: absolute; z-index: 2; max-width: 216px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--m-line); border-radius: var(--m-r-lg); box-shadow: var(--m-sh-md);
}
.dgf-mock .floaty > div:not(.spark) { display: grid; }
.dgf-mock .floaty b { font-size: .8125rem; font-weight: 750; }
.dgf-mock .floaty span { color: var(--m-muted); font-size: .7rem; }
.dgf-mock .floaty__ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.dgf-mock .floaty__ico svg { width: 15px; height: 15px; stroke-width: 2.6; }
.dgf-mock .floaty__ico.ok { background: #ECFDF5; color: #0a7d55; }
.dgf-mock .floaty__ico.warn { background: var(--m-accent-50); color: var(--m-accent); }
.dgf-mock .floaty--sync { top: 0; left: -5%; }
.dgf-mock .floaty--alert { top: 62%; right: -9%; }
.dgf-mock .floaty--chart { bottom: 0; left: -7%; display: grid; gap: 8px; max-width: 160px; }
.dgf-mock .floaty__cap { color: var(--m-muted); font-size: .68rem; font-weight: 650; }
.dgf-mock .spark { display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.dgf-mock .spark i { width: 9px; border-radius: 3px; background: linear-gradient(180deg, var(--m-blue-500), var(--m-blue-200)); }
.dgf-mock .spark i:last-child { background: linear-gradient(180deg, var(--m-accent-2), #FDBA74); }

/* Mock UI di dalam pane */
.dgf-mock .ui {
  border-radius: var(--m-r-lg); border: 1px solid var(--m-line);
  background: #fff; box-shadow: var(--m-sh-md); overflow: hidden; min-height: 300px;
}
.dgf-mock .ui--builder { display: grid; grid-template-columns: 92px minmax(0, 1fr) 118px; }
.dgf-mock .ui__side, .dgf-mock .ui__props { padding: 14px 10px; display: grid; gap: 7px; align-content: start; background: var(--m-soft); }
.dgf-mock .ui__props { border-left: 1px solid var(--m-line-2); }
.dgf-mock .ui__side { border-right: 1px solid var(--m-line-2); }
.dgf-mock .ui__side-title { color: var(--m-muted-2); font-size: .6rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.dgf-mock .ui__side i {
  display: block; padding: 8px 10px; border-radius: 9px; background: #fff;
  border: 1px solid var(--m-line); color: var(--m-ink-2); font-size: .72rem; font-weight: 650; font-style: normal;
}
.dgf-mock .ui__side i.drag { border-color: var(--m-blue-200); background: var(--m-blue-50); color: var(--m-blue-700); box-shadow: var(--m-sh-sm); transform: translateX(6px) rotate(-2deg); }
.dgf-mock .ui__canvas { padding: 16px; display: grid; gap: 12px; align-content: start; }
.dgf-mock .ui__field { display: grid; gap: 6px; }
.dgf-mock .ui__field span { color: var(--m-muted); font-size: .72rem; font-weight: 650; }
.dgf-mock .ui__input { height: 32px; border-radius: 9px; border: 1px solid var(--m-line); background: var(--m-soft); }
.dgf-mock .ui__input--sm { width: 46%; }
.dgf-mock .ui__input--tall { height: 58px; }
.dgf-mock .ui__field--drop {
  min-height: 54px; display: grid; place-items: center;
  border: 2px dashed var(--m-blue-200); border-radius: var(--m-r-md); background: var(--m-blue-50);
}
.dgf-mock .ui__field--drop span { color: var(--m-blue-600); }
.dgf-mock .ui__prop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dgf-mock .ui__prop span { color: var(--m-muted); font-size: .7rem; font-weight: 600; }
.dgf-mock .ui__prop .sw { width: 26px; height: 15px; border-radius: var(--m-r-full); background: #D8DEE9; position: relative; font-style: normal; }
.dgf-mock .ui__prop .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.dgf-mock .ui__prop .sw.on { background: var(--m-blue-600); }
.dgf-mock .ui__prop .sw.on::after { left: auto; right: 2px; }
.dgf-mock .ui__prop .box {
  min-width: 32px; padding: 2px 6px; border-radius: 7px; background: #fff;
  border: 1px solid var(--m-line); color: var(--m-ink-2); font-size: .68rem; font-weight: 700; font-style: normal; text-align: center;
}

.dgf-mock .ui--phone { display: grid; place-items: center; padding: 26px; background: linear-gradient(160deg, #EEF3FF, #F8FAFC); }
.dgf-mock .phone {
  width: min(100%, 268px); padding: 16px 14px 18px; display: grid; gap: 10px;
  background: #fff; border-radius: 26px; border: 1px solid var(--m-line); box-shadow: var(--m-sh-lg);
}
.dgf-mock .phone__notch { width: 62px; height: 5px; border-radius: var(--m-r-full); background: #E2E8F0; margin: 0 auto 4px; }
.dgf-mock .phone__status { display: flex; align-items: center; gap: 7px; color: var(--m-accent); font-size: .72rem; font-weight: 700; }
.dgf-mock .dot-off { width: 8px; height: 8px; border-radius: 50%; background: var(--m-accent-2); box-shadow: 0 0 0 4px rgba(249, 115, 22, .18); }
.dgf-mock .phone__card {
  display: grid; gap: 2px; padding: 11px 12px; border-radius: var(--m-r-md);
  border: 1px solid var(--m-line); background: var(--m-soft);
}
.dgf-mock .phone__card b { font-size: .8125rem; font-weight: 700; }
.dgf-mock .phone__card span { color: var(--m-muted); font-size: .68rem; }
.dgf-mock .phone__card i { font-style: normal; font-size: .62rem; font-weight: 750; }
.dgf-mock .phone__card i.q { color: var(--m-accent); }
.dgf-mock .phone__card i.ok { color: #0a7d55; }
.dgf-mock .phone__card.done { background: #F0FDF4; border-color: #BBF7D0; }
.dgf-mock .phone__sync {
  margin-top: 4px; padding: 10px; border-radius: var(--m-r-full); text-align: center;
  background: var(--m-blue-600); color: #fff; font-size: .78rem; font-weight: 700;
}

.dgf-mock .ui--paper { position: relative; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, #F1F5F9, #FAFBFD); }
.dgf-mock .paper { width: min(100%, 300px); padding: 18px; display: grid; gap: 12px; background: #fff; border: 1px solid var(--m-line); box-shadow: var(--m-sh-md); }
.dgf-mock .paper__head { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 2px solid var(--m-ink); }
.dgf-mock .paper__head b { font-size: .875rem; font-weight: 800; }
.dgf-mock .paper__head span { color: var(--m-muted); font-size: .68rem; }
.dgf-mock .paper__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dgf-mock .paper__kpis i { display: grid; gap: 1px; padding: 8px; border-radius: 9px; background: var(--m-soft); font-style: normal; }
.dgf-mock .paper__kpis b { font-size: .875rem; font-weight: 800; }
.dgf-mock .paper__kpis span { color: var(--m-muted); font-size: .58rem; }
.dgf-mock .paper__table { display: grid; gap: 3px; }
.dgf-mock .paper__table .tr { display: grid; grid-template-columns: 1fr 1fr .6fr; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: .68rem; color: var(--m-ink-2); }
.dgf-mock .paper__table .th { background: var(--m-ink); color: #fff; font-weight: 700; }
.dgf-mock .paper__table .tr:not(.th) { background: var(--m-soft); }
.dgf-mock .paper__table .bad { background: #FEF2F2; color: #b3261e; font-weight: 650; }
.dgf-mock .paper__foot { display: grid; gap: 4px; justify-items: start; padding-top: 8px; border-top: 1px dashed var(--m-line); }
.dgf-mock .paper__foot i { width: 78px; height: 22px; border-bottom: 1.5px solid var(--m-ink-2); }
.dgf-mock .paper__foot span { color: var(--m-muted); font-size: .6rem; }
.dgf-mock .badge-pdf {
  position: absolute; right: 18px; bottom: 18px;
  padding: 7px 13px; border-radius: var(--m-r-full);
  background: var(--m-bad); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 12px 24px -12px rgba(239, 68, 68, .8);
}

.dgf-mock .ui--ai { padding: 22px; display: grid; gap: 18px; align-content: center; background: linear-gradient(160deg, #F7F5FF, #F8FAFC); }
.dgf-mock .ask { display: grid; gap: 8px; }
.dgf-mock .ask__q, .dgf-mock .ask__a { padding: 11px 14px; border-radius: 14px; font-size: .8125rem; }
.dgf-mock .ask__q { background: #fff; border: 1px solid var(--m-line); color: var(--m-ink); font-weight: 600; justify-self: start; border-bottom-left-radius: 4px; }
.dgf-mock .ask__a { background: #0061d5; color: #fff; justify-self: end; border-bottom-right-radius: 4px; box-shadow: 0 14px 28px -18px rgba(41, 102, 190, .55); }
.dgf-mock .bars { display: flex; align-items: flex-end; gap: 12px; height: 110px; padding: 0 6px; }
.dgf-mock .bars i { position: relative; flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--m-blue-500), #A5C4FB); }
.dgf-mock .bars i.hot { background: linear-gradient(180deg, var(--m-accent-2), #FDBA74); }
.dgf-mock .bars em { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; color: var(--m-muted); font-size: .62rem; font-style: normal; font-weight: 700; }
.dgf-mock .donut {
  width: 84px; height: 84px; border-radius: 50%; justify-self: end; display: grid; place-items: center;
  background: conic-gradient(var(--m-blue-600) 0 96%, #E2E8F0 96% 100%);
  margin-top: 12px;
}
.dgf-mock .donut span {
  width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; color: var(--m-blue-700);
}

.dgf-mock .ui--flow { padding: 22px; display: grid; gap: 12px; align-content: center; background: linear-gradient(160deg, #F8FAFC, #FFF); }
.dgf-mock .step-row { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: var(--m-r-md); border: 1px solid var(--m-line); background: #fff; box-shadow: var(--m-sh-sm); }
.dgf-mock .step-row div { display: grid; }
.dgf-mock .step-row b { font-size: .84rem; font-weight: 700; }
.dgf-mock .step-row span { color: var(--m-muted); font-size: .72rem; }
.dgf-mock .st { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--m-soft); color: var(--m-muted); font-size: .72rem; font-weight: 800; }
.dgf-mock .st.ok { background: #ECFDF5; color: #0a7d55; }
.dgf-mock .st.now { background: var(--m-blue-600); color: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }


/* Mock di panel modul memakai tinggi lebih ringkas daripada di banner. */
.module-tab .dgf-mock .ui {
  min-height: 0;
}

@media only screen and (max-width: 1199px) {
  .dgf-hero-visual {
    top: 190px;
    right: 2%;
    width: min(34vw, 340px);
  }
}

@media only screen and (max-width: 991px) {
  .dgf-hero-visual {
    position: static;
    width: min(100%, 400px);
    margin: 0 auto 60px;
  }
  .module-tab .dgf-mock {
    margin: 30px auto 0;
  }
}

/* Kartu melayang menumpuk di layar sempit, jadi disembunyikan di bawah 576px. */
@media only screen and (max-width: 575px) {
  .dgf-mock .floaty {
    display: none;
  }
}

/* Ikon garis di dalam mock: satu aturan dasar, bukan atribut per-SVG. */
.dgf-mock svg[viewBox="0 0 24 24"] {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Gerak: satu motif saja (apung pelan), dipakai untuk memisahkan kartu status
   yang melayang dari kartu formulir yang diam di belakangnya. Bukan dekorasi
   di setiap elemen. Dimatikan bila pengguna meminta gerak minimal. */
@keyframes dgf-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.dgf-mock .float-a { animation: dgf-floaty 7s ease-in-out infinite; }
.dgf-mock .float-b { animation: dgf-floaty 6s ease-in-out 0.4s infinite; }
.dgf-mock .float-c { animation: dgf-floaty 8s ease-in-out 0.8s infinite; }
.dgf-mock .float-d { animation: dgf-floaty 6.6s ease-in-out 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .dgf-mock .float-a,
  .dgf-mock .float-b,
  .dgf-mock .float-c,
  .dgf-mock .float-d {
    animation: none;
  }
}

/*================================
Ikon fitur
Digambar khusus untuk isi tiap kartu (formulir, sinkron luring, impor
spreadsheet, anomali, ekspor, lonceng, QR, audit, API, dan seterusnya).
Ikon bawaan template dibuat untuk agensi SEO sehingga tidak menjelaskan apa pun
di halaman ini. Dua warna: biru untuk bentuk utama, oranye untuk detail yang
menandai fungsinya. Konsisten di semua kartu, jadi ikon terbaca sebagai satu set.
===================================*/
.dgf-icon {
  display: inline-block;
  margin-bottom: 20px;
  line-height: 0;
}
.dgf-icon svg {
  width: 66px;
  height: 66px;
}
.dgf-icon .s,
.dgf-icon .a {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dgf-icon .s {
  stroke: #0061d5;
}
.dgf-icon .a {
  stroke: #f97316;
}
.theme-dark .dgf-icon .s {
  stroke: #7fb4ff;
}

/*================================
Fokus keyboard
Template mematikan garis fokus (button:focus{outline:0} dan outline:none pada
.default-btn / .purchase-btn) tanpa menggantinya, jadi navigasi Tab tidak
terlihat sama sekali. Cincin ganda kuning di dalam dan gelap di luar tetap
terbaca di atas latar putih, biru tua, maupun tombol oranye.
===================================*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent; /* terlihat di mode kontras paksa Windows */
  outline-offset: 0;
  box-shadow: 0 0 0 3px #ffd400, 0 0 0 6px #101114;
  border-radius: 3px;
}
.switch-box input:focus-visible + .slider {
  box-shadow: 0 0 0 3px #ffd400, 0 0 0 6px #101114;
}

/* Submenu terbuka lewat hover saja, sehingga sepuluh tautan di dalamnya tidak
   pernah bisa dicapai dengan Tab. :focus-within membukanya juga saat difokus. */
.main-nav nav .navbar-nav .nav-item:focus-within ul {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

/*================================
Kontrol yang kini memakai elemen semantik
Tab dan judul akordeon dulunya <a href="#"> dan <a href="javascript:void(0)">.
Keduanya bukan tautan (tidak menuju ke mana pun), jadi diganti <button> agar
terbaca benar oleh pembaca layar dan aktif dengan Enter maupun Spasi.
===================================*/
.module-tab .tabs li button {
  display: block;
  padding: 10px 26px;
  border: none;
  border-radius: 50px;
  background-color: #ffffff;
  color: #2a284f;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(42, 40, 79, 0.07);
  transition: 0.5s;
}
.module-tab .tabs li button:hover {
  color: #f97316;
}
.module-tab .tabs li button[aria-selected="true"] {
  background-color: #f97316;
  color: #ffffff;
}
.theme-dark .module-tab .tabs li button {
  background-color: #252525;
  color: #ffffff;
}
.theme-dark .module-tab .tabs li button[aria-selected="true"] {
  background-color: #f97316;
}
/* Panel tab tidak perlu cincin fokus: ia difokus lewat skrip, bukan oleh Tab. */
.module-tab .tabs_item:focus {
  outline: none;
}

.faq-accordion .accordion .accordion-title {
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.theme-dark .faq-accordion .accordion .accordion-title {
  color: #ffffff;
}
/* Jawaban disejajarkan dengan pertanyaannya. Bawaan template memberi indent
   30px pada isi sementara judulnya 20px, sehingga teks jawaban terlihat
   bergeser sedikit ke kanan. Batas kanannya mengikuti kolom ikon chevron
   supaya baris jawaban tidak berakhir di bawah ikon. */
.faq-accordion .accordion .accordion-content {
  padding: 0 60px 20px 20px;
}
/* Margin bawah bawaan paragraf membuat ruang di bawah jawaban hampir dua kali
   ruang di atas pertanyaan; dihapus agar padding kartunya yang menentukan. */
.faq-accordion .accordion .accordion-content p:last-child {
  margin-bottom: 0;
}

/*================================
Preloader dan tombol ke atas
Keduanya dulu diatur jQuery lewat gaya sebaris. Sekarang lewat kelas supaya
tidak ada ketergantungan pustaka.
===================================*/
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#toTop {
  border: none;
  padding: 0;
}
#toTop.is-on {
  display: inline-block;
}

/* Template menampilkan panel tab lewat `.tab .tabs_item:first-child{display:block}`,
   yang mengabaikan atribut [hidden]. Akibatnya panel pertama selalu terlihat dan
   panel lain tidak pernah muncul walau tab diklik. Visibilitas dikembalikan ke
   [hidden] supaya status yang dibaca pembaca layar sama dengan yang terlihat. */
.module-tab .tab_content .tabs_item {
  display: none;
}
.module-tab .tab_content .tabs_item:not([hidden]) {
  display: block;
}

/*================================
Kontras teks (WCAG AA)
Aksen grafis #f97316 masih terlalu terang untuk teks: di atas putih hanya
2,80:1, sementara teks normal butuh 4,5:1. Untuk teks dan bidang berteks
putih dipakai turunan yang lebih gelap dari hue yang sama. Ikon dan garis
dekoratif tetap #f97316 karena elemen grafis cukup 3:1.
Diukur, bukan dikira: lihat catatan rasio di tiap blok.
===================================*/

/* Teks oranye di latar terang: 5,00:1 di putih, 4,62:1 di #fef4f0. */
.section-title span,
.module-tab .tab_content .module-link,
.scenario-card .scenario-tag,
.module-tab .tabs li button:hover,
.integration-list li:hover,
.announce-bar .announce-link:hover {
  color: #bf4a10;
}

/* Tombol berteks putih: gradien oranye gelap, 6,05:1 di ujung gelap dan
   4,72:1 di ujung terang. */
.default-btn,
.default-btn-two,
.banner-btn .get-btn,
.nav-add-btn .nav-menu-btn,
.pricing-card .purchase-btn,
.module-tab .tabs li button[aria-selected="true"],
.top-btn {
  background-color: #f97316;
}
.default-btn i {
  color: #bf4a10;
}

/* Pengumuman berlatar putih, jadi teksnya tetap gelap: 18,9:1 untuk teks
   dan 6,05:1 untuk tautannya. */
.announce-bar p,
.announce-bar .announce-close {
  color: #101114;
}

/* Mode gelap: #0061d5 hanya 2,68:1 di atas #252525. */
.theme-dark .module-tab .tab_content h3,
.theme-dark .scenario-card h3,
.theme-dark .security-list li b {
  color: #7fb4ff;
}

/* Tombol navbar dideklarasikan template dengan selector panjang, jadi override
   di atas kalah spesifik. Rasio sama: 6,05:1 dan 4,72:1 dengan teks putih. */
.main-nav nav .side-nav .side-item .nav-menu-btn,
.side-nav-responsive .side-nav-inner .side-nav .nav-menu-btn {
  background-color: #f97316;
}

/* Di seksi biru tua, oranye gelap justru tenggelam (2,77:1). Di latar gelap
   arah koreksinya terbalik: oranye dicerahkan sampai 7,04:1. */
.field-area .section-title span {
  color: #ffa273;
}

/* Kartu paket "Tim" memakai .color-2 (#f97316) untuk judul, badge, dan
   keterangan: 2,80:1. Disamakan dengan warna teks aksen lain. */
.pricing-card .pricing-card-into h3.color-2,
.pricing-card .plan-for.color-2,
.pricing-card .plan-badge.color-2 {
  color: #bf4a10;
}

/* Tombol hero memakai selector .banner-content .banner-btn .get-btn (0,3,0),
   lebih spesifik daripada .banner-btn .get-btn di blok sebelumnya. */
.banner-content .banner-btn .get-btn {
  background-color: #f97316;
}

/*================================
Kontras mode gelap
Koreksi di mode terang menggelapkan aksen; di latar gelap arahnya terbalik.
Nilai di bawah diukur terhadap #1d1d1d (badan) dan #252525 (kartu):
oranye #ffa273 = 8,56 / 7,79 · biru #7fb4ff = 7,93 / 7,21 · abu #b9b9b9 = 8,59 / 7,81.
===================================*/
.theme-dark .section-title span,
.theme-dark .module-tab .tab_content .module-link,
.theme-dark .scenario-card .scenario-tag,
.theme-dark .pricing-card .pricing-card-into h3.color-2,
.theme-dark .pricing-card .plan-for.color-2,
.theme-dark .pricing-card .plan-badge.color-2 {
  color: #ffa273;
}
.theme-dark .pricing-card .pricing-card-into h3.color-1,
.theme-dark .pricing-card .plan-for.color-1,
.theme-dark .pricing-card .pricing-card-into h3.color-3,
.theme-dark .pricing-card .plan-for.color-3,
.theme-dark .faq-area .section-title p a {
  color: #7fb4ff;
}
.theme-dark .security-list li span,
.theme-dark .check-list li {
  color: #b9b9b9;
}
/* Badge paket di mode gelap: latar putih bawaan template membuat teks oranye
   terang jadi tidak terbaca, jadi latarnya ikut digelapkan. */
.theme-dark .pricing-card .plan-badge {
  background-color: #1d1d1d;
}

/* Pengumuman di mode gelap: permukaan hangat versi terang akan menyala seperti
   lampu di halaman gelap, jadi diganti abu gelap. Teks 12,3:1, tautan 7,8:1. */
.theme-dark .announce-bar {
  background-color: #252525;
  border-bottom-color: #333333;
}
.theme-dark .announce-bar p,
.theme-dark .announce-bar .announce-close {
  color: #e6e6e6;
}
.theme-dark .announce-bar .announce-link {
  color: #ffa273;
  border-bottom-color: rgba(255, 162, 115, 0.5);
}
.theme-dark .announce-bar .announce-link:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Tab aktif: aturan bawaan .theme-dark memakai gradien tombolnya sendiri,
   disamakan dengan tombol lain supaya rasionya sama, 6,05:1 dan 4,72:1. */
.theme-dark .module-tab .tabs li button[aria-selected="true"] {
  background-color: #f97316;
}

/*================================
Peredaman bidang berwarna luas
Yang membuat mata cepat lelah bukan warnanya, melainkan luas bidang yang
memakainya: layar pramuat menutup seluruh viewport, bentuk dekoratif di banner
selebar 470px, dan tombol kembali ke atas dikelilingi halo. Ketiganya diredam,
sementara identitas warnanya tetap.
===================================*/

/* Layar pramuat: bidang penuh warna diganti putih, sama dengan latar halaman,
   sehingga peralihan ke isi halaman tidak terasa berkedip. Pemutar memakai
   warna aksen supaya tetap terlihat (4,72:1 di atasnya). */
.preloader {
  background-image: none;
  background-color: #ffffff;
}
.spinner {
  background-color: #f97316;
}
.theme-dark .preloader {
  background-color: #1d1d1d;
}

/* Dua seksi memakai pita krem selebar layar sebagai gambar latar (deret angka
   dan langkah kerja). Pita itu membuat seksi di sekitarnya ikut terlihat
   pucat, padahal isinya sudah punya bentuk sendiri: kartu angka dan lingkaran
   bernomor. Latarnya disamakan dengan badan halaman, dan pemisah antarseksi
   diambil alih oleh garis rambut plus jarak yang memang sudah ada. */
/* Gambar latarnya saja yang dilepas, tanpa mengisi warna baru. Lingkaran
   bernomor di seksi langkah kerja memakai bentuk ber-z-index negatif, dan
   warna latar pada seksi akan menimpanya. Membiarkan latar seksi kosong juga
   membuat mode gelap ikut benar tanpa aturan tambahan. */
.counter-area,
.work-area {
  background-image: none;
}
.counter-area {
  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5;
}
.theme-dark .counter-area {
  border-color: #2b2b2b;
}
/* Garis lengkung dekoratif diturunkan supaya berhenti memotong paragraf
   pengantar. Dulu ia hampir tak terlihat di atas pita krem; di latar putih
   garisnya jelas dan menabrak teks. */
.work-shape {
  top: 255px;
}

/* Bentuk dekoratif template berupa PNG dengan oranye dan biru versi lama yang
   jauh lebih pekat daripada palet sekarang. Raster tidak bisa diwarnai ulang
   lewat CSS, jadi saturasi dan opasitasnya yang diturunkan agar setara. */
.banner-shape-right img,
.banner-shape img,
.about-shape img,
.pricing-shape img,
.work-shape img,
.service-card-shape img {
  /* filter: saturate(0.5) brightness(1.08); */
  opacity: 0.55;
}

/* Halo di sekeliling tombol kembali ke atas dibuang: lingkaran sekecil itu
   tidak perlu cahaya, dan halo oranye di sudut layar ikut mengganggu saat
   halaman digulir. */
.top-btn {
  box-shadow: 0 6px 16px rgba(42, 40, 79, 0.18);
}

/*================================
Tombol aksi
Bidang tombol memakai oranye merek #f97316 apa adanya, dengan label putih
atas permintaan pemilik produk.

  Catatan kontras: putih di atas #f97316 terukur 2,80:1, di bawah ambang
  WCAG AA (4,5:1 untuk teks biasa, 3:1 untuk teks besar). Ini keputusan
  pemilik produk yang diambil setelah tiga pilihan diperlihatkan, bukan
  kelalaian. Bila suatu saat perlu memenuhi AA tanpa mengubah warna label,
  latarnya harus digelapkan ke sekitar #c44e12 (putih 4,72:1).

Saat disorot, template menimpa tombol dengan gradien biru dan labelnya tetap
putih (5,72:1), jadi keadaan sorot memenuhi AA.
===================================*/
.default-btn,
.default-btn-two,
.banner-btn .get-btn,
.banner-content .banner-btn .get-btn,
.nav-add-btn .nav-menu-btn,
.main-nav nav .side-nav .side-item .nav-menu-btn,
.side-nav-responsive .side-nav-inner .side-nav .nav-menu-btn,
.pricing-card .purchase-btn,
.module-tab .tabs li button[aria-selected="true"],
.theme-dark .module-tab .tabs li button[aria-selected="true"],
.top-btn {
  background-image: none;
  background-color: #f97316;
  color: #ffffff;
}
/* Tab aktif tidak punya lapisan sorot biru seperti tombol lain, jadi labelnya
   tetap putih saat disorot. Tanpa aturan ini ia mewarisi warna hover tab
   biasa, oranye gelap di atas oranye terang, yang hanya 1,78:1. */
.module-tab .tabs li button[aria-selected="true"]:hover {
  color: #ffffff;
}
/* Ikon di dalam lingkaran putih pada tombol hero: oranye merek hanya 2,80:1
   di atas putih, jadi dipakai turunan teksnya (5,00:1). */
.default-btn i,
.banner-content .banner-btn .get-btn i {
  color: #bf4a10;
}
/* Sepasang tombol di ujung navbar. Template menaruh lingkaran berikon di sini,
   yang tidak menyebut tujuannya sendiri; keduanya sekarang berlabel supaya
   maksudnya terbaca tanpa menebak ikon. "Masuk" dibuat berbingkai tipis dan
   "Coba Gratis" berbidang penuh, karena hanya satu dari keduanya yang jadi
   langkah utama pengunjung baru. Tinggi 44px mengikuti batas bawah sasaran
   sentuh. Sudut 10px, lebih tegas daripada pil bawaan template, dipakai hanya
   pada pasangan ini agar ujung navbar terbaca sebagai satu kelompok. */
.main-nav nav .side-nav .side-item .nav-login-btn a,
.side-nav-responsive .side-nav-inner .side-nav .nav-login-btn a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border: 1px solid #d9dde3;
  border-radius: 10px;
  background-color: #ffffff;
  color: #101114;
  font-size: 15px;
  font-weight: 600;
  transition: 0.3s;
}
/* Sorot: bingkai dan teks memakai turunan oranye gelap (5,00:1 di atas putih),
   bukan oranye merek yang hanya 2,80:1 untuk teks sekecil ini. */
.main-nav nav .side-nav .side-item .nav-login-btn a:hover,
.side-nav-responsive .side-nav-inner .side-nav .nav-login-btn a:hover {
  border-color: #bf4a10;
  color: #bf4a10;
}

/* Tombol utama disamakan tinggi dan sudutnya dengan "Masuk" di sebelahnya.
   Selector template panjang, jadi override ikut panjang. */
.main-nav nav .side-nav .side-item .nav-menu-btn,
.side-nav-responsive .side-nav-inner .side-nav .nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}
/* Panel responsif dibuat berlatar putih. Template memberinya latar oranye,
   warna yang sama dengan tombol utama di dalamnya, sehingga tombol itu lenyap
   ke latarnya sendiri di lebar ponsel. Dengan panel putih, kedua tombol tampil
   sama persis seperti di navbar lebar dan rasio kontrasnya ikut terbawa. */
.side-nav-responsive .side-nav-inner .side-nav {
  background-color: #ffffff;
  border: 1px solid #e8ebef;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
  padding: 16px 18px;
}
/* Tombol utama di panel tidak lagi perlu jarak atas: keduanya kini sebaris. */
.side-nav-responsive .side-nav-inner .side-nav .nav-menu-btn {
  margin-top: 0;
}

/* Panah menyatakan arah "lanjut ke aplikasi"; ukurannya dikunci agar tidak ikut
   membesar mengikuti font dan menenggelamkan labelnya. */
.main-nav nav .side-nav .side-item .nav-menu-btn i,
.side-nav-responsive .side-nav-inner .side-nav .nav-menu-btn i {
  font-size: 20px;
  line-height: 1;
}

/* Sorot tombol navbar bawaan template memakai gradien ungu-biru di luar
   palet; disamakan dengan gradien biru yang dipakai tombol lain. */
.main-nav nav .side-nav .side-item .nav-menu-btn:hover,
.side-nav-responsive .side-nav-inner .side-nav .nav-menu-btn:hover {
  background-image: linear-gradient(to right, #004aa8, #0061d5);
  color: #ffffff;
}

/*================================
Ukuran logo
Ukuran logo ditentukan oleh kotaknya, bukan oleh ukuran berkas. Template
hanya membatasi lebar di navbar lengket dan di lebar layar tertentu, jadi
berkas SVG berukuran besar tampil sebesar ukuran aslinya di navbar desktop.

Lebar yang dipatok dan tinggi yang mengikuti rasio membuat berkas dengan
ukuran berapa pun tampil pada jejak yang sama, tanpa gepeng. max-height
menjaga berkas yang rasionya lebih tinggi (mis. logo berlogo tagline atau
versi kotak) tetap muat, dan object-fit menahan agar penyusutan karena
max-height tidak merusak rasio.
===================================*/
/* padding bawaan template (10px atas-bawah) ikut terhitung pada kotak border,
   sehingga max-height memangkas gambarnya, bukan menyisakan ruang. Jarak
   diambil alih margin agar tinggi yang dipatok benar-benar milik gambar. */
.navbar-light .navbar-brand img,
.sticky-nav .navbar-light .navbar-brand img,
.mobile-nav .logo img {
  width: 158px;
  max-width: 158px;
  height: auto;
  max-height: 48px;
  padding: 0;
  margin: 8px 0;
  object-fit: contain;
  object-position: left center;
}
.footer-img img {
  width: 170px;
  max-width: 170px;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
}
/* Logo mode gelap berasal dari raster yang ditrace, dan latar di dalam huruf
   ikut tergambar sebagai bidang, bukan area kosong. Bidang itu diwarnai
   #1d1d1d mengikuti latar mode gelap, jadi permukaan navbar lengket
   disamakan agar tidak muncul kotak yang lebih gelap di belakang logo. */
.theme-dark .sticky-nav .main-nav {
  background-color: #1d1d1d;
}