/* =====================================================================
   3H COOL — PT 3H COOL
   Landing page stylesheet
   Struktur: 1) Token  2) Reset  3) Utilitas  4) Komponen  5) Section
             6) Footer  7) Responsif
   ===================================================================== */

/* ---------- 1. TOKEN ---------- */
:root {
  /* Warna merek */
  --navy-900: #05192F;
  --navy-800: #0A2540;
  --navy-700: #103254;
  --blue-700: #075B9D;
  --blue-600: #0879BD;
  --blue-500: #1598CE;
  --ice-400:  #47C9EA;
  --ice-200:  #BAE3FD;
  --ice-050:  #EEF7FF;

  /* Netral */
  --ink:      #0C1B2A;
  --muted:    #56687C;
  --line:     #E2E9F0;
  --tint:     #F4F8FC;
  --white:    #FFFFFF;

  /* Bentuk & bayangan */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --sh-sm: 0 2px 8px rgba(10, 37, 64, .06);
  --sh-md: 0 10px 30px rgba(10, 37, 64, .08);
  --sh-lg: 0 24px 60px rgba(10, 37, 64, .14);

  /* Tata letak */
  --max: 1200px;
  --pad: 24px;
  --header-h: 76px;

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ---------- Aksen per lini produk ----------
     Lapisan semantik di atas token merek di atas. Bawaannya biru merek,
     jadi halaman tanpa penanda lini tampil persis seperti sebelumnya.

     Yang TETAP sama di kedua lini adalah perabot yang membentuk
     identitas perusahaan — dan ini daftar tepatnya, karena sempat
     dibaca lebih luas dari yang sebenarnya:

       .topbar  .header  .hero  .footer   latarnya navy/putih di
                                          kedua host, tidak menyentuh
                                          token lini sama sekali
       wordmark dan logo                  sama persis

     Yang MENGIKUTI lini adalah konten dan ajakannya — .btn--primary
     (termasuk tombol CTA di dalam kop), .eyebrow, pita .cta, kartu,
     ikon, dan garis. Tombol ajakan ikut berubah dengan sengaja: ia
     menanyakan hal yang berbeda di tiap lini.

     Pembagian itu yang membuat kedua lini terbaca sebagai satu
     perusahaan dengan dua bidang, bukan dua situs yang kebetulan
     senada. Memeriksanya: baca gaya terkomputasi keempat pemilih di
     atas pada kedua host — nilainya harus identik. */
  --aksen:        var(--blue-600);
  --aksen-kuat:   var(--blue-700);   /* hover */
  --aksen-terang: var(--ice-400);    /* di atas latar gelap */
  --aksen-muda:   var(--ice-050);    /* latar chip & ikon */
  --aksen-garis:  var(--ice-200);
  --aksen-rgb:    8, 121, 189;       /* untuk rgba() bayangan tombol */
}

/* Lini konsultan IT — oranye, diambil dari logo perusahaan.

   Sebelumnya teal. Teal dipilih karena cukup jauh dari biru pendingin
   untuk dikenali sekilas, dan itu memang benar — tapi warnanya tidak
   ada di mana pun pada logo, sehingga lini IT terbaca seperti merek
   lain yang kebetulan memakai nama perusahaan yang sama. Oranye
   menyelesaikan keduanya sekaligus: ia sudah ada di logo, dan terhadap
   biru ia nyaris komplementer — pembeda rona paling kuat yang tersedia,
   lebih kuat dari teal.

   Oranye punya satu jebakan yang tidak dipunyai teal: ia paling terang
   justru saat paling jenuh, sehingga oranye logo yang vivid TIDAK bisa
   dipakai sebagai warna teks. #F7941E — oranye panah pada logo — hanya
   2,28:1 terhadap putih, jauh di bawah ambang WCAG AA 4,5:1. Dipaksakan
   sebagai warna tautan, teksnya nyaris tak terbaca di layar terang.

   Jadi pembagiannya mengikuti latarnya, bukan selera:

     --aksen         #C2410C  5,18:1 di atas putih — teks, tautan, dan
                              latar tombol (putih di atasnya juga 5,18:1).
                              Sebanding dengan teal yang digantikan (5,47:1).
     --aksen-kuat    #9A3412  7,31:1 — hover, harus lebih gelap bukan
                              lebih terang, karena oranye yang dicerahkan
                              justru kehilangan kontras.
     --aksen-terang  #F7941E  oranye panah logo apa adanya. 6,81:1 di
                              atas navy hero, 7,76:1 di atas navy-900 —
                              di sinilah warna logo yang sebenarnya muncul.
     --aksen-muda    #FFF4ED  latar chip dan ikon; ink di atasnya 16,1:1.
     --aksen-garis   #FDD2B4  garis tepi, cukup hangat untuk terbaca
                              sebagai oranye muda dan bukan abu-abu. */
.lini-it {
  --aksen:        #C2410C;
  --aksen-kuat:   #9A3412;
  --aksen-terang: #F7941E;
  --aksen-muda:   #FFF4ED;
  --aksen-garis:  #FDD2B4;
  --aksen-rgb:    194, 65, 12;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
p  { margin: 0 0 1em; }
/* Peramban memberi <figure> margin 40px kiri-kanan secara bawaan —
   tanpa reset ini setiap foto galeri menyusut 80px dari lebar kolomnya. */
figure { margin: 0; }
a  { color: var(--aksen); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--aksen-kuat); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

/* Ikon dari pustaka Lucide (blade-icons). Dikirim tanpa width/height
   supaya ukurannya ditentukan CSS; tanpa aturan ini tiap ikon jatuh ke
   ukuran bawaan elemen SVG, 300 x 150 px.

   1em membuatnya ikut besar-kecilnya teks di sebelahnya, dan sejajar
   dengan garis dasar huruf lewat vertical-align. Dipakai menggantikan
   panah dan silang yang dulu ditulis sebagai karakter (&larr;, &times;) —
   karakter begitu bergantung pada font yang kebetulan terpasang. */
.ikon {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -.125em;
  flex: none;
}

/* Jebakan bot pada formulir kontak.
   Disembunyikan dengan posisi, bukan display:none atau visibility:hidden —
   sebagian bot melewati isian yang jelas-jelas disembunyikan begitu, tapi
   mengisi yang menurut CSS-nya "ada". Manusia tidak akan pernah melihatnya. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
address { font-style: normal; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--ice-400); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. UTILITAS ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.section { padding: 96px 0; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--navy-800); color: #D7E4F0; }
.section--dark .h2 { color: var(--white); }

.h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); color: var(--navy-800); }
/* Satu tingkat di bawah .h2, dipakai judul kelompok lini produk. Ditulis
   sebagai kelas, bukan menumpang pada elemen h3, karena tingkat elemennya
   berbeda per tempat: h2 di halaman daftar, h3 di dalam section beranda. */
.h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); color: var(--navy-800); }
.section--dark .h3 { color: var(--white); }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aksen-terang);
  margin-bottom: 14px;
}
.eyebrow--dark { color: var(--aksen); }

.section__head { max-width: 720px; margin-bottom: 56px; }
.section__lead { color: var(--muted); font-size: 1.06rem; margin: 0; }
.section__head--light .section__lead { color: #A8C0D6; }

/* Judul kelompok lini produk di atas sederet kartu. Lebih rapat daripada
   judul section karena berada DI DALAM satu section, bukan membuka yang
   baru; yang kedua dan seterusnya diberi jarak atas agar kelompok tidak
   menempel pada kartu di atasnya. */
.section__head--lini { margin-bottom: 28px; }
.section__head--lini .section__lead { font-size: .98rem; }
.cards + .section__head--lini,
.related + .section__head--lini,
.process + .section__head--lini,
.industries + .section__head--lini { margin-top: 56px; }

/* Animasi masuk saat scroll */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* Slide hero tetap berganti saat titiknya ditekan, tapi tanpa gerakan
     menggeser. Perpindahan otomatisnya sendiri sudah dimatikan di
     main.js bagian 11. */
  .hero__slide { transition: none; }
}

/* ---------- 4. KOMPONEN ---------- */

/* Tombol */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .94rem;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--lg    { padding: 14px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--aksen); color: var(--white); box-shadow: 0 8px 22px rgba(var(--aksen-rgb), .28); }
.btn--primary:hover { background: var(--aksen-kuat); color: var(--white); box-shadow: 0 12px 28px rgba(var(--aksen-rgb), .36); }

.btn--white { background: var(--white); color: var(--navy-800); }
.btn--white:hover { color: var(--aksen-kuat); }

.btn--ghost { border-color: rgba(255, 255, 255, .45); color: var(--white); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: var(--white); border-color: var(--white); }

.btn--outline { border-color: var(--line); color: var(--navy-800); background: var(--white); }
.btn--outline:hover { border-color: var(--aksen); color: var(--aksen); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--navy-800); }
.logo__mark {
  width: 44px; height: 44px;
  display: block;
  flex: none;
}
.logo__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo__text { display: flex; flex-direction: column; justify-content: center; min-height: 44px; line-height: 1.1; }
.logo__text strong { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; }
.logo__text strong em { font-style: normal; color: var(--blue-600); }
.logo__text small { font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.logo--light { color: var(--white); }
.logo--light .logo__text strong em { color: var(--ice-400); }
.logo--light .logo__text small { color: #8FAAC4; }

/* ---------- TOP BAR ---------- */
.topbar { background: var(--navy-900); color: #BFD3E6; font-size: .84rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 46px; }
.topbar__lines { display: flex; align-items: center; gap: 22px; }
.topbar__line { display: inline-flex; align-items: center; gap: 10px; color: #BFD3E6; }
.topbar__line:hover { color: var(--white); }
.topbar__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(56, 189, 248, .14); color: var(--ice-400); flex: none; }
.topbar__icon svg { width: 15px; height: 15px; }
.topbar__text { display: flex; flex-direction: column; line-height: 1.3; }
.topbar__text b { color: var(--white); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.topbar__text span { font-size: .82rem; }
.topbar__sep { width: 1px; height: 28px; background: rgba(255, 255, 255, .12); }
.topbar__right { display: flex; align-items: center; gap: 18px; flex: none; }
.topbar__hours { display: inline-flex; align-items: center; gap: 8px; }
.topbar__hours svg { width: 15px; height: 15px; color: var(--ice-400); }

/* Pemilih bahasa ID / EN */
.langswitch {
  display: inline-flex; align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
}
.langswitch__btn {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  color: #9FBAD3;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.langswitch__btn:hover { color: var(--white); }
.langswitch__btn.is-active { background: var(--blue-600); color: var(--white); }

/* ---------- HEADER ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: var(--sh-md); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); }

.nav { display: flex; align-items: center; gap: 22px; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  position: relative;
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: .94rem;
  color: var(--navy-800);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--blue-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover { color: var(--blue-600); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--blue-600); }

/* Tombol panah pembuka submenu */
.nav__item--has-menu .nav__link { padding-right: 2px; }
.nav__toggle {
  display: grid; place-items: center;
  width: 22px; height: 32px;
  color: var(--navy-800);
  border-radius: var(--r-sm);
}
.nav__caret { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Buka saat hover hanya di layar lebar; di sentuh dipakai ketuk tombol panah */
@media (min-width: 1025px) {
  .nav__item--has-menu:hover .nav__toggle,
  .nav__item--has-menu:focus-within .nav__toggle { color: var(--blue-600); }
  .nav__item--has-menu:hover .nav__caret { transform: rotate(180deg); }
  /* Jembatan tak terlihat agar kursor tidak "jatuh" saat turun ke menu */
  .nav__item--has-menu::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
  }
  .nav__item--has-menu:hover .nav__menu,
  .nav__item--has-menu:focus-within .nav__menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
}

/* Panel dropdown */
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 252px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
  z-index: 20;
}
.nav__menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.nav__sublink {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600;
  color: var(--navy-800);
  white-space: nowrap;
}
.nav__sublink:hover { background: var(--ice-050); color: var(--blue-600); }
.nav__sublink.is-active { background: var(--ice-050); color: var(--blue-600); }

/* Label lini produk di dalam dropdown. Bukan tautan — hanya pemisah
   antara kelompok layanan pendingin dan layanan IT. */
.nav__group {
  padding: 10px 14px 4px;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
/* Kelompok kedua dan seterusnya dipisah garis dari kelompok sebelumnya. */
.nav__group ~ .nav__group {
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

/* Label kelompok yang menautkan halaman induk lininya.
   Bentuknya sengaja tetap label — ukuran, tebal, dan huruf kapitalnya
   sama persis — supaya hierarki menu tidak berubah. Yang ditambahkan
   hanya tanda bahwa ia bisa diklik: panah kecil, dan warna aksen saat
   disentuh. Padding dipindah ke <a> agar seluruh baris jadi sasaran
   klik, bukan hanya teksnya. */
.nav__group--tautan { padding: 0; }
.nav__grouplink {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px 4px;
  color: var(--muted); text-decoration: none;
}
.nav__grouplink::after {
  content: "→";
  font-weight: 700;
  opacity: 0; transform: translateX(-3px);
  transition: opacity .15s ease, transform .15s ease;
}
.nav__grouplink:hover,
.nav__grouplink:focus-visible { color: var(--blue-600); }
.nav__grouplink:hover::after,
.nav__grouplink:focus-visible::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nav__grouplink::after { transition: none; }
}

/* Pita lini di bawah kop. Satu-satunya penanda "Anda sedang di wilayah
   mana" yang muncul di SETIAP halaman — judul saja terlalu lemah. Di
   halaman netral ia biru induk, jadi bukan elemen asing yang muncul
   hanya untuk lini IT. */
.pita-lini { height: 3px; background: var(--aksen); }

.burger { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); }
.burger span { display: block; width: 22px; height: 2px; margin: 5px auto; border-radius: 2px; background: var(--navy-800); transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. SECTION ---------- */

/* HERO */
/* Hero tunggal — satu foto, tanpa slider.
   Overlay pekat di kiri (tempat teks) dan menipis ke kanan, supaya foto
   tetap terlihat tanpa mengorbankan keterbacaan. */
.hero {
  position: relative;
  color: var(--white);
  overflow: hidden;
  background-color: var(--navy-900);
}

/* Slide ditumpuk pada satu sel grid yang sama.
   Itulah yang menyamakan tingginya: tinggi barisnya mengikuti slide
   TERTINGGI, dan keduanya selalu setinggi itu — jadi hero tidak
   melompat saat berganti, sekalipun naskah kedua slide berbeda panjang. */
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  /* Ruang bawah dilebihkan untuk titik kendali yang menumpang di atasnya,
     supaya latar foto tetap utuh sampai bawah tanpa pita warna. */
  padding: clamp(56px, 7vw, 96px) 0 clamp(96px, 9vw, 140px);
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  /* Keluar-masuk menggeser mendatar, bukan sekadar bertukar. Slide yang
     tidak aktif diparkir di luar bingkai; .hero overflow:hidden yang
     memotongnya. visibility ikut dimatikan agar isinya tidak terbaca
     pembaca layar dan tidak bisa menerima fokus papan ketik. */
  transform: translateX(var(--hero-geser, 100%));
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: transform .6s var(--ease), opacity .45s var(--ease), visibility .6s var(--ease);
}
.hero__slide.is-active {
  transform: none;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Latar per slide. Slide pendingin memakai foto overhaul mesin.

   SLIDE IT memakai foto panel kontrol multi-rak — pekerjaan sendiri,
   bukan foto stok. Itu memang instalasi pendingin, dipilih karena paling
   dekat dengan kesan infrastruktur dan rak perangkat. Begitu ada foto
   pekerjaan IT yang sebenarnya, cukup ganti url() di aturan ini. */
/* Dua deklarasi per slide, dan urutannya menentukan.

   Yang pertama memakai JPEG dan dimengerti semua peramban. Yang kedua
   menimpanya dengan image-set(), yang memilih WebP bila didukung —
   sekitar 30% lebih kecil pada foto yang sama, dan foto pertama ini
   adalah elemen LCP beranda.

   Peramban yang tidak mengenal image-set() membuang seluruh deklarasi
   kedua sebagai tidak sah, lalu memakai yang pertama. Itulah sebabnya
   JPEG-nya ditulis terpisah di atas, bukan sebagai cadangan di dalam
   image-set() — cadangan di dalamnya hanya menolong peramban yang
   SUDAH mengenal image-set tapi tidak mengenal WebP, kelompok yang
   praktis tidak ada.

   WebP-nya dibangun ulang dengan: php build/optimalkan-hero.php */
.hero__slide[data-hero-slide="cooler"] {
  background-image:
    linear-gradient(100deg, rgba(4, 18, 34, .95) 0%, rgba(6, 26, 48, .88) 38%, rgba(9, 38, 68, .66) 72%, rgba(11, 60, 104, .55) 100%),
    url("../img/hero/Perbaikan-Mesin-Cold-Storage-Overhaul-scaled.jpg");
  background-image:
    linear-gradient(100deg, rgba(4, 18, 34, .95) 0%, rgba(6, 26, 48, .88) 38%, rgba(9, 38, 68, .66) 72%, rgba(11, 60, 104, .55) 100%),
    image-set(url("../img/hero/Perbaikan-Mesin-Cold-Storage-Overhaul-scaled.webp") type("image/webp"));
}
.hero__slide[data-hero-slide="it"] {
  background-image:
    linear-gradient(100deg, rgba(4, 16, 32, .96) 0%, rgba(7, 28, 54, .9) 38%, rgba(11, 46, 86, .7) 72%, rgba(16, 72, 128, .58) 100%),
    url("../img/proyek/Panel-control-cold-storage-multi-rek.jpg");
  background-image:
    linear-gradient(100deg, rgba(4, 16, 32, .96) 0%, rgba(7, 28, 54, .9) 38%, rgba(11, 46, 86, .7) 72%, rgba(16, 72, 128, .58) 100%),
    image-set(url("../img/proyek/Panel-control-cold-storage-multi-rek.webp") type("image/webp"));
}

/* Pola garis tipis di atas foto, satu per slide agar ikut tergeser. */
.hero__slide::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
}

.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr);
  gap: clamp(32px, 4vw, 56px); align-items: center;
}
.hero__copy h1 {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.14;
  color: var(--white);
  margin-bottom: 18px;
  max-width: 17ch;
}
.hero__copy p {
  font-size: clamp(.98rem, 1.1vw, 1.1rem);
  line-height: 1.75;
  color: #C6DAEC;
  max-width: 58ch;
  margin-bottom: 30px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- SLIDER HERO ---------- */
.hero__judul {
  /* Dibuat serupa h1 slide pertama; tingkat elemennya h2 demi satu h1
     per halaman. Aturan .hero__copy h1 tidak bisa dipakai bersama
     karena selektornya menyebut elemen, bukan kelas. */
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.14;
  color: var(--white);
  margin-bottom: 18px;
  max-width: 19ch;
}
/* Titik kendali menumpang di atas slide, bukan di bawahnya: kalau
   diletakkan sesudahnya, ia duduk di pita warna polos dan memutus foto
   latar tepat di bawah tombol ajakan. */
.hero__kendali {
  position: absolute; left: 0; right: 0;
  bottom: clamp(26px, 3vw, 44px);
  z-index: 4;
}
.hero__nav { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__nav[hidden] { display: none; }
.hero__dot {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #C6DAEC;
  font-size: .84rem; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
/* Titik penanda di dalam tombol — memberi isyarat "ini satu dari
   beberapa" tanpa mengandalkan warna saja. */
.hero__dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .5;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.hero__dot.is-active {
  background: var(--white); border-color: var(--white); color: var(--navy-800);
}
.hero__dot.is-active::before { opacity: 1; transform: scale(1.15); }

/* Kartu spesifikasi di hero */
.hero__spec {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-xl);
  padding: 30px;
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-lg);
}
.spec__temp {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.spec__temp span { font-size: 2.3rem; font-weight: 800; color: var(--white); letter-spacing: -.03em; }
.spec__temp i { font-style: normal; font-size: .82rem; color: var(--ice-200); text-transform: uppercase; letter-spacing: .1em; }
.spec__temp small { flex-basis: 100%; text-align: center; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ice-400); }
.spec__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
  font-size: .9rem;
}
.spec__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec__list span { color: #A9C4DC; }
.spec__list b { color: var(--white); text-align: right; }

/* WELCOME */
.welcome__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; }
.welcome__copy p { color: var(--muted); }

.pillars { display: grid; gap: 18px; margin-top: 34px; }
.pillar { display: flex; gap: 16px; align-items: flex-start; }
.pillar svg { width: 24px; height: 24px; flex: none; color: var(--aksen); margin-top: 3px; }
.pillar b { display: block; color: var(--navy-800); font-size: .98rem; }
.pillar span { color: var(--muted); font-size: .92rem; }

.welcome__note {
  background: var(--navy-800);
  color: #CFE0EE;
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--sh-lg);
  position: relative;
  overflow: hidden;
}
.welcome__note::before {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .28), transparent 70%);
}
.note__quote svg { width: 34px; height: 34px; color: var(--ice-400); opacity: .85; margin-bottom: 16px; }
.note__text { position: relative; font-size: 1.06rem; line-height: 1.75; color: #E4EEF7; }
.note__by { display: flex; align-items: center; gap: 14px; margin: 26px 0 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.note__avatar {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--aksen), var(--aksen-terang));
  color: var(--white); font-weight: 800; font-size: .9rem; letter-spacing: .04em;
}
.note__by b { display: block; color: var(--white); font-size: .96rem; }
.note__by small { color: #96B2CC; font-size: .8rem; }
.note__btn { width: 100%; position: relative; }

/* STATISTIK */
.stats { background: var(--blue-600); color: var(--white); padding: 54px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat { padding: 8px 12px; border-right: 1px solid rgba(255, 255, 255, .18); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat b i { font-style: normal; opacity: .5; font-weight: 500; }
/* Harus `> span`: tanpa itu aturan ini ikut mengenai <span class="count">
   di dalam <b>, sehingga angka counter mengecil jadi seukuran label. */
.stat > span { font-size: .88rem; color: #D5E8FF; }

/* LAYANAN — kartu */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before {
  content: "";
  position: absolute; left: 0; top: 24px; bottom: 24px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--aksen);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--aksen-garis); }
.card:hover::before { transform: scaleY(1); }
.card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--aksen-muda);
  color: var(--aksen);
  margin-bottom: 20px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.card:hover .card__icon { background: var(--aksen); color: var(--white); }
.card__icon svg { width: 26px; height: 26px; }
.card__temp {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  color: var(--aksen); background: var(--aksen-muda);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.card h3 { font-size: 1.16rem; color: var(--navy-800); }
.card p  { margin: 0; color: var(--muted); font-size: .94rem; }

/* ---------- KARTU LINI PRODUK ----------
   Satu bidang pekerjaan; layanannya baru muncul saat kartunya dibuka.
   Dibangun di atas <details>, jadi buka-tutupnya ditangani peramban —
   tidak ada JavaScript yang wajib jalan agar 13 halaman layanan di
   dalamnya tetap terjangkau. */
/* ====================================================================
   KARTU LINI DI BERANDA (.linihub)

   Dua pintu masuk berdampingan, satu per lini produk. Sengaja TIDAK
   memakai .lini di bawah: kartu itu <details> yang membuka daftarnya di
   tempat, sedangkan kartu ini tautan yang membawa pergi ke halaman
   induk lini. Bentuk yang mirip untuk perilaku yang berbeda hanya
   menyesatkan.

   Warnanya tidak ditulis di sini. Kelas lini-<nama> pada kartunya
   menyetel ulang --aksen dkk, jadi kartu IT jadi teal tanpa satu pun
   aturan tambahan. Itu sebabnya seluruh blok ini memakai var(--aksen).
   ==================================================================== */
.linihub-daftar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.linihub {
  display: flex; flex-direction: column;
  padding: 32px 30px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Pita aksen di tepi atas: penanda lini yang terbaca sebelum
     judulnya sempat dibaca. */
  border-top: 4px solid var(--aksen);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.linihub:hover,
.linihub:focus-visible {
  border-color: var(--aksen-garis);
  border-top-color: var(--aksen);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.linihub__judul {
  margin: 0 0 10px;
  font-size: 1.5rem; letter-spacing: -.02em;
  color: var(--navy-800);
}
.linihub__lead {
  margin: 0 0 22px;
  color: var(--muted); line-height: 1.65;
}
/* Angka didorong ke bawah supaya kedua kartu sejajar walau
   pembukanya berbeda panjang. */
.linihub__angka {
  display: flex; gap: 26px;
  margin: auto 0 20px; padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.linihub__angka li { font-size: .9rem; color: var(--muted); }
.linihub__angka b {
  display: block;
  font-size: 1.7rem; font-weight: 800; line-height: 1.1;
  color: var(--aksen);
}
.linihub__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .93rem;
  color: var(--aksen);
}
.linihub__more svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.linihub:hover .linihub__more svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .linihub-daftar { grid-template-columns: 1fr; gap: 16px; }
  .linihub { padding: 26px 22px 24px; }
  .linihub__judul { font-size: 1.32rem; }
}

@media (prefers-reduced-motion: reduce) {
  .linihub, .linihub__more svg { transition: none; }
  .linihub:hover, .linihub:focus-visible { transform: none; }
}

.lini {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lini + .lini { margin-top: 18px; }
.lini:hover { border-color: var(--aksen-garis); box-shadow: var(--sh-md); }
.lini[open] { border-color: var(--aksen-garis); box-shadow: var(--sh-md); }

.lini__kepala {
  display: flex; align-items: center; gap: 20px;
  padding: 26px 28px;
  cursor: pointer;
  /* Segitiga bawaan <details> dibuang di kedua mesin render. */
  list-style: none;
}
.lini__kepala::-webkit-details-marker { display: none; }
.lini__kepala::marker { content: ""; }

.lini__ikon {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--aksen-muda); color: var(--aksen);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lini__ikon svg { width: 26px; height: 26px; }
.lini:hover .lini__ikon,
.lini[open] .lini__ikon { background: var(--aksen); color: var(--white); }

.lini__teks { flex: 1 1 auto; min-width: 0; display: block; }
.lini__judul {
  display: block;
  font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--navy-800);
}
.lini__lead {
  display: block; margin-top: 5px;
  color: var(--muted); font-size: .94rem; line-height: 1.5;
}

.lini__meta { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.lini__jumlah {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--aksen); background: var(--aksen-muda);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.lini__tanda {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--navy-800);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.lini__tanda svg { width: 20px; height: 20px; }
.lini[open] .lini__tanda { transform: rotate(180deg); background: var(--aksen); color: var(--white); }

.lini__isi { padding: 4px 28px 30px; }

/* Selebar .container, sejajar dengan galeri, industri, dan bagian lain —
   bukan kolom sempit sendiri di tengah halaman. Keduanya anak blok dari
   wadah yang sama, jadi tidak ada yang bisa membuat salah satunya lebih
   lebar, termasuk saat dibuka.

   Kartu layanan di dalamnya memakai grid .cards yang sama dengan bagian
   lain, sehingga tiga kolomnya pun sejajar dengan kartu di luar kartu
   lini. */
.lini-daftar { margin-inline: auto; }
.lini { width: 100%; }
.lini-arahan { margin: 0 0 24px; color: var(--muted); font-size: 1.02rem; text-align: center; }

/* Bagian yang isinya dua kartu lini ikut rata tengah, supaya judulnya
   tidak menggantung di kiri sementara kartunya di tengah. Pola yang
   sama sudah dipakai bagian FAQ. */
.section__head--tengah { text-align: center; margin-inline: auto; }

/* Tidak ada varian tautan: kartu lini SELALU membuka daftarnya di
   tempat, termasuk di beranda. Pengunjung yang mengklik "Sistem
   Pendingin" ingin melihat layanannya, bukan dilempar ke halaman lain
   dan kehilangan posisi bacanya. */

/* INDUSTRI */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ind {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ind:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.ind__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ind__badge {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); background: var(--navy-800);
  padding: 4px 10px; border-radius: 999px;
}
.ind__temp { font-size: .82rem; font-weight: 700; color: var(--aksen); }
.ind h3 { font-size: 1.2rem; color: var(--navy-800); }
.ind p  { margin: 0; color: var(--muted); font-size: .94rem; }
.ind--cta {
  background: linear-gradient(140deg, var(--aksen), var(--navy-800));
  border-color: transparent; color: #CFE3F7;
  display: flex; flex-direction: column; justify-content: center;
}
.ind--cta h3 { color: var(--white); }
.ind--cta p { color: #C2DAF2; margin-bottom: 18px; }
.ind--cta .btn { align-self: flex-start; background: var(--white); color: var(--navy-800); box-shadow: none; }
.ind--cta .btn:hover { background: var(--aksen-muda); color: var(--aksen-kuat); }

/* PROSES */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 30px; border-top: 3px solid var(--line); transition: border-color .3s var(--ease); }
.step:hover { border-top-color: var(--aksen); }
.step__num {
  position: absolute; top: -18px; left: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--line);
  font-size: .76rem; font-weight: 800; color: var(--aksen);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.step:hover .step__num { background: var(--aksen); border-color: var(--aksen); color: var(--white); }
.step h3 { font-size: 1.1rem; color: var(--navy-800); }
.step p  { margin: 0; color: var(--muted); font-size: .93rem; }

/* WILAYAH */
.regions {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.regions__tabs {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rtab {
  flex: 1 1 auto;
  padding: 16px 20px;
  font-size: .92rem; font-weight: 700;
  color: #9FBAD3;
  border-bottom: 3px solid transparent;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.rtab:hover { color: var(--white); background: rgba(255, 255, 255, .05); }
.rtab.is-active { color: var(--white); border-bottom-color: var(--ice-400); background: rgba(56, 189, 248, .09); }

.regions__panels { padding: 38px 34px; }
.rpanel { display: none; animation: fadeUp .45s var(--ease); }
.rpanel.is-active { display: block; }
.rpanel h3 { color: var(--white); font-size: 1.45rem; }
.rpanel p  { color: #AEC6DC; max-width: 68ch; }
.rpanel__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.rpanel__tags li {
  font-size: .82rem; font-weight: 600;
  color: var(--ice-200);
  background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .24);
  padding: 6px 14px; border-radius: 999px;
}
.regions__note { margin: 26px 0 0; font-size: .94rem; color: #9FBAD3; }
.regions__note a { color: var(--ice-400); text-decoration: underline; text-underline-offset: 3px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* KLIEN */
.clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.clients__logo {
  display: grid; place-items: center; text-align: center;
  min-height: 96px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white);
  color: var(--muted); font-weight: 700; font-size: .9rem;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.clients__logo:hover { color: var(--aksen); border-color: var(--aksen-garis); transform: translateY(-3px); }

/* MENGAPA KAMI */
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.why__block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px 36px;
}
.why__no {
  display: inline-block;
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--ice-200);
  margin-bottom: 14px;
}
.why__block h3 { font-size: 1.45rem; color: var(--navy-800); }
.why__block p  { color: var(--muted); }
.why__block p:last-child { margin: 0; }

/* NILAI — baris ikon besar, mengikuti gaya lencana nilai pada referensi */
.values__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.value { text-align: center; padding: 8px 10px; }
.value__icon {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  color: var(--ice-400);
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.value__icon svg { width: 100%; height: 100%; }
.value:hover .value__icon { transform: translateY(-6px) scale(1.06); color: var(--aksen); }
.value b {
  display: block;
  font-size: 1.16rem; font-weight: 800; letter-spacing: .07em;
  color: var(--navy-800);
  margin-bottom: 8px;
}
.value small { display: block; font-size: .84rem; line-height: 1.5; color: var(--muted); }

/* CTA */
.cta {
  background: linear-gradient(120deg, var(--aksen-kuat), var(--navy-800) 70%);
  color: var(--white);
  padding: 74px 0;
  position: relative; overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .22), transparent 68%);
}
.cta__inner {
  position: relative;
  display: grid; grid-template-columns: 1.4fr auto; gap: 44px; align-items: center;
}
.cta .h2 { color: var(--white); margin-bottom: 12px; }
.cta p { color: #C9DEF3; margin: 0; max-width: 62ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* KONTAK */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
.contact__info { display: grid; gap: 24px; }
.cinfo { display: flex; gap: 18px; align-items: flex-start; }
.cinfo__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--aksen-muda); color: var(--aksen);
}
.cinfo__icon svg { width: 22px; height: 22px; }
.cinfo b { display: block; color: var(--navy-800); margin-bottom: 4px; }
.cinfo p { margin: 0; color: var(--muted); font-size: .95rem; }

.contact__form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--sh-md);
}
.contact__form h3 { font-size: 1.35rem; color: var(--navy-800); margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-size: .86rem; font-weight: 700; color: var(--navy-800); margin-bottom: 6px; }
.field label span { color: #D9534F; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--tint);
  font-size: .95rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
/* Select digambar sendiri agar konsisten lintas peramban */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356687C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
/* background-color (bukan shorthand) agar ikon panah pada select tidak terhapus */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--aksen);
  background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(var(--aksen-rgb), .12);
}
.field input.is-error, .field textarea.is-error { border-color: #D9534F; background-color: #FDF3F3; }
.form__note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }

/* ---------- 5a. GALERI & FAQ ---------- */

/* Galeri dokumentasi pekerjaan.
   3 kolom, bukan 4: pada container 1200px, 4 kolom hanya menyisakan ~276px
   per foto — terlalu kecil untuk memperlihatkan detail pekerjaan. */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shot {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint);
  aspect-ratio: 4 / 3;
  box-shadow: var(--sh-sm);
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.shot:hover img { transform: scale(1.06); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  font-size: .82rem; font-weight: 600; line-height: 1.4;
  color: var(--white);
  background: linear-gradient(transparent, rgba(5, 25, 47, .88));
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.shot:hover figcaption, .shot:focus-within figcaption { opacity: 1; transform: none; }
/* Potret dibuat lebih tinggi supaya tidak terpotong berlebihan */
.shot--tall { aspect-ratio: 3 / 4; grid-row: span 2; }
.gallery__more { text-align: center; margin-top: 34px; }

/* Akordeon FAQ */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 14px; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item.is-open { border-color: var(--aksen-garis); box-shadow: var(--sh-md); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  font-size: 1.02rem; font-weight: 700; line-height: 1.45;
  color: var(--navy-800);
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--aksen); }
.faq__item.is-open .faq__q { color: var(--aksen); }
.faq__sign {
  position: relative; flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--aksen-muda);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px; border-radius: 2px;
  background: var(--aksen);
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__sign { background: var(--aksen); }
.faq__item.is-open .faq__sign::before,
.faq__item.is-open .faq__sign::after { background: var(--white); }
.faq__item.is-open .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Tinggi dianimasikan lewat JS (grid-template-rows 0fr → 1fr) */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 24px 22px; color: var(--muted); font-size: .96rem; }

/* ---------- 5b. HALAMAN DALAM ---------- */

/* Hero ringkas untuk halaman selain beranda */
.pagehero {
  position: relative;
  background: linear-gradient(125deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: var(--white);
  padding: 60px 0 66px;
  overflow: hidden;
}
.pagehero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 420px at 88% 12%, rgba(56, 189, 248, .24), transparent 62%),
    radial-gradient(620px 460px at 6% 96%, rgba(var(--aksen-rgb), .32), transparent 60%);
}
.pagehero > .container { position: relative; z-index: 2; }
.pagehero h1 { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--white); max-width: 20ch; }
.pagehero__lead { color: #C6DAEC; font-size: 1.06rem; max-width: 62ch; margin: 0; }
.pagehero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* Chip lini produk, dibedakan dari chip spesifikasi di sebelahnya.
   Memakai --aksen-terang: di atas latar navy pagehero, teal gelapnya
   nyaris tidak terbaca. */
/* Dua kelas, bukan satu: .pagehero__chip dideklarasikan di bawah ini dan
   akan memenangkan `color` pada spesifisitas yang sama. */
.pagehero__chip.pagehero__chip--lini {
  color: var(--aksen-terang);
  border-color: color-mix(in srgb, var(--aksen-terang) 45%, transparent);
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-size: .72rem;
}
.pagehero__chip {
  font-size: .82rem; font-weight: 700;
  color: var(--ice-200);
  background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .26);
  padding: 6px 14px; border-radius: 999px;
}

/* Remah roti */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .84rem; }
.crumbs a { color: #9FBAD3; }
.crumbs a:hover { color: var(--aksen-terang); }
.crumbs span { color: var(--aksen-terang); }
.crumbs i { font-style: normal; color: #56708A; }
.crumbs__pisah { color: #56708A; width: .78em; height: .78em; }

/* Badan tulisan */
.prose { max-width: 70ch; }
/* Kolom baca artikel — dipusatkan, tanpa kolom sisi */
.prose--article { max-width: 72ch; margin-inline: auto; }
.prose--article .checklist { margin-bottom: 1.4em; }
.artikel__gambar { margin: 0 0 2.2em; }
.artikel__gambar img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--navy-800); margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; color: var(--navy-800); margin-top: 1.6em; }
.prose p { color: var(--muted); }
.prose strong { color: var(--navy-800); }

/* Tata letak dua kolom: isi + sisi */
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.aside-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px 26px;
  box-shadow: var(--sh-sm);
  position: sticky; top: calc(var(--header-h) + 20px);
}
.aside-card h3 { font-size: 1.1rem; color: var(--navy-800); }
.aside-card p { font-size: .92rem; color: var(--muted); }

/* Tabel spesifikasi */
.spectable { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: .94rem; }
.spectable caption {
  text-align: left; font-weight: 800; color: var(--navy-800);
  padding-bottom: 12px; font-size: 1.05rem;
}
.spectable th, .spectable td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spectable th { width: 42%; color: var(--muted); font-weight: 600; background: var(--tint); }
.spectable td { color: var(--navy-800); font-weight: 600; }
.spectable tr:last-child th, .spectable tr:last-child td { border-bottom: 0; }

/* Daftar centang */
.checklist { display: grid; gap: 12px; margin: 22px 0 0; }
.checklist li { position: relative; padding-left: 32px; color: var(--muted); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--aksen-muda);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B63CE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  background-size: 13px 13px; background-position: center; background-repeat: no-repeat;
}
.checklist li b { color: var(--navy-800); }

/* Kartu tautan ke halaman lain */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.relcard {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.relcard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--aksen-garis); }
.relcard span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--aksen); margin-bottom: 8px; }
.relcard b { display: block; font-size: 1.06rem; color: var(--navy-800); margin-bottom: 6px; }
.relcard small { display: block; font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* Kartu layanan/industri yang bisa diklik */
.card--link, .ind--link { display: block; }
.card--link:hover h3, .ind--link:hover h3 { color: var(--aksen); }
.card__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: .88rem; font-weight: 700; color: var(--aksen);
}
.card__more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.card--link:hover .card__more svg, .ind--link:hover .card__more svg { transform: translateX(4px); }

/* Keadaan kosong (mis. daftar artikel belum terisi) */
.empty {
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-xl);
  padding: 56px 30px;
  background: var(--tint);
}
.empty svg { width: 46px; height: 46px; color: var(--ice-400); margin: 0 auto 18px; }
.empty h3 { font-size: 1.25rem; color: var(--navy-800); }
.empty p { color: var(--muted); max-width: 52ch; margin: 0 auto 22px; }

/* ---------- 6. FOOTER ---------- */
.footer { background: var(--navy-900); color: #A9C1D6; padding-top: 72px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr; gap: 40px; padding-bottom: 56px; }
.footer__col h4 { color: var(--white); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { color: #A9C1D6; font-size: .94rem; }
.footer__col a:hover { color: var(--ice-400); }
.footer__col--brand .logo { margin-bottom: 18px; }
.footer__col--brand p { font-size: .94rem; max-width: 34ch; }
.footer address { font-size: .92rem; line-height: 1.75; margin-bottom: 16px; }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #C4D8EA;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--blue-600); color: var(--white); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.footer__bottom p { margin: 0; font-size: .85rem; color: #7F9BB4; }

/* Tombol WhatsApp mengambang */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366; color: var(--white);
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: var(--white); box-shadow: 0 14px 32px rgba(37, 211, 102, .5); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- 7. RESPONSIF ---------- */
@media (max-width: 1080px) {
  .cards, .industries { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .values__grid { grid-template-columns: repeat(3, 1fr); row-gap: 38px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__spec { max-width: 480px; }
  .welcome__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 68px; }
  .topbar__hours { display: none; }
  .burger { display: block; }

  /* Panel ditambatkan ke .header dengan top:100% supaya selalu menempel
     tepat di bawahnya, tanpa bergantung pada nilai --header-h. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-lg);
    padding: 12px var(--pad) 24px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav__link { flex: 1 1 auto; padding: 14px 4px; border-radius: 0; font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav__item--has-menu .nav__link { padding-right: 4px; }
  .nav__toggle { width: 46px; height: 50px; flex: none; }

  /* Submenu jadi accordion: menyatu dalam alur, dibuka lewat tombol panah */
  .nav__menu {
    position: static;
    display: none;
    width: 100%; min-width: 0;
    margin: 0 0 10px; padding: 4px 0 4px 14px;
    background: transparent; border: 0; box-shadow: none;
    border-left: 2px solid var(--line);
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav__menu.is-open { display: block; }
  .nav__sublink { padding: 11px 10px; white-space: normal; }
  .nav__group { padding: 10px 10px 2px; }
  /* Padding ikut pindah ke <a> seperti di layar lebar, supaya seluruh
     baris tetap jadi sasaran sentuh di ponsel. */
  .nav__group--tautan { padding: 0; }
  .nav__grouplink { padding: 10px 10px 2px; }
  /* Panahnya ditampilkan tetap: di layar sentuh tidak ada hover, jadi
     tanpa ini tidak ada apa pun yang memberi tahu label itu bisa
     diketuk. */
  .nav__grouplink::after { opacity: 1; transform: none; }
  .nav__cta { margin-top: 18px; }

  /* .gallery sudah 2 kolom sejak breakpoint 1080px di atas */
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat:nth-child(2n) { border-right: 0; }
  .why { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .aside-card { position: static; }
  .related { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .cta__inner { grid-template-columns: 1fr; gap: 28px; }
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  :root { --pad: 18px; }
  .section { padding: 68px 0; }
  .section__head { margin-bottom: 40px; }

  .topbar__inner { min-height: 42px; gap: 10px; }
  .topbar__lines { gap: 12px; }
  .topbar__sep, .topbar__line--email { display: none; }
  .topbar__text b { font-size: .68rem; }
  .topbar__text span { font-size: .76rem; }

  .logo__text strong { font-size: 1.14rem; }
  .logo__mark { width: 38px; height: 38px; }
  .logo__mark svg { width: 24px; height: 24px; }

  .hero { background-position: 72% center; }
  .hero__copy h1 { max-width: none; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__spec { padding: 24px 20px; }
  .spec__temp span { font-size: 1.9rem; }

  .cards, .industries, .process, .clients__grid, .footer__grid { grid-template-columns: 1fr; }

  /* Kartu lini menumpuk: ikon dan teks sebaris, jumlah pindah ke bawah
     judul supaya nama lini tidak terjepit jadi dua huruf per baris. */
  .lini__kepala { flex-wrap: wrap; gap: 14px; padding: 20px; }
  .lini__teks { flex: 1 1 140px; }
  .lini__meta { width: 100%; justify-content: space-between; }
  .lini__isi { padding: 0 20px 22px; }
  /* Nilai tetap 2 kolom agar barisan ikon tidak terlalu memanjang */
  .values__grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .value__icon { width: 64px; height: 64px; margin-bottom: 14px; }
  .value b { font-size: 1.02rem; }
  .step { padding-top: 26px; }
  .gallery { grid-template-columns: 1fr; gap: 14px; }
  .shot--tall { grid-row: span 1; aspect-ratio: 3 / 4; }
  .shot figcaption { opacity: 1; transform: none; font-size: .74rem; padding: 20px 10px 9px; }
  .faq__q { padding: 16px 18px; font-size: .95rem; }
  .faq__a p { padding: 0 18px 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact__form, .why__block, .welcome__note { padding: 28px 22px; }
  .regions__panels { padding: 26px 22px; }
  .rtab { flex: 1 1 50%; padding: 13px 12px; font-size: .86rem; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}