/* ============================================================
   landing-v2.css
   Lapisan penimpa di atas style.css. WAJIB dimuat SETELAH style.css.

   Kenapa penimpa, bukan style.css baru:
   markup home.php punya puluhan kelas (portfolio, blog, mega menu, footer)
   yang tidak semuanya perlu diubah. Menulis ulang seluruhnya berarti
   mengorbankan bagian yang sudah benar. Konsekuensinya, ada beberapa
   deklarasi !important di bawah. Itu disengaja dan dibatasi hanya pada
   properti yang memang harus menang.

   Yang diubah cuma dua hal: tipografi dan titik fokus per section.
   Tidak ada satu pun baris HTML yang perlu disentuh.
   ============================================================ */

/* ---------- 1. Token ---------- */
:root {
  /* Archivo punya sumbu lebar 62 sampai 125. Judul bisa dibikin melebar
     sampai benar benar mendominasi, tanpa perlu gradasi warna.
     Plus Jakarta Sans dibuat Tokotype untuk identitas kota Jakarta.
     JetBrains Mono menyamakan angka dan nama domain dengan storefront. */
  --ld-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --ld-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ld-data:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ld-ink:   #0A1A26;
  --ld-ink-2: #41586B;
  --ld-ink-3: #7A8FA1;
  --ld-line:  #E3EBF1;
  --ld-line-2:#F0F5F8;
  --ld-mist:  #F6FAFC;
  --ld-paper: #FCFDFE;
  --ld-sky:   #03A9F4;
  --ld-deep:  #01579B;
  --ld-amber: #FF9800;
  --ld-ember: #E65100;
  --ld-ease:  cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Dasar tipografi ----------
   Masalahnya bukan font, tapi jarak antar tingkat. Sebelumnya h2 32px
   melawan body 16px. Rasio 2x membuat mata tidak punya alasan berhenti
   di mana pun. Sekarang elemen jangkar bisa mencapai 5x body. */
body {
  font-family: var(--ld-body) !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ld-ink-2);
  background: var(--ld-paper);
  letter-spacing: -.003em;
}
h1, h2, h3, h4, h5, h6,
.navbar__logo-text,
.hero__title,
.section__title,
.cta-box__title {
  font-family: var(--ld-display) !important;
  color: var(--ld-ink);
  letter-spacing: -.03em;
  text-wrap: balance;
}
/* Sampai ke level li. Section Proses memakai counter buatan lewat ::before,
   dan kalau penomoran bawaan browser masih hidup, angkanya tampil dua kali. */
ul, ol { list-style: none; }
ul li, ol li { list-style: none !important; }

/* Gradasi teks dulu dipakai di kesembilan judul section. Kalau semua
   disorot, tidak ada yang tersorot. Sekarang hanya hero yang boleh. */
.text-gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}
.hero__title .text-gradient {
  position: relative;
  color: var(--ld-ink) !important;
  white-space: nowrap;
}
/* Garis bawah tebal miring. Satu satunya penanda penekanan di seluruh
   halaman, jadi masih terbaca sebagai penekanan dan bukan pola berulang. */
.hero__title .text-gradient::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: .05em; height: .15em;
  background: var(--ld-amber); opacity: .26; z-index: -1;
  transform: skewX(-13deg);
}

/* ---------- 3. Kicker ----------
   Pil berwarna di setiap section justru membuat semua section terlihat
   sama. Diganti label kecil dengan garis, jauh lebih tenang. */
.section__tag {
  display: inline-flex !important;
  align-items: center; gap: 10px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--ld-data);
  font-size: .74rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ld-ink-3) !important;
  margin-bottom: 16px;
}
.section__tag::before {
  content: ""; width: 26px; height: 1px; background: currentColor; flex: none;
}

/* ---------- 4. Irama section ----------
   Judul dan deskripsi rata kiri, tidak lagi rata tengah. Rata tengah
   di sembilan section berturut turut membuat halaman terasa datar
   karena tidak ada garis awal yang tetap untuk diikuti mata. */
.section { padding: 96px 0; }
.section__header {
  text-align: left !important;
  max-width: 62ch;
  margin: 0 0 46px !important;
}
.section__title {
  font-weight: 800;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.2;
  margin-bottom: 0;
}
.section__desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ld-ink-2);
  max-width: 56ch;
  margin: 14px 0 0 !important;
}

/* ---------- 5. Tombol ---------- */
.btn {
  font-family: var(--ld-display);
  font-weight: 700;
  letter-spacing: -.004em;
  border-radius: 12px;
  transition: transform .14s var(--ld-ease), background .16s, border-color .16s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--ld-amber) !important;
  border-color: var(--ld-amber) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px -6px rgba(255,152,0,.6);
}
.btn--primary:hover { background: var(--ld-ember) !important; border-color: var(--ld-ember) !important; }
.btn--outline {
  border: 1.5px solid var(--ld-line) !important;
  background: #fff !important;
  color: var(--ld-ink) !important;
}
.btn--outline:hover { border-color: var(--ld-sky) !important; color: var(--ld-deep) !important; }
.btn--lg { height: 52px; padding: 0 26px; font-size: .98rem; }

/* ---------- 6. Navbar ----------
   Sengaja dibuat setenang mungkin. Navbar tidak boleh ikut bersaing
   dengan hero, karena hero yang harus menang. */
.navbar--scrolled { background: rgba(252,253,254,.93); }
.navbar__logo-text {
  font-weight: 800;  font-size: 1.1rem; letter-spacing: -.03em;
}
.navbar__links a {
  font-family: var(--ld-body);
  font-weight: 500;
  font-size: .94rem;
  color: var(--ld-ink-2);
  letter-spacing: 0;
}
.navbar__links a:hover { color: var(--ld-ink); }

/* ---------- 7. Hero ----------
   Ini elemen jangkar seluruh halaman, jadi boleh paling besar.
   Sumbu lebar Archivo dipakai penuh di sini dan tidak di tempat lain. */
.hero__title {
  font-weight: 800 !important;
  /* 118% dulu bikin huruf terlihat gepeng. 102% cuma sedikit lebih lebar dari
     normal, cukup memberi bobot tanpa memipihkan huruf. */
  font-size: clamp(1.7rem, 2.9vw, 2.6rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.03em !important;
  /* 16ch dulu memaksa judul panjang pecah jadi enam baris. Judul dari
     sys_sliders bisa 50 karakter lebih, jadi lebarnya harus dilonggarkan. */
  max-width: 26ch;
}
.hero__subtitle {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ld-ink-2);
  max-width: 54ch;
}
.hero__badge {
  font-family: var(--ld-body);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: 0;
  border-radius: 999px;
}
.hero-slider { min-height: auto; }
.hero__inner { padding-block: clamp(60px, 8vw, 108px); }

/* Slider dot dan panah dikecilkan. Kontrol slider bukan informasi,
   tidak perlu tampil sebesar tombol aksi. */
.slider-arrow { opacity: .35; transition: opacity .18s; }
.slider-arrow:hover { opacity: 1; }
.slider-dot { width: 7px; height: 7px; }
.slider-dot--active { width: 22px; border-radius: 999px; background: var(--ld-amber); }

/* ---------- 7b. Strip cek domain ----------
   Section baru tepat di bawah hero. Ini pintu masuk ke produk yang paling
   gampang dibeli, jadi tempatnya di atas, bukan di section keenam.
   Sengaja dibuat gelap supaya jadi potongan kontras pertama setelah hero
   yang terang, dan mata otomatis berhenti di sini. */
.ld-domstrip {
  background: var(--ld-ink);
  padding: 40px 0;
}
.ld-domstrip__in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.ld-domstrip__kick {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ld-data);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ld-amber); margin-bottom: 10px;
}
.ld-domstrip__kick::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.ld-domstrip__title {
  font-family: var(--ld-display);
  font-weight: 800;  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.24; letter-spacing: -.026em;
  color: #fff; margin: 0 0 8px;
}
.ld-domstrip__note { font-size: .93rem; color: rgba(255,255,255,.6); margin: 0; }

.ld-domstrip__box {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 16px;
  background: #fff; border: 2px solid transparent; border-radius: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.ld-domstrip__box:focus-within {
  border-color: var(--ld-amber);
  box-shadow: 0 0 0 4px rgba(255,152,0,.22);
}
.ld-domstrip__box > svg { color: var(--ld-ink-3); flex: none; }
.ld-domstrip__box input {
  flex: 1; min-width: 0; height: 46px;
  border: 0; outline: none; background: none;
  font-family: var(--ld-data); font-size: 1rem; color: var(--ld-ink);
}
.ld-domstrip__box input::placeholder { color: #A5B8C6; }
.ld-domstrip__box .btn { height: 44px; padding: 0 20px; }

.ld-domstrip__tlds {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 13px;
  font-family: var(--ld-data); font-size: .82rem;
  color: rgba(255,255,255,.42);
}
.ld-domstrip__tlds b { color: rgba(255,255,255,.82); font-weight: 500; }
.ld-domstrip__tlds a { color: var(--ld-amber); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .ld-domstrip__in { grid-template-columns: 1fr; gap: 22px; }
  .ld-domstrip { padding: 30px 0; }
  .ld-domstrip__box { flex-wrap: wrap; padding: 10px; }
  .ld-domstrip__box input { width: 100%; flex: 1 1 100%; padding-inline: 6px; }
  .ld-domstrip__box .btn { width: 100%; }
  .ld-domstrip__box > svg { display: none; }
}

/* ---------- 8. Trust bar ----------
   Paling tenang di halaman. Ini rel, bukan section. */
.trust-bar {
  padding: 22px 0 !important;
  background: var(--ld-mist);
  border-block: 1px solid var(--ld-line-2);
}
.trust-bar .container {
  display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
}
.trust-bar__label {
  font-family: var(--ld-data);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ld-ink-3); margin: 0 !important;
}
.trust-bar__logos { gap: 30px !important; margin: 0 !important; }
.trust-logo {
  font-family: var(--ld-display);
  font-weight: 700;  font-size: 1rem; letter-spacing: -.01em;
  color: #B3C4D0; opacity: 1 !important;
}

/* ---------- 9. Layanan ----------
   TITIK FOKUS: satu kartu unggulan dibesarkan dan digelapkan, dua
   sisanya sengaja dibuat diam. Tiga kartu setara berarti tidak ada
   fokus, dan itu penyebab utama section ini terasa hambar.
   Kartu mana yang jadi jangkar diatur lewat is_featured di admin. */
/* Kolom SAMA LEBAR dan tinggi kartu diseragamkan.
   Versi sebelumnya memakai 1.5fr 1fr 1fr dengan asumsi kartu unggulan ada di
   posisi pertama. Padahal urutannya diatur sort_order di admin, dan punyamu
   ada di tengah. Akibatnya kolom lebar berisi kartu biasa, dan kartu gelap
   malah masuk kolom sempit. Sekarang posisinya tidak lagi berpengaruh. */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.services-grid > .service-card { height: 100%; }
.service-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ld-line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: none;
  transition: border-color .18s, transform .18s var(--ld-ease);
}
/* Tautan didorong ke dasar kartu, jadi ketiganya sejajar walau panjang
   deskripsi dan jumlah butir fiturnya berbeda beda. */
.service-card__link { margin-top: auto; padding-top: 18px; }
.service-card__features { margin-bottom: 0; }

/* Lencana dulu menggantung di luar kartu karena top-nya negatif.
   Sekarang duduk di dalam, sejajar dengan ikon. */
.service-card__badge {
  position: absolute !important;
  top: 18px !important; right: 18px !important;
  left: auto !important; bottom: auto !important;
  transform: none !important;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--ld-body); font-weight: 700; font-size: .7rem;
  letter-spacing: .02em; white-space: nowrap;
}
.service-card:hover { border-color: var(--ld-sky); transform: translateY(-3px); }
.service-card__title {
  font-weight: 700;  font-size: 1.04rem; line-height: 1.35; letter-spacing: -.016em;
  margin-bottom: 8px;
}
.service-card__desc { font-size: .93rem; color: var(--ld-ink-2); }
.service-card__features li { font-size: .87rem; }
.service-card__link {
  font-family: var(--ld-display); font-weight: 700;  font-size: .9rem; color: var(--ld-deep);
}

/* Kartu jangkar dibedakan lewat WARNA saja, bukan lewat tinggi atau lebar.
   grid-row: span 2 dulu membuat baris kedua bayangan yang tidak diisi
   siapa pun, dan itu penyebab ketiganya tidak rata bawah. */
.service-card--featured {
  background: var(--ld-ink) !important;
  border-color: var(--ld-ink) !important;
  color: rgba(255,255,255,.72);
  padding: 28px;
  transform: none;
}
.service-card--featured .service-card__features li { border-color: rgba(255,255,255,.14); }
.service-card--featured:hover { border-color: var(--ld-amber) !important; transform: translateY(-3px); }
.service-card--featured .service-card__title { color: #fff; font-size: 1.15rem; }
.service-card--featured .service-card__desc,
.service-card--featured .service-card__features li { color: rgba(255,255,255,.72); }
.service-card--featured .service-card__icon {
  background: rgba(255,255,255,.09) !important;
  color: var(--ld-amber) !important;
}
.service-card--featured .service-card__link { color: var(--ld-amber); }
.service-card--featured .service-card__badge {
  background: var(--ld-amber) !important; color: #fff !important;
}

/* Ikon kartu biasa dikecilkan supaya tidak semua bersuara sama keras. */
.service-card:not(.service-card--featured) .service-card__icon {
  width: 42px; height: 42px; border-radius: 10px;
}
.service-card:not(.service-card--featured) .service-card__icon svg { width: 20px; height: 20px; }

/* ---------- 10. Keunggulan ----------
   TITIK FOKUS: angka. Kartu 01 / 02 / 03 dulu cuma penomoran hias,
   tidak membawa informasi apa pun, jadi tidak layak jadi elemen terbesar.
   Sekarang angkanya dibesarkan supaya section ini punya bobot visual,
   dan kartunya dibuat datar tanpa border. */
.advantages-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px 30px;
}
.advantage-card {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.advantage-card:hover { transform: none !important; }
.advantage-card__number {
  font-family: var(--ld-display);
  font-weight: 800;  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  line-height: 1.02; letter-spacing: -.035em;
  color: var(--ld-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  margin-bottom: 12px;
}
.advantage-card__title {
  font-weight: 700;  font-size: .97rem; letter-spacing: -.012em;
  border-top: 1px solid var(--ld-line);
  padding-top: 12px;
  margin-bottom: 6px;
}
.advantage-card__desc { font-size: .89rem; color: var(--ld-ink-2); }

/* ---------- 11. Proses ----------
   Satu satunya section yang boleh memakai nomor, karena isinya memang
   urutan dan urutannya membawa informasi. Garis dibuat tebal dan
   penanda tahap pertama diberi warna aksen supaya jelas mulai dari mana. */
.process-horizontal { position: relative; }
.process-h-line {
  height: 2px !important;
  background: var(--ld-ink) !important;
  top: 6px !important;
  opacity: 1 !important;
}
.process-h-steps { gap: 0 !important; }
.process-h-step { padding-right: 24px; }
.process-h-step__marker {
  width: 14px !important; height: 14px !important;
  background: var(--ld-paper) !important;
  border: 2px solid var(--ld-ink) !important;
  box-shadow: none !important;
  display: grid; place-items: center;
}
.process-h-step:first-child .process-h-step__marker {
  background: var(--ld-amber) !important; border-color: var(--ld-amber) !important;
}
/* Angka di dalam penanda disembunyikan dan dipindah ke label teks,
   supaya tidak ada penomoran yang muncul dua kali. */
.process-h-step__marker span { display: none !important; }
.process-h-step__content { padding-top: 22px; }
.process-h-step__content h4 {
  font-weight: 700;  font-size: .99rem; letter-spacing: -.014em; margin-bottom: 7px;
}
.process-h-step__content h4::before {
  content: counter(step, decimal-leading-zero) " / ";
  font-family: var(--ld-data); font-size: .74rem; font-weight: 400;
  letter-spacing: .09em; color: var(--ld-ink-3);
  display: block; margin-bottom: 9px;
}
.process-h-steps { counter-reset: step; }
.process-h-step { counter-increment: step; }
.process-h-step__content p { font-size: .89rem; color: var(--ld-ink-2); }

/* ---------- 12. Testimoni ----------
   TITIK FOKUS: satu kutipan besar. Tiga kartu testimoni seragam
   memaksa pembaca memilih sendiri mana yang penting, dan hasilnya
   tidak ada yang dibaca. Kutipan pertama sekarang hampir sebesar
   judul section, sisanya jadi pendukung. */
.testimonials-grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--ld-line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: none;
}
.testimonial-card__text { font-size: .9rem; line-height: 1.6; color: var(--ld-ink-2); }
.testimonial-card__author strong {
  font-family: var(--ld-display); font-weight: 700;  font-size: .93rem; color: var(--ld-ink);
}
.testimonial-card__author span { font-size: .83rem; color: var(--ld-ink-3); }
.testimonial-card__avatar {
  background: var(--ld-ink) !important;
  font-family: var(--ld-display); font-weight: 800;
}

.testimonials-grid > .testimonial-card:first-child {
  grid-row: span 2;
  background: none;
  border: 0;
  padding: 0 30px 0 0;
}
.testimonials-grid > .testimonial-card:first-child .testimonial-card__text {
  font-family: var(--ld-display);
  font-weight: 700;  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--ld-ink);
  margin-bottom: 26px;
}
.testimonials-grid > .testimonial-card:first-child .testimonial-card__stars { margin-bottom: 18px; }
.testimonials-grid > .testimonial-card:first-child .testimonial-card__avatar { width: 44px; height: 44px; }

/* ---------- 13. CTA ---------- */
.cta-box {
  background: var(--ld-ink) !important;
  border-radius: 28px;
  padding: 56px;
}
.cta-box__title {
  font-weight: 800;  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.22; letter-spacing: -.025em;
  color: #fff;
}
.cta-box__desc { color: rgba(255,255,255,.7); font-size: 1.02rem; max-width: 52ch; }
.cta-box .btn--white {
  background: var(--ld-amber) !important; color: #fff !important; border-color: var(--ld-amber) !important;
}
.cta-box .btn--white:hover { background: var(--ld-ember) !important; }
.cta-box .btn--ghost {
  border: 1.5px solid rgba(255,255,255,.34) !important; color: #fff !important;
}
.cta-box .btn--ghost:hover { background: rgba(255,255,255,.1) !important; }
/* Cincin dekoratif dihapus. Tidak membawa informasi dan menarik mata
   menjauh dari tombol, yang justru satu satunya tujuan section ini. */
.cta-ring { display: none !important; }

/* ---------- 14. Portofolio dan blog ----------
   Sentuhan ringan saja, strukturnya sudah cukup. */
.portfolio-card__title,
.blog-card__title {
  font-family: var(--ld-display) !important;
  font-weight: 700;  letter-spacing: -.02em;
}
.portfolio-tab, .blog-card__cat {
  font-family: var(--ld-body); font-weight: 600; letter-spacing: 0;
}

/* ---------- 15. Footer ---------- */
.footer { background: var(--ld-ink); }
.footer h4, .footer__col-title {
  font-family: var(--ld-data) !important;
  font-size: .78rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .11em;
}

/* ---------- 16. Responsif ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .advantages-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-grid > .testimonial-card:first-child { grid-row: auto; padding-right: 0; }
}
@media (max-width: 680px) {
  .section { padding: 62px 0; }
  .hero__title { font-size: clamp(1.55rem, 6.6vw, 2rem) !important; line-height: 1.22 !important; max-width: none; }
  .section__header { margin-bottom: 32px !important; }
  .services-grid, .advantages-grid { grid-template-columns: 1fr; }
  .service-card--featured { padding: 24px; }
  .service-card--featured .service-card__title { font-size: 1.25rem; }
  .cta-box { padding: 32px 24px; border-radius: 20px; }
  .trust-bar .container { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}