/* ==========================================================================
   Inovatek — lembar gaya tunggal untuk kelima halaman.

   Arah visual: "presisi". Latar putih dingin, tinta hampir hitam, satu aksen
   biru tua. Sudut tajam, garis hairline, tanpa bayangan. Kesan yang dituju:
   teliti dan terukur, bukan hangat dan ramah.
   ========================================================================== */

/* --- Token ---------------------------------------------------------------
   Semua warna dan jarak didefinisikan sekali di sini. Mengubah identitas
   situs cukup mengubah blok ini, tidak perlu menyisir seluruh berkas.        */

:root {
  --bg:        #FAFAFA;
  --surface:   #FFFFFF;
  --ink:       #0E1116;
  --muted:     #5B6068;
  --line:      #E2E4E7;
  --line-soft: #EDEEF0;
  --accent:    #1B4D8F;
  --accent-dk: #143A6B;

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --head:  "Space Grotesk", "Inter", Arial, sans-serif;
  /* Angka seksi memakai monospace bawaan sistem, bukan font ketiga dari
     Google Fonts. Menambah satu font lagi berarti satu permintaan jaringan
     lagi untuk sekadar menampilkan "01". Tidak sepadan. */
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap:  1140px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --radius: 2px;
}

/* --- Reset ringkas ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* Tekstur grid hairline 32px dari gradien CSS, bukan berkas gambar: nol
     permintaan jaringan tambahan. Kartu berlatar putih di atasnya jadi lebih
     menonjol karena bidang di sekelilingnya tidak rata kosong. */
  background-image:
    linear-gradient(rgba(14, 17, 22, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 17, 22, .032) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }
/* Reset margin bawaan browser pada elemen yang dipakai di dalam kartu.
   Kalau terlewat, margin bawaan <figure>/<ol>/<dl> menyisakan celah dan
   latar grid berwarna garis mengintip di sela kartu. */
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Tipografi ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 6vw, 66px); }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }
h4 { font-size: 16px; letter-spacing: 0; }

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

.lead    { font-size: clamp(17px, 1.7vw, 20px); color: var(--muted); line-height: 1.6; }
.muted   { color: var(--muted); }
.small   { font-size: 14px; }

/* --- Tata letak ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.section { padding-block: var(--s7); border-top: 1px solid var(--line); }

/* Kepala seksi. */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.sec-head p { margin: 0; }
.sec-head .lead { max-width: 46ch; margin-top: var(--s1); }
.sec-head-text { flex: 1; }

/* --- Bilah navigasi ------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 250, 0.9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: 68px;
}
.nav-links { display: flex; gap: var(--s4); }
.nav-links a {
  text-decoration: none;
  font-size: 15px;
  color: var(--muted);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.nav-side { display: flex; align-items: center; gap: var(--s2); }

/* --- Logo -----------------------------------------------------------------
   Berkas logo yang diberikan pemilik merek berwarna putih, dirancang untuk
   latar gelap. Situs ini berlatar terang, jadi yang dipakai adalah
   `logo.svg` - bentuk yang sama persis, hanya nilai fill-nya diganti ke
   warna tinta situs. Versi putih aslinya disimpan sebagai `logo-putih.svg`
   untuk dipakai kalau nanti ada blok berlatar gelap yang memuat logo.      */

.brand { display: block; text-decoration: none; }
.brand img { display: block; height: 42px; width: auto; }
.foot .brand { margin-bottom: var(--s3); }
.foot .brand img { height: 48px; }

/* Pemilih bahasa */
.lang { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lang button {
  font: inherit;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  padding: 5px 9px;
  background: var(--surface);
  color: var(--muted);
  border: 0;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block; width: 16px; height: 1.5px;
  background: var(--ink); margin-inline: auto; content: "";
}
.nav-toggle span::before { transform: translateY(-5px); }
.nav-toggle span::after  { transform: translateY(3.5px); }

.mobile-panel {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.mobile-panel.is-open { display: block; }
.mobile-panel a {
  display: block;
  padding: 14px var(--s3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}

/* --- Tombol -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- Hero ---------------------------------------------------------------- */

/* Jarak atas hero sengaja tidak sebesar jarak bawahnya. Bilah navigasi sudah
   memberi ruang kosongnya sendiri, jadi padding 128px di sini membuat teks
   pertama terlempar terlalu jauh ke bawah dan layar pertama terasa kosong. */
.hero { padding-block: var(--s6) var(--s7); position: relative; overflow: hidden; }

/* Cahaya biru samar di belakang hero supaya bidang atas tidak datar. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 72% at 72% 34%, rgba(27, 77, 143, .09), transparent 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s6);
  align-items: center;
}
.hero-art img { width: 100%; height: auto; }
.hero-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--s3);
}
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 54ch; margin-block: var(--s3) var(--s5); }

/* --- Grid berbatas -------------------------------------------------------
   Kartu dipisah garis hairline, bukan jarak kosong atau bayangan. Inilah
   "grid" pada arah visual yang dipilih: strukturnya terlihat, bukan tersirat. */

.grid {
  display: grid;
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Grid yang jumlah kolomnya mengikuti jumlah kartu yang TAMPAK, bukan jumlah
   kartu yang ada. Dipakai di halaman Portofolio: begitu saringan menyembunyikan
   sebagian kartu, jalur kolom yang kosong diciutkan sampai lebar nol dan kartu
   yang tersisa melebar mengisi ruangnya. Tanpa ini, kolom kosong menyisakan
   bidang abu-abu - yaitu latar wadah grid yang mengintip di sela kartu.

   `min(320px, 100%)` dipakai, bukan `320px` saja, supaya di layar yang lebih
   sempit dari 320px kartunya ikut menyempit alih-alih meluber ke samping. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.cell {
  background: var(--surface);
  padding: var(--s4);
}
.cell p  { color: var(--muted); font-size: 15px; }

.tick { margin-top: var(--s3); }
.tick li {
  font-size: 14px;
  color: var(--muted);
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
}
.tick li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 1px;
  background: var(--accent);
}

/* --- Angka bukti --------------------------------------------------------- */

.stat { background: var(--surface); padding: var(--s4); }
.stat b {
  display: block;
  font-family: var(--head);
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat span { display: block; margin-top: var(--s1); font-size: 14px; color: var(--muted); }

/* --- Testimoni ----------------------------------------------------------- */

/* Kartu dijadikan flex kolom dan kutipannya diberi flex: 1, supaya blok nama
   selalu menempel ke dasar kartu. Grid sudah menyamakan tinggi kedua kartu,
   jadi nama pada kartu kiri dan kanan otomatis sejajar - berapa pun panjang
   kutipannya. Menyamakan panjang kalimat demi kerapian akan memaksa isi
   mengikuti tata letak, dan itu terbalik. */
.quote {
  background: var(--surface);
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
}
.quote blockquote { flex: 1; }
.quote blockquote {
  margin: 0 0 var(--s4);
  font-family: var(--head);
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.quote figcaption { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s2); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 600; }

/* --- Alur kerja ---------------------------------------------------------- */

.flow { border-top: 1px solid var(--line); }
.flow li {
  display: grid;
  grid-template-columns: 72px 220px 1fr;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.flow .step { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.06em; }
.flow h3 { font-size: 17px; }
.flow p  { color: var(--muted); font-size: 15px; margin: 0; }

/* --- Portofolio ---------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s4); }
.filters button {
  font: inherit;
  font-size: 14px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Thumbnail menempel penuh ke tepi kartu, jadi jaraknya dipindah ke .work-body */
.work { background: var(--surface); padding: 0; }
.work-body { padding: var(--s4); }
.work .kat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}
.work h3 { margin-block: var(--s2) var(--s1); }
.work .klien { font-size: 13px; color: var(--muted); margin-bottom: var(--s3); }
.work p { font-size: 15px; color: var(--muted); }
.stacks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.stacks span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 8px;
}
.is-hidden { display: none !important; }

/* --- Formulir ------------------------------------------------------------ */

.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.field label .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -9999px; }

.info-list { border-top: 1px solid var(--line); }
.info-list div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s2);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.info-list dt { color: var(--muted); font-size: 14px; }
.info-list dd { margin: 0; }
.info-list a { color: var(--accent); }

/* --- Ajakan menghubungi -------------------------------------------------- */

/* Grid gelap pada blok ajakan menghubungi, kebalikan dari latar terang. */
.cta {
  background-color: var(--ink);
  color: #fff;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cta h2 { max-width: 20ch; }
.cta .lead { color: rgba(255,255,255,.66); max-width: 52ch; margin-block: var(--s3) var(--s5); }
.cta .btn { background: #fff; border-color: #fff; color: var(--ink); }
.cta .btn:hover { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.cta .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.cta .sec-head { border-bottom-color: rgba(255,255,255,.18); }

/* --- Footer -------------------------------------------------------------- */

.foot { border-top: 1px solid var(--line); padding-block: var(--s6) var(--s4); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
.foot h4 { font-family: var(--sans); font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0.04em; margin-bottom: var(--s2); text-transform: uppercase; }
.foot li { margin-bottom: 8px; font-size: 15px; }
.foot a { text-decoration: none; color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot-note {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

/* --- Responsif ----------------------------------------------------------- */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .flow li { grid-template-columns: 56px 1fr; }
  .flow li p { grid-column: 2; }
  .section { padding-block: var(--s6); }
  .hero { padding-block: var(--s5) var(--s6); }
}

@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: var(--s4); }
  .sec-head { flex-direction: column; gap: var(--s1); }
  .info-list div { grid-template-columns: 1fr; gap: 2px; }
  .cell { padding: var(--s3); }
  /* Logo baru lebih memanjang (rasio 4,8:1), jadi di layar sempit
     tingginya diturunkan agar tidak mepet ke pemilih bahasa. */
  .brand img { height: 30px; }
}

/* --- Cetak & preferensi gerak -------------------------------------------- */

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

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-art { max-width: 460px; }
}

/* --- Kartu berfoto -------------------------------------------------------
   Foto memenuhi kartu, teks duduk di atasnya. Supaya teks putih tetap
   terbaca di foto apa pun - terang maupun gelap - dipasang dua lapis:
   filter yang meredupkan fotonya, dan gradien gelap yang menebal ke bawah
   tepat di tempat teks berada. Mengandalkan salah satunya saja berisiko:
   ada foto yang bagian bawahnya kebetulan putih.                           */

.photo-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  background: var(--ink);
  overflow: hidden;
}
.photo-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.4) brightness(.6) contrast(1.05);
}
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Diperkuat setelah diuji: kartu yang tinggi menaruh teksnya di area yang
     masih terang, dan foto berpola ramai (tangkapan layar kode) membuat teks
     putih sulit dibaca. Gelapnya kini bertahan sampai 65% tinggi kartu. */
  background: linear-gradient(to top,
    rgba(14, 17, 22, .96) 0%,
    rgba(14, 17, 22, .88) 38%,
    rgba(14, 17, 22, .62) 65%,
    rgba(14, 17, 22, .28) 100%);
}
.photo-card-body { position: relative; z-index: 1; padding: var(--s4); }
.photo-card h3 { color: #fff; margin-bottom: var(--s2); }
.photo-card p  { color: rgba(255, 255, 255, .78); font-size: 15px; }
.photo-card .tick li { color: rgba(255, 255, 255, .72); }
.photo-card .tick li::before { background: #fff; }

/* Sel biru pekat sebagai penutup grid, jadi jeda dari deretan foto. */
.cell--accent {
  background: var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cell--accent h3, .cell--accent p { color: #fff; }
.cell--accent .btn { background: #fff; border-color: #fff; color: var(--accent); }
.cell--accent .btn:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); }

/* Foto pada kartu proyek dan halaman Tentang: sedikit dikurangi warnanya
   supaya biru aksen situs tetap jadi satu-satunya warna yang menonjol. */
.work-thumb {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(.3) contrast(1.04);
}
.story-photo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s5);
  border: 1px solid var(--line);
  filter: grayscale(.26) contrast(1.03);
}

@media (max-width: 640px) {
  .photo-card { min-height: 320px; }
}