/* =========================================================
   PT. Alfatih Techno Mandiri
   Fiber Optik & Konstruksi Gedung
   Tema: korporat elegan, putih & biru navy
   ========================================================= */

:root {
  --navy: #0B2545;
  --navy-2: #123A6B;
  --navy-deep: #07182F;
  /* Warna aksen disamakan dengan logo: biru azure + merah */
  --blue: #0E76B0;
  --blue-dark: #0B5C8C;
  --blue-bright: #1A93D2;
  --blue-soft: #E7F4FB;
  --sky: #4FB3E8;
  --red: #E21B22;
  --bg: #F4F7FC;
  --surface: #FFFFFF;
  --ink: #0F1B2D;
  --muted: #5D6B84;
  --line: #E3EAF6;
  --green: #25D366;
  --amber: #F2B23E;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(15, 27, 45, .05);
  --shadow: 0 10px 28px rgba(15, 27, 45, .07);
  --shadow-lg: 0 22px 48px rgba(11, 37, 69, .14);
  --container: 1180px;
  --header-h: 78px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--blue-dark); }
h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.22; letter-spacing: -.018em; color: var(--navy); font-weight: 800; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.14rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg.ico { flex: 0 0 auto; }
button { font: inherit; }
s { color: var(--muted); }

::focus-visible { outline: 3px solid rgba(29, 99, 210, .35); outline-offset: 2px; }

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.section { padding: 92px 0; }
.section-tight { padding: 44px 0; }
.section-top-none { padding-top: 0; }
.section-top-tight { padding-top: 34px; }
.section-alt { background: var(--bg); }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; text-align: left; }
.section-head-row .section-lead { margin-bottom: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--red); border-radius: 2px; }
.eyebrow-light { color: #9FC4F7; }
.section-title { margin-bottom: .5em; }
.section-lead { color: var(--muted); font-size: 1.05rem; max-width: 680px; }
.section-head .section-lead { margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.muted-small { color: var(--muted); font-size: .9rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 700; font-size: .95rem; cursor: pointer; text-align: center;
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.btn svg { flex: 0 0 auto; }
.btn-primary { background: linear-gradient(135deg, var(--blue-bright) 0%, var(--blue) 100%); color: #fff; box-shadow: 0 10px 22px rgba(14, 118, 176, .3); }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px rgba(21, 79, 174, .34); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-outline:hover { color: var(--blue); border-color: #BFD5F5; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: #F1F5FC; color: var(--navy); }
.btn-ghost:hover { color: var(--blue); background: var(--blue-soft); }
.btn-ghost-light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 12px 26px rgba(4, 14, 30, .28); }
.btn-light:hover { color: var(--blue); transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-glass { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .34); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255, 255, 255, .24); color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: .87rem; }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-block { width: 100%; }
.icon-btn {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy);
  cursor: pointer; transition: all .2s ease;
}
.icon-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; }
.link-arrow svg { transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Topbar ---------- */
.topbar { background: var(--navy-deep); color: rgba(255, 255, 255, .74); font-size: .82rem; }
/* Bar atas dulu meluber keluar layar di 320px & 641–700px sehingga isinya terpotong di
   tepi kanan. Sekarang: flex-wrap sebagai jaring pengaman, nowrap supaya teks tidak pecah
   dua baris, lalu item yang sudah ada di footer disembunyikan bertahap di layar sempit
   (lokasi pada <=900px, situs pada <=640px, teks email pada <=400px). */
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; min-height: 42px; }
.topbar a, .topbar-item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .74); white-space: nowrap; }
.topbar a:hover { color: #fff; }
.topbar-left, .topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.topbar-social { color: rgba(255, 255, 255, .7); }
.topbar-social:hover { color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(11, 37, 69, .08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); }
.brand:hover { color: var(--blue); }
.brand-logo {
  width: 46px; height: 46px; display: block; flex: 0 0 auto;
  filter: drop-shadow(0 6px 12px rgba(11, 37, 69, .16));
}
.brand-light .brand-logo { width: 52px; height: 52px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text small { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.brand-light, .brand-light:hover { color: #fff; }
.brand-light .brand-text small { color: rgba(255, 255, 255, .6); }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav > a {
  position: relative; padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: .95rem;
}
.site-nav > a:hover { color: var(--blue); background: var(--blue-soft); }
.site-nav > a.is-active { color: var(--blue); }
.site-nav > a.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--blue); border-radius: 2px;
}
.site-nav .nav-cta { margin-left: 12px; }
.site-nav .nav-cta:hover { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; }
.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer;
}
.nav-toggle-close { display: none; }
body.nav-open .nav-toggle-open { display: none; }
body.nav-open .nav-toggle-close { display: block; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; min-height: clamp(520px, 76vh, 720px); display: flex; align-items: center; overflow: hidden; }
/* Tinggi hero: >=1024px mengikuti lebar layar (lebar / 1,87) supaya foto lebar tampil
   hampir penuh tingginya. Di bawah 1024px tinggi hero sudah ditentukan isi hero sendiri,
   jadi tidak perlu aturan tambahan (lihat AGENTS.md). */
@media (min-width: 1024px) {
  .hero { min-height: clamp(560px, calc(100vw / 1.87), 1400px); }
}

.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* <picture> membungkus foto banner: <=767px memakai citra lambang (hero-lambang.jpg) yang
   menampilkan hanya logo emblem di tengah tanpa tulisan; >=768px memakai citra lebar
   (hero-luas.jpg) yang menempatkan logo + nama perusahaan tepat di tengah bingkai.
   Pembungkusnya dibuat memenuhi seluruh hero. */
.hero picture { position: absolute; inset: 0; display: block; }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 22, 44, .93) 0%, rgba(9, 32, 62, .82) 45%, rgba(11, 37, 69, .48) 100%),
    radial-gradient(900px 420px at 88% 8%, rgba(66, 160, 245, .32), transparent 70%);
}
.hero-inner { position: relative; z-index: 2; padding: 90px 24px 110px; color: #fff; text-align: center; }
/* Isi hero dibuat lebih lebar dari container biasa (1180px) supaya kalimat judul
   tersebar ke samping dan tampak seperti banner. Hanya berlaku di hero. */
.hero .hero-inner { max-width: 1440px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .1); color: #DCE9FB;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.hero h1 { color: #fff; max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: .45em; }
.hero h1.hero-title-wide { max-width: 100%; font-size: clamp(1.15rem, 1.75vw, 1.65rem); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.hero h1 .hl {
  background: linear-gradient(180deg, transparent 62%, rgba(66, 160, 245, .55) 62%);
  padding: 0 4px;
}
.hero-lead { max-width: 900px; margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, .84); font-size: 1.08rem; }
.hero-lead a { color: #7FC0FF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero-lead a:hover { color: #fff; }
.hero-lead a svg { vertical-align: -2px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 30px 0 26px; }
.hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.hero-points li { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .82); font-size: .9rem; font-weight: 500; }
.hero-points svg { color: #7FC0FF; }

.hero-stats {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; margin-top: -62px;
}
.stat-card {
  background: #fff; border-radius: var(--radius); padding: 22px 24px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.stat-value { font-size: 1.9rem; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1.1; }
.stat-label { font-size: .85rem; color: var(--muted); font-weight: 600; }

/* ---------- Logo strip ---------- */
.logo-strip { padding: 54px 0 10px; }
.logo-strip-label { text-align: center; color: var(--muted); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-bottom: 24px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.logo-item {
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: #fff; color: var(--navy-2); font-weight: 700; font-size: .9rem; letter-spacing: -.01em;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, color .2s ease;
}
.logo-item:hover { transform: translateY(-2px); color: var(--blue); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.icon-box {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--blue-soft); color: var(--blue); margin-bottom: 18px;
}
.service-card h3 { margin-bottom: .35em; }
.service-card p { color: var(--muted); font-size: .95rem; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #D6E3F8; }
.service-card .link-arrow { margin-top: 16px; }
.service-card.compact { padding: 26px; }
.mini-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.mini-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--muted); }
.mini-list svg { color: var(--blue); margin-top: 3px; }
.check-list { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 28px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: .96rem; }
.check-list svg { color: var(--blue); margin-top: 4px; background: var(--blue-soft); border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.check-list strong { color: var(--ink); }
.value-card { text-align: left; }
.value-card p { color: var(--muted); font-size: .93rem; }

/* ---------- About grid ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.about-media { position: relative; }
.about-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.2; object-fit: cover; width: 100%; }
/* Blok foto halaman Tentang Kami. Rasio disamakan dengan berkas fotonya
   (1252x843) supaya foto tampil utuh tanpa dipotong. */
.about-media-wide img { aspect-ratio: 1252 / 843; }
.about-badge {
  position: absolute; bottom: -22px; right: -14px; width: 190px;
  background: linear-gradient(135deg, var(--blue), var(--navy-2)); color: #fff;
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.about-badge strong { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.about-badge span { font-size: .8rem; color: rgba(255, 255, 255, .82); line-height: 1.4; }
.about-copy p { color: var(--muted); }
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }

/* ---------- Project cards ---------- */
.project-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #D6E3F8; }
.project-media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project-card:hover .project-media img { transform: scale(1.06); }
.project-chip {
  position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--blue); font-size: .76rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.project-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .82rem; font-weight: 600; }
.project-body h3 { margin: 0; font-size: 1.18rem; }
.project-body h3 a { color: var(--navy); }
.project-body h3 a:hover { color: var(--blue); }
.project-body p { color: var(--muted); font-size: .93rem; margin: 0; }
.project-body .link-arrow { margin-top: 6px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-dark); font-size: .76rem; font-weight: 700;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Navy band ---------- */
.navy-band {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(66, 160, 245, .3), transparent 65%),
    linear-gradient(120deg, var(--navy-deep), var(--navy-2));
}
.navy-band .section-title { color: #fff; }
.navy-band .section-lead { color: rgba(255, 255, 255, .78); }
.stat-band { gap: 22px; }
.stat-block { text-align: center; padding: 24px 12px; }
.stat-block + .stat-block { border-left: 1px solid rgba(255, 255, 255, .14); }
.stat-big { display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; }
.stat-caption { color: rgba(255, 255, 255, .74); font-size: .9rem; font-weight: 600; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.step-no {
  display: inline-block; margin-bottom: 12px; font-size: .95rem; font-weight: 800; letter-spacing: .12em;
  color: var(--blue); padding-bottom: 8px; border-bottom: 2px solid var(--blue-soft);
}
.step h3 { font-size: 1.06rem; }
.step p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- Products ---------- */
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #D6E3F8; }
.product-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-media img { transform: scale(1.05); }
.badge {
  position: absolute; top: 14px; right: 14px; padding: 5px 13px; border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(21, 79, 174, .3);
}
.badge-lg { font-size: .8rem; padding: 8px 18px; top: 20px; right: 20px; }
.product-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-cat { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.product-body h3 { margin: 0; font-size: 1.06rem; }
.product-body h3 a { color: var(--navy); }
.product-body h3 a:hover { color: var(--blue); }
.product-body p { color: var(--muted); font-size: .9rem; margin: 0; }
.product-body .mini-list { margin: 4px 0 6px; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.price { display: flex; flex-direction: column; font-weight: 800; color: var(--navy); font-size: 1.02rem; letter-spacing: -.02em; }
.price s { font-size: .78rem; font-weight: 600; }

/* ---------- Testimoni dihapus: perusahaan belum memiliki testimoni publik ---------- */

/* ---------- Notice box (catatan halaman) ---------- */
.notice-box {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 28px;
  padding: 18px 20px; border-radius: var(--radius); border: 1px solid #D5E4F9;
  background: linear-gradient(135deg, #F5F9FF, var(--blue-soft));
}
.notice-box svg { color: var(--blue); margin-top: 3px; }
.notice-box p { margin: 0; color: var(--navy-2); font-size: .9rem; }

/* ---------- Pengalaman kerjasama (tabel di halaman Portofolio) ---------- */
.table-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.xp-table { width: 100%; border-collapse: collapse; }
.xp-table caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.xp-table th, .xp-table td {
  text-align: left; padding: 16px 20px; font-size: .93rem;
  vertical-align: top; border-bottom: 1px solid var(--line);
}
.xp-table thead th {
  background: var(--navy); color: #fff; border-bottom: 0;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.xp-table tbody tr:nth-child(even) { background: #F7FAFF; }
.xp-table tbody tr:last-child td { border-bottom: 0; }
.xp-table th:first-child, .xp-table td:first-child { width: 58px; color: var(--muted); }
.xp-table td:nth-child(2) { font-weight: 700; color: var(--navy); }
.xp-table td:nth-child(2), .xp-table td:nth-child(5) { width: 22%; }
.xp-table td:nth-child(4) { white-space: nowrap; font-weight: 700; color: var(--blue); }
/* Logo instansi pemberi kerja (atau inisial bila berkas logo belum ada) */
.xp-emp { display: flex; align-items: center; gap: 12px; }
.xp-emp > span:last-child { min-width: 0; }
.xp-logo, .xp-mono {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line);
}
/* Logo sudah dinormalkan: kanvas persegi 1:1, konten maks 88% sisi, jadi semua
   logo tampil pada ukuran optis yang sama walau bentuk aslinya beda. Bingkai
   putih dipakai bersama supaya logo berlatar putih dan berlatar transparan
   (mis. Polda Sumut) tetap terlihat seragam di baris tabel yang berselang warna. */
.xp-logo { object-fit: contain; }
.xp-mono {
  display: grid; place-items: center; font-size: .76rem; font-weight: 800;
  letter-spacing: .04em; color: var(--navy); background: var(--blue-soft); border-color: #D5E4F9;
}

/* ---------- Ruang lingkup pekerjaan ---------- */
.scope-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.scope-list li {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  box-shadow: var(--shadow-sm); font-size: .93rem; color: var(--ink);
}
.scope-list svg { color: var(--blue); margin-top: 3px; }

/* ---------- Visi & misi ---------- */
.vision-card {
  position: relative; padding: 32px 34px; margin-bottom: 44px;
  border-radius: var(--radius-lg); border: 1px solid #D5E4F9;
  background: linear-gradient(135deg, #F5F9FF, var(--blue-soft));
  box-shadow: var(--shadow-sm);
}
.vision-card p { margin: 12px 0 0; font-size: 1.12rem; line-height: 1.7; color: var(--navy); font-weight: 600; }
.vision-label {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.sub-heading {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin: 0 0 20px; text-align: center;
}
.mission-grid { gap: 22px; }
.mission-card { padding: 26px; }
.mission-card h3 { font-size: 1.08rem; }
.mission-card p { color: var(--muted); font-size: .93rem; margin: 0; }

/* Misi ringkas di halaman depan */
.mission-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mission-icon {
  width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #9FC4F7;
}
.mission-title { color: #fff; font-size: .95rem; }
.section-foot-link { margin-top: 34px; text-align: center; }
.link-light { color: #9FC4F7; }
.link-light:hover { color: #fff; }

/* ---------- Legalitas ---------- */
.legal-grid { gap: 22px; }
.legal-card { padding: 28px; }
.legal-card h3 { font-size: 1rem; }
.legal-value { color: var(--navy); font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.legal-note { color: var(--muted); font-size: .87rem; margin: 0; }
.legal-mini { display: flex; flex-direction: column; margin: 4px 0 18px; }
.legal-mini > div { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.legal-mini > div:last-child { border-bottom: 0; }
.legal-mini dt { color: var(--muted); font-size: .8rem; }
.legal-mini dd { margin: 0; font-weight: 700; color: var(--navy); font-size: .9rem; }
.footer-legal { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.footer-legal > div { display: flex; flex-direction: column; gap: 1px; }
.footer-legal dt { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.footer-legal dd { margin: 0; font-size: .86rem; color: rgba(255, 255, 255, .82); }

/* ---------- Katalog tanpa harga (permintaan penawaran) ---------- */
.quote-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .84rem; font-weight: 600; }
.quote-note svg { color: var(--sky); }
.price-box-quote strong { font-size: 1.35rem; }
.price-box-quote small { display: block; margin-top: 4px; max-width: 340px; line-height: 1.5; }
.discount-chip-soft {
  background: #fff; color: var(--blue-dark); border: 1px solid #C9DCF7;
  display: inline-flex; align-items: center; gap: 8px;
}
.order-summary-note {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem;
}
.order-summary-note svg { color: var(--sky); }

/* ---------- Profil & kemampuan (halaman Portofolio) ---------- */
.profile-lead {
  max-width: 940px; margin: 0 auto 46px; padding: 28px 32px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue-bright);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.profile-lead p { margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.75; }

.capability-grid { gap: 24px; }
.capability-card { padding: 32px; }
.capability-card h3 { font-size: 1.16rem; }
.capability-ket { color: var(--muted); font-size: .92rem; margin-bottom: 6px; }
.capability-list {
  display: flex; flex-direction: column; gap: 16px; margin: 20px 0 0;
  list-style: none; padding: 0;
}
.capability-list li {
  display: flex; gap: 14px; align-items: flex-start;
  color: var(--ink); font-size: .94rem; line-height: 1.6;
}
.cap-no {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--blue-soft); color: var(--blue-dark);
  font-weight: 800; font-size: .84rem; letter-spacing: .02em;
}
.cap-text { padding-top: 4px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy-deep); }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.cta-band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 22, 44, .95) 0%, rgba(9, 32, 62, .88) 55%, rgba(18, 58, 107, .78) 100%);
}
.cta-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 76px 24px; }
.cta-copy { max-width: 620px; color: #fff; }
.cta-copy h2 { color: #fff; margin-bottom: .35em; }
.cta-copy p { color: rgba(255, 255, 255, .8); margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .72); padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 44px; }
.footer-about { margin: 20px 0 22px; font-size: .92rem; line-height: 1.75; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .14);
}
.footer-socials a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.footer-socials-dark a { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.footer-socials-dark a:hover { background: var(--blue); color: #fff; }
.footer-col h4 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: rgba(255, 255, 255, .72); font-size: .93rem; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.footer-contact svg { color: var(--sky); margin-top: 3px; }
.footer-contact .btn { margin-top: 18px; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem;
}
.footer-bottom-links { display: flex; align-items: center; gap: 10px; margin: 0; }
.footer-bottom-links a { color: rgba(255, 255, 255, .72); }
.footer-bottom-links a:hover { color: #fff; }

/* ---------- Floating ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; box-shadow: 0 14px 30px rgba(37, 211, 102, .4);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.07); color: #fff; }
.to-top {
  position: fixed; right: 90px; bottom: 26px; z-index: 59;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease;
}
.to-top svg { transform: rotate(-90deg); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; color: #fff; padding: 68px 0 64px;
  background:
    radial-gradient(760px 320px at 88% 4%, rgba(66, 160, 245, .34), transparent 68%),
    radial-gradient(520px 260px at 6% 96%, rgba(29, 99, 210, .28), transparent 70%),
    linear-gradient(120deg, var(--navy-deep), var(--navy-2));
}
.page-hero h1 { color: #fff; max-width: 900px; margin-bottom: .4em; }
.page-hero p { color: rgba(255, 255, 255, .82); max-width: 720px; font-size: 1.05rem; }
/* Paragraf pembuka Portofolio lebih panjang dari halaman lain → dilebarkan agar
   tidak menggantung 5 baris sempit (di 900px jadi 4 baris, sejajar lebar judul). */
.page-hero p.page-hero-lead-wide { max-width: 900px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.breadcrumb a { color: rgba(255, 255, 255, .8); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.page-hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.page-hero-stats span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  font-size: .85rem; font-weight: 600; color: #E4EEFB;
}
.page-hero-success { text-align: center; }
.page-hero-success h1, .page-hero-success p { margin-left: auto; margin-right: auto; }
.page-hero-success .breadcrumb { justify-content: center; }
.success-mark {
  width: 62px; height: 62px; margin: 4px auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
}
.order-code-box {
  display: inline-flex; flex-direction: column; gap: 2px; margin-top: 26px; padding: 16px 34px;
  border-radius: var(--radius); background: rgba(255, 255, 255, .12); border: 1px dashed rgba(255, 255, 255, .42);
}
.order-code-box span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .76); font-weight: 700; }
.order-code-box strong { font-size: 1.5rem; letter-spacing: .06em; }

/* ---------- Filter bar & chips ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 34px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 600; font-size: .88rem;
}
.chip span { font-size: .74rem; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 8px; }
.chip:hover { border-color: #BFD5F5; color: var(--blue); }
.chip.is-active { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(21, 79, 174, .26); }
.chip.is-active span { background: rgba(255, 255, 255, .22); color: #fff; }
.filter-count { margin: 0; color: var(--muted); font-size: .9rem; }
.filter-count strong { color: var(--navy); }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center; padding: 60px 28px; border: 1px dashed #CBD9EF; border-radius: var(--radius);
  background: linear-gradient(180deg, #FBFDFF, var(--bg)); color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-state svg { color: var(--sky); }
.empty-state h3 { margin: 6px 0 0; }
.empty-state p { max-width: 420px; }
.empty-state .btn { margin-top: 12px; }

/* ---------- Project detail ---------- */
.project-hero h1 { max-width: 820px; }
.detail-cover { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.detail-cover img { width: 100%; aspect-ratio: 16 / 8.4; object-fit: cover; }
.detail-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: start; }
.prose h2, .result-section h2, .gallery-section h2 { display: flex; align-items: center; gap: 14px; font-size: 1.5rem; margin-top: 8px; }
.prose h2 + p { color: var(--muted); }
.prose p { color: var(--muted); }
.num {
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; color: var(--blue);
  background: var(--blue-soft); border-radius: 8px; padding: 5px 10px;
}
.result-section, .gallery-section { margin-top: 46px; }
.result-grid { gap: 18px; }
.result-card {
  background: linear-gradient(180deg, #fff, var(--blue-soft)); border: 1px solid #D5E4F9;
  border-radius: var(--radius); padding: 24px 22px; text-align: center;
}
.result-card strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--blue-dark); letter-spacing: -.03em; }
.result-card span { color: var(--muted); font-size: .87rem; font-weight: 600; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery-item { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: .85rem; }
.detail-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 54px; }
.detail-nav-item {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm);
}
.detail-nav-item:hover { border-color: #BFD5F5; transform: translateY(-3px); box-shadow: var(--shadow); }
.detail-nav-item.next { text-align: right; align-items: flex-end; }
.detail-nav-label { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.detail-nav-item strong { color: var(--navy); font-size: 1.02rem; line-height: 1.35; }
.detail-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--header-h) + 24px); }
.side-card h3 { font-size: 1.08rem; }
.side-card h4.side-sub { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 22px 0 12px; }
.side-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.side-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.side-list > div:last-child { border-bottom: 0; }
.side-list dt { color: var(--muted); font-size: .88rem; }
.side-list dd { margin: 0; font-weight: 700; color: var(--navy); font-size: .92rem; text-align: right; }
.side-cta p { color: var(--muted); font-size: .92rem; }
.side-cta .btn + .btn { margin-top: 10px; }
.side-projects { display: flex; flex-direction: column; gap: 14px; }
.side-projects a { display: flex; gap: 12px; align-items: center; }
.side-projects img { width: 62px; height: 48px; border-radius: 8px; object-fit: cover; }
.side-projects strong { display: block; color: var(--navy); font-size: .9rem; line-height: 1.35; }
.side-projects a:hover strong { color: var(--blue); }
.side-projects small { color: var(--muted); font-size: .78rem; }
.side-contact { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.side-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); }
.side-contact svg { color: var(--blue); margin-top: 3px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 14, 30, .93); padding: 40px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 1000px; }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: 12px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.lightbox figcaption { text-align: center; color: rgba(255, 255, 255, .78); font-size: .88rem; margin-top: 14px; }
.lightbox-close {
  position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .26); }

/* ---------- Catalog toolbar ---------- */
.catalog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.search-field {
  display: flex; align-items: center; gap: 10px; flex: 1 1 320px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 16px; box-shadow: var(--shadow-sm); color: var(--muted);
}
.search-field input { flex: 1; border: 0; padding: 12px 0; font: inherit; font-size: .95rem; color: var(--ink); background: none; outline: none; }
.toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.select-field { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 14px; box-shadow: var(--shadow-sm); }
.select-field span { font-size: .85rem; color: var(--muted); font-weight: 600; }
.select-field select { border: 0; background: none; font: inherit; font-size: .92rem; font-weight: 600; color: var(--navy); padding: 12px 0; outline: none; cursor: pointer; }

/* ---------- Product detail ---------- */
.product-hero { padding: 30px 0 0; }
.product-hero .breadcrumb { color: var(--muted); margin-bottom: 0; }
.product-hero .breadcrumb a { color: var(--muted); }
.product-hero .breadcrumb a:hover { color: var(--blue); }
.product-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
.product-media-big { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.product-media-big img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.trust-row { display: grid; gap: 12px; margin-top: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-row li { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--muted); }
.trust-row svg { color: var(--blue); margin-top: 2px; }
.trust-row strong { display: block; color: var(--navy); font-size: .88rem; }
.product-info .product-cat { display: inline-block; margin-bottom: 12px; }
.product-info h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rating-text { color: var(--muted); font-size: .86rem; }
.product-lead { color: var(--muted); font-size: 1.02rem; }
.price-box {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(135deg, #F5F9FF, var(--blue-soft)); border: 1px solid #D5E4F9;
  border-radius: var(--radius); padding: 18px 22px; margin: 22px 0;
}
.price-box s { display: block; font-size: .85rem; color: var(--muted); }
.price-box strong { display: block; font-size: 1.8rem; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1.2; }
.price-box small { color: var(--muted); font-size: .8rem; }
.discount-chip { padding: 8px 14px; border-radius: 999px; background: var(--amber); color: #4A3208; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.feature-list { display: grid; gap: 10px; margin: 18px 0; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--muted); }
.feature-list svg { color: var(--blue); margin-top: 4px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.order-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: start; }
.info-card { padding: 32px; }
.info-card h2 { font-size: 1.4rem; }
.info-card h3 { font-size: 1.05rem; margin-top: 28px; }
.info-card p { color: var(--muted); }
.spec-table, .recap-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.spec-table th, .spec-table td, .recap-table th, .recap-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .93rem; vertical-align: top; }
.spec-table th, .recap-table th { color: var(--muted); font-weight: 600; width: 40%; }
.spec-table td, .recap-table td { color: var(--navy); font-weight: 600; }
.recap-total th, .recap-total td { font-weight: 800; }
.recap-total td { color: var(--blue-dark); font-size: 1.1rem; }
.note-box { display: flex; gap: 14px; margin-top: 24px; padding: 18px 20px; background: var(--blue-soft); border-radius: var(--radius); border: 1px solid #D5E4F9; }
.note-box svg { color: var(--blue); margin-top: 3px; }
.note-box p { color: var(--navy-2); font-size: .9rem; margin: 0; }
.order-side { position: sticky; top: calc(var(--header-h) + 24px); }
.order-card { padding: 28px; box-shadow: var(--shadow-lg); }
.order-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin-bottom: .25em; }
.order-sub { color: var(--muted); font-size: .88rem; }
.order-summary { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0 22px; }
.order-summary-top { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.order-summary-top img { width: 54px; height: 46px; border-radius: 8px; object-fit: cover; }
.order-summary-top strong { display: block; font-size: .92rem; color: var(--navy); line-height: 1.35; }
.order-summary-top small { color: var(--muted); font-size: .8rem; }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; }
.qty-row > span { font-size: .9rem; color: var(--muted); font-weight: 600; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.qty-btn { width: 38px; height: 40px; border: 0; background: #fff; color: var(--navy); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.qty-btn:hover { background: var(--blue-soft); color: var(--blue); }
.qty input { width: 52px; height: 40px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: inherit; font-weight: 700; color: var(--navy); }
.qty input:focus { outline: none; background: var(--blue-soft); }
.total-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.total-row span { font-weight: 700; color: var(--navy); }
.total-row strong { font-size: 1.25rem; color: var(--blue-dark); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group label { font-size: .88rem; font-weight: 700; color: var(--navy); }
.req { color: var(--red); }
.form-group input, .form-group select, .form-group textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease; width: 100%;
}
.form-group textarea { resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(29, 99, 210, .12);
}
.form-group.has-error input, .form-group.has-error textarea, .form-group.has-error select { border-color: #E28A8E; background: #FFF8F8; }
.field-error { margin: 0; color: #C42A30; font-size: .82rem; font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.form-sub { color: var(--muted); font-size: .92rem; margin-bottom: 22px; }
.order-fineprint { color: var(--muted); font-size: .8rem; margin: 14px 0 0; line-height: 1.6; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; border-radius: var(--radius-sm); margin-bottom: 22px; font-size: .92rem; }
.alert p { margin: 4px 0 0; font-size: .88rem; }
.alert-error { background: #FFF3F3; border: 1px solid #F3C9CB; color: #8F2126; }
.alert-success { background: #EEF9F1; border: 1px solid #C4E6CF; color: #1B6B39; }
.alert svg { margin-top: 2px; }

/* ---------- Order success ---------- */
.recap-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; }
.recap-main { display: flex; flex-direction: column; gap: 28px; }
.recap-side { display: flex; flex-direction: column; gap: 22px; }
.status-pill {
  display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px;
  background: #FFF4E2; color: #8A5A0B; font-size: .82rem; font-weight: 800; border: 1px solid #F6DCAF;
}
.lookup-card { max-width: 560px; margin: 0 auto; padding: 32px; }
.lookup-form { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.lookup-form .search-field { flex: 1 1 240px; }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin: 0; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--blue), rgba(29, 99, 210, .1)); }
.timeline-item { position: relative; display: flex; gap: 24px; padding: 0 0 30px; }
.timeline-item::before {
  content: ''; position: absolute; left: -32px; top: 8px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); box-shadow: 0 0 0 4px rgba(29, 99, 210, .12);
}
.timeline-year { flex: 0 0 84px; font-weight: 800; color: var(--blue); letter-spacing: -.01em; font-size: 1.05rem; }
.timeline-body h3 { margin-bottom: .25em; font-size: 1.08rem; }
.timeline-body p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- Team ---------- */
.team-card { padding: 0; overflow: hidden; }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.team-photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.team-card:hover .team-photo img { transform: scale(1.05); }
.team-body { padding: 22px 24px 26px; }
.team-body h3 { margin-bottom: .15em; font-size: 1.05rem; }
.team-role { display: block; color: var(--blue); font-size: .82rem; font-weight: 700; margin-bottom: 10px; }
.team-body p { color: var(--muted); font-size: .89rem; margin: 0; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; align-items: start; }
.contact-main { display: flex; flex-direction: column; gap: 28px; }
.contact-cards { gap: 20px; }
.contact-card { padding: 26px; }
.contact-card h3 { font-size: 1.05rem; margin-bottom: .3em; }
.contact-card p { color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
.contact-card .link-arrow { font-size: .88rem; }
.form-card { padding: 34px; }
.contact-side { display: flex; flex-direction: column; gap: 22px; }
.map-card { padding: 0; overflow: hidden; }
.map-visual {
  position: relative; height: 190px;
  background:
    linear-gradient(135deg, rgba(29, 99, 210, .14), rgba(11, 37, 69, .1)),
    repeating-linear-gradient(0deg, #EAF1FB 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, #EAF1FB 0 1px, transparent 1px 34px),
    #F7FAFF;
  display: flex; align-items: center; justify-content: center;
}
.map-pin {
  width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--navy-2)); color: #fff; box-shadow: 0 12px 26px rgba(21, 79, 174, .34);
  position: relative; z-index: 2;
}
.map-road { position: absolute; left: 0; right: 0; top: 58%; height: 8px; background: rgba(29, 99, 210, .16); }
.map-road-2 { top: auto; bottom: 18%; height: 5px; background: rgba(29, 99, 210, .1); }
.map-info { padding: 22px 24px 26px; }
.map-info h3 { font-size: 1.02rem; }
.map-info p { color: var(--muted); font-size: .9rem; }
.faq-list { display: flex; flex-direction: column; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  cursor: pointer; font-weight: 700; color: var(--navy); font-size: .93rem; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--blue); font-size: 1.2rem; line-height: 1; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { margin: 10px 0 0; color: var(--muted); font-size: .89rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { font-size: .8rem; }
  .topbar-left, .topbar-right { gap: 6px 16px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 36px; }
  .detail-grid, .order-layout, .recap-layout, .contact-layout, .product-layout { grid-template-columns: 1fr; }
  .detail-side, .order-side { position: static; }
  .order-card { box-shadow: var(--shadow); }
  .about-grid { gap: 40px; }
  .cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 900px) {
  .section { padding: 68px 0; }
  /* Lokasi sudah tercantum lengkap di footer, jadi dilepas dari bar atas pada layar ini
     supaya email + situs + telepon tetap muat tanpa meluber. */
  .topbar-left .topbar-item { display: none; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tabel pengalaman kerjasama berubah jadi daftar kartu bertumpuk di layar sempit */
  .xp-table thead { display: none; }
  .xp-table, .xp-table tbody, .xp-table tr, .xp-table td { display: block; width: 100%; }
  .xp-table tr { padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
  .xp-table tbody tr:nth-child(even) { background: #F7FAFF; }
  .xp-table tbody tr:last-child { border-bottom: 0; }
  .xp-table td { border: 0; padding: 5px 20px; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 2px 12px; }
  .xp-table td::before {
    content: attr(data-label); font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .xp-table td:first-child, .xp-table td:nth-child(2), .xp-table td:nth-child(5) { width: 100%; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
  .about-grid { grid-template-columns: 1fr; }
  .about-badge { right: 16px; bottom: -18px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -40px; gap: 14px; }
  .trust-row { grid-template-columns: 1fr; }
  .stat-block + .stat-block { border-left: 0; }
  .stat-block { border-top: 1px solid rgba(255, 255, 255, .12); }
  .stat-block:nth-child(-n+2) { border-top: 0; }
  .timeline-year { flex-basis: 68px; }
  .contact-cards { grid-template-columns: 1fr; }
  .detail-nav { grid-template-columns: 1fr; }
  .detail-nav-item.next { text-align: left; align-items: flex-start; }
  .scope-list { grid-template-columns: 1fr; }

  .nav-toggle { display: inline-flex; }  .site-nav {
    position: absolute; top: calc(var(--header-h) + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 14px 20px 22px; box-shadow: 0 20px 40px rgba(11, 37, 69, .12);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all .24s ease;
  }
  body.nav-open .site-nav { transform: none; opacity: 1; visibility: visible; }
  .site-nav > a { padding: 13px 14px; font-size: 1rem; }
  .site-nav > a.is-active::after { display: none; }
  .site-nav > a.is-active { background: var(--blue-soft); }
  .site-nav .nav-cta { margin: 8px 0 0; }
  .product-hero { padding-top: 22px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .container { padding: 0 18px; }
  .section { padding: 54px 0; }
  .section-head { margin-bottom: 36px; }
  .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 18px; }
  .hero { min-height: 0; }
  .hero-inner { padding: 66px 18px 88px; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { grid-template-columns: 1fr; margin-top: -34px; }
  .card { padding: 24px; }
  /* Di ponsel: alamat situs dilepas (berulang & tetap ada di halaman Kontak), sedangkan
     alamat email justru ditampilkan karena paling sering dibutuhkan. */
  .topbar-right .topbar-item { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
  .price-box-quote { flex-direction: column; align-items: flex-start; }
  .cta-inner { padding: 58px 18px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { width: 100%; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-logo { width: 40px; height: 40px; }
  .brand-light .brand-logo { width: 44px; height: 44px; }
  .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .to-top { right: 80px; bottom: 18px; }
  .info-card, .form-card, .order-card, .lookup-card { padding: 24px; }
  .filter-bar { padding: 16px; }
  .catalog-toolbar .btn { width: 100%; }
  .order-code-box { padding: 14px 22px; }
  .order-code-box strong { font-size: 1.2rem; }
  .timeline { padding-left: 26px; }
  .timeline-item { flex-direction: column; gap: 4px; }
  .timeline-item::before { left: -24px; }
  .lookup-form .btn { width: 100%; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ponsel sangat sempit: teks email dilepas, sisakan ikonnya (tautan mailto tetap aktif),
   supaya nomor telepon tetap terbaca penuh tanpa meluber. */
@media (max-width: 400px) {
  .topbar-left a span { display: none; }
  .topbar-left, .topbar-right { gap: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}