/* Gaya web contoh company profile "PT. AAW", versi 4 (lihat design.md).
   Warna rata: tanpa gradasi dan tanpa bayangan. Satu keluarga huruf: Archivo (aset/fonts).
   Versi 4 = versi 3 + gerak bertema bangunan: bata runtuh di atas foto, denah yang digambar, pita keselamatan berjalan,
   rel langkah yang terisi, tirai pembuka, dan perpindahan halaman bergaya tangga. Semua gerak hanya memakai transform,
   opacity, dan clip-path; mati kalau pengunjung memilih "kurangi gerak"; tanpa JavaScript isi tetap tampil. */

@font-face {
  font-family: 'Archivo';
  src: url('/aset/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Huruf cadangan untuk detik-detik sebelum Archivo selesai dimuat: Arial yang disesuaikan lebarnya (hasil ukur pada teks
   di semua halaman: tebal 99,3%, biasa 98,7%), supaya baris tidak berpindah dan halaman tidak melompat saat huruf asli datang. */
@font-face {
  font-family: 'Archivo Cadangan';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  font-weight: 100 599;
  size-adjust: 98.7%;
}
@font-face {
  font-family: 'Archivo Cadangan';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold');
  font-weight: 600 900;
  size-adjust: 99.3%;
}

:root {
  --navy: #0E3B43;
  --baja: #1F6F78;
  --kuning: #F28C45;
  --kuning-gelap: #DB7428;
  --beton: #EAF1F0;
  --kertas: #FFFFFF;
  --arang: #14262A;
  --teks-2: #233538;
  --abu: #4D6366;
  --garis: #D3E0E0;
  --garis-kuat: #A3BBBC;
  --kaki-teks: #C9DADA;
  --kaki-garis: #27565C;
  --lebar: 1200px;
  --gutter: 20px;
  --sans: 'Archivo', 'Archivo Cadangan', 'Segoe UI', Arial, sans-serif;
  --ease-keluar: cubic-bezier(.16, 1, .3, 1);
  --ease-bata: cubic-bezier(.7, 0, .2, 1);
  --ease-pantul: cubic-bezier(.34, 1.56, .64, 1);
  /* jeda dasar semua gerak masuk: ditambah saat tirai pembuka berjalan atau saat halaman dibuka lewat pita perpindahan */
  --jeda-dasar: 0s;
}
html.intro-jalan { --jeda-dasar: 1.05s; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--arang);
  background: var(--kertas);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--baja); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; color: var(--navy); line-height: 1.15; }
p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--baja); outline-offset: 3px; }

.lewati {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 110;
  padding: 12px 16px;
  background: var(--kuning);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.lewati:focus { top: 12px; }
.sr-saja {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.wadah {
  width: 100%;
  max-width: calc(var(--lebar) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

/* Bilah contoh di paling atas setiap halaman */
.bilah-contoh { background: var(--kuning); color: var(--navy); font-size: .875rem; line-height: 1.4; }
.bilah-contoh .wadah { padding-block: 9px; }
.contoh-tanda { margin-right: 10px; font-weight: 800; letter-spacing: .12em; }

/* Bilah kemajuan gulir di tepi atas layar */
.progres {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  width: 100%;
  height: 4px;
  background: var(--kuning);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* Kepala halaman: merek, menu, bahasa, dan tombol penawaran */
.kepala {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
  transition: transform .55s var(--ease-keluar);
}
.kepala.sembunyi { transform: translateY(-101%); }
.kepala-isi { display: flex; align-items: center; gap: 20px; min-height: 76px; transition: min-height .4s var(--ease-keluar); }
.kepala.kecil .kepala-isi { min-height: 64px; }
.merek {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
}
.merek-tanda { width: 40px; height: 40px; flex: none; }
.tanda-latar { fill: var(--navy); }
.tanda-l, .tanda-blok { fill: var(--kuning); }
.tanda-blok { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease-pantul); }
.merek-teks { display: flex; flex-direction: column; line-height: 1.15; }
.merek-teks strong { font-size: .9375rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.merek-teks > span { font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--abu); }

.kanan { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.kanan > .bahasa, .kanan > .tombol-kepala { display: none; }
.bahasa { display: inline-flex; border: 1px solid var(--garis-kuat); }
.bahasa button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--abu);
  font-size: .875rem;
  font-weight: 700;
  transition: background-color .3s ease, color .3s ease;
}
.bahasa button[aria-pressed="true"] { background: var(--navy); color: var(--kertas); }
.tombol-menu {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--navy);
  background: var(--kertas);
  color: var(--navy);
  font-weight: 700;
}
.burger { position: relative; display: block; width: 18px; height: 2px; background: currentColor; transition: background-color .2s ease; }
.burger::before, .burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform .45s var(--ease-keluar), top .45s var(--ease-keluar);
}
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.kepala.terbuka .burger { background: transparent; }
.kepala.terbuka .burger::before { top: 0; transform: rotate(45deg); }
.kepala.terbuka .burger::after { top: 0; transform: rotate(-45deg); }

.menu { display: none; }
.kepala.terbuka .menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 var(--gutter) 24px;
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
  animation: menu-turun .5s var(--ease-keluar) both;
}
.menu a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--garis);
  color: var(--arang);
  font-weight: 600;
  text-decoration: none;
}
.menu a[aria-current="page"] { color: var(--navy); font-weight: 800; }
.kepala.terbuka .menu > a { animation: naik-kecil .55s var(--ease-keluar) both; animation-delay: calc(var(--m, 0) * 50ms + 90ms); }
.kepala.terbuka .menu > a:nth-child(2) { --m: 1; }
.kepala.terbuka .menu > a:nth-child(3) { --m: 2; }
.kepala.terbuka .menu > a:nth-child(4) { --m: 3; }
.kepala.terbuka .menu > a:nth-child(5) { --m: 4; }
.kepala.terbuka .menu > a:nth-child(6) { --m: 5; }
.menu-hp { display: none; }
.kepala.terbuka .menu-hp { display: grid; gap: 16px; padding-top: 20px; }
.menu-hp .bahasa { justify-self: start; }
.menu-hp .tombol { width: 100%; }

@media (min-width: 1280px) {
  .tombol-menu { display: none; }
  .kepala .menu,
  .kepala.terbuka .menu {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    animation: none;
  }
  .kepala.terbuka .menu > a { animation: none; }
  .menu a {
    position: relative;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    font-size: .9375rem;
    transition: color .25s ease;
  }
  .menu a::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    background: var(--kuning);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-keluar);
  }
  .menu a:hover { color: var(--baja); }
  .menu a:hover::before { transform: scaleX(1); }
  .menu a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    background: var(--navy);
  }
  .menu a[aria-current="page"]::before { display: none; }
  .menu-hp { display: none !important; }
  .kanan > .bahasa, .kanan > .tombol-kepala { display: inline-flex; }
}

/* Tombol: kotak navy menyapu dari kiri saat disorot */
.tombol {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .3s ease, border-color .3s ease;
}
.tombol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-keluar);
}
.tombol-utama { background: var(--kuning); border-color: var(--kuning); color: var(--navy); }
.tombol-garis { background: transparent; border-color: var(--navy); color: var(--navy); }
.tombol-kepala { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.tombol-utama:hover { border-color: var(--navy); color: var(--kuning); }
.tombol-garis:hover { color: var(--kertas); }
.tombol:hover::before, .tombol:focus-visible::before { transform: scaleX(1); }
.tombol:focus-visible { color: var(--kuning); }
.tombol-garis:focus-visible { color: var(--kertas); }
.seruan .tombol-utama:hover { border-color: var(--kertas); }
.seruan .tombol-utama::before { background: var(--kertas); }
.seruan .tombol-utama:hover, .seruan .tombol-utama:focus-visible { color: var(--navy); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--baja);
}
.eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--kuning); }
.lead { margin-top: 20px; font-size: 1.125rem; line-height: 1.6; color: var(--teks-2); max-width: 36em; }
.keterangan { max-width: 42em; color: var(--teks-2); }
h2 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 700; letter-spacing: -.01em; }

/* Kata bertopeng: tiap kata naik dari balik garis. .sorot = garis kuning menyapu di belakang kata. */
.k { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.k > span { display: inline-block; }
.k.i0 { --i: 0; } .k.i1 { --i: 1; } .k.i2 { --i: 2; } .k.i3 { --i: 3; } .k.i4 { --i: 4; } .k.i5 { --i: 5; } .k.i6 { --i: 6; }
.k.i7 { --i: 7; } .k.i8 { --i: 8; } .k.i9 { --i: 9; } .k.i10 { --i: 10; } .k.i11 { --i: 11; } .k.i12 { --i: 12; } .k.i13 { --i: 13; }
.sorot .k { isolation: isolate; }
.sorot .k::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.04em;
  right: -.04em;
  bottom: .34em;
  height: .32em;
  background: var(--kuning);
  transform-origin: left;
}

/* Beranda: kepala dengan foto, denah di latar */
.hero { position: relative; overflow: clip; }
.hero > .wadah { position: relative; z-index: 1; }
.hero-isi { display: grid; gap: 40px; padding-block: 48px 40px; }
.hero h1 {
  margin-top: 14px;
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fakta { display: grid; margin-top: 8px; border-top: 1px solid var(--garis); }
.fakta > div { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--garis); }
.fakta dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--abu);
}
.fakta dd { font-size: 1.25rem; font-weight: 600; color: var(--navy); }
@media (min-width: 700px) {
  .fakta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fakta > div { padding: 24px 24px 24px 0; border-bottom: 0; }
  .fakta > div + div { padding-left: 24px; border-left: 1px solid var(--garis); }
}
@media (min-width: 900px) {
  .hero-isi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 64px;
    padding-block: 72px 56px;
  }
  .hero-foto img { aspect-ratio: 4 / 5; max-height: 600px; }
}

/* Denah: kisi tipis dan gelembung huruf seperti gambar kerja (dekoratif) */
.denah { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.denah i { position: absolute; background: var(--garis); }
.denah .dv { top: 40px; bottom: 0; width: 1px; transform-origin: top; }
.denah .dh { left: 40px; right: 0; height: 1px; transform-origin: left; }
.denah b {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--garis-kuat);
  border-radius: 50%;
  background: var(--kertas);
  color: var(--baja);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
}
.denah .gv { top: 12px; margin-left: -13px; }
.denah .gh { left: 12px; margin-top: -13px; }
.denah .laser { top: 0; bottom: 0; left: 0; width: 3px; background: var(--kuning); opacity: 0; }
.denah-kecil .dv { top: 0; bottom: 0; }
.denah-kecil .gv { top: auto; bottom: 14px; }
@media (max-width: 699px) {
  .denah .dv:nth-of-type(even), .denah .gv:nth-of-type(even) { display: none; }
  .denah .dh, .denah .gh { display: none; }
}

/* Pita keselamatan berjalan */
.pita { position: relative; overflow: hidden; background: var(--kuning); color: var(--navy); }
.pita-garis {
  width: calc(100% + 28px);
  height: 14px;
  background: url('/img/pita-garis.svg?v=2') 0 0 / 28px 28px repeat-x;
}
.pita-lintasan { display: flex; width: max-content; padding-block: 14px; }
.pita-isi { display: flex; flex: none; align-items: center; }
.pita-isi li {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pita-isi li::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline: 28px; background: var(--navy); transform: rotate(45deg); }

/* Bagian dan kepala bagian */
.bagian { padding-block: 56px; }
.bagian-beton { position: relative; isolation: isolate; }
.bagian-beton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--beton); transform-origin: 50% 100%; }
.bagian-kepala { display: grid; gap: 12px; max-width: 46rem; margin-bottom: 40px; }
@media (min-width: 900px) { .bagian { padding-block: 64px; } }

/* Teaser layanan di beranda: garis atas digambar, warna kuning dituang dari bawah saat disorot */
.teaser { display: grid; }
.teaser a {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 27px 0 8px;
  color: var(--arang);
  text-decoration: none;
}
.teaser a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--navy); transform-origin: left; }
.teaser a::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -12px -6px -12px;
  background: var(--kuning);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .6s var(--ease-bata);
}
.teaser h3 { font-size: 1.25rem; font-weight: 700; }
.teaser p { color: var(--teks-2); }
.selengkapnya { margin-top: 6px; color: var(--baja); font-weight: 700; transition: color .3s ease; }
.selengkapnya::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .45s var(--ease-keluar); }
.teaser a:hover::after, .teaser a:focus-visible::after { transform: scaleY(1); }
.teaser a:hover .selengkapnya, .teaser a:focus-visible .selengkapnya { color: var(--navy); }
.teaser a:hover .selengkapnya::after, .teaser a:focus-visible .selengkapnya::after { transform: translateX(8px); }
@media (min-width: 900px) { .teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }

/* Rel: garis penghubung yang terisi saat digulir, dengan simpul kotak (langkah kerja dan perjalanan singkat) */
.rel { position: relative; }
.rel > li { position: relative; }
.rel > li::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  background: var(--kertas);
  border: 3px solid var(--navy);
  transition: background-color .4s ease, transform .6s var(--ease-pantul);
}
.rel > li.aktif::before { background: var(--kuning); transform: rotate(45deg) scale(1.15); }
.rel::before, .rel::after { content: ""; position: absolute; }
.rel::before { background: var(--garis-kuat); }
.rel::after { z-index: 1; background: var(--navy); }

/* Langkah kerja */
.langkah { display: grid; padding-left: 34px; }
.langkah::before, .langkah::after { left: 6px; top: 0; bottom: 0; width: 4px; }
.langkah::after { transform-origin: top; transform: scaleY(var(--p, 1)); }
.langkah li { display: grid; align-content: start; gap: 10px; max-width: 40rem; padding: 6px 0 28px; }
.langkah li::before { left: -33px; top: 8px; }
.langkah-nomor { font-size: .9375rem; font-weight: 700; letter-spacing: .08em; color: var(--baja); }
.langkah h3 { font-size: 1.25rem; font-weight: 700; }
.langkah p { color: var(--teks-2); }
@media (min-width: 1000px) {
  .langkah { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; padding-left: 0; }
  .langkah::before, .langkah::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 4px; }
  .langkah::after { transform-origin: left; transform: scaleX(var(--p, 1)); }
  .langkah li { max-width: none; padding: 30px 0 24px; }
  .langkah li::before { left: 0; top: -5px; }
}

/* Ajakan (pita navy) dengan strip keselamatan di tepi atas */
.seruan { position: relative; overflow: hidden; padding-block: 68px 56px; background: var(--navy); color: var(--kertas); }
.seruan::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% + 28px);
  height: 12px;
  background: url('/img/pita-garis-gelap.svg?v=2') 0 0 / 28px 28px repeat-x;
}
.seruan-isi { display: grid; gap: 24px; align-items: center; }
.seruan h2 { max-width: 28em; color: var(--kertas); }
@media (min-width: 900px) { .seruan-isi { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

/* Kepala halaman lain: denah kecil di latar dan pita keselamatan di tepi bawah */
.halaman-kepala { position: relative; overflow: hidden; padding-block: 48px 44px; border-bottom: 1px solid var(--garis); }
.halaman-kepala > .wadah { position: relative; z-index: 1; }
.halaman-kepala::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: calc(100% + 28px);
  height: 10px;
  background: url('/img/pita-garis.svg?v=2') 0 0 / 28px 28px repeat-x;
}
.halaman-kepala h1 {
  margin-top: 12px;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -.015em;
}
.halaman-kepala .lead { margin-top: 16px; max-width: 40em; }
@media (min-width: 900px) { .halaman-kepala { padding-block: 64px 56px; } }

/* Layanan: empat kartu dengan foto */
.kartu-grid { display: grid; gap: 24px; }
.kartu {
  position: relative;
  display: grid;
  border: 1px solid var(--garis);
  background: var(--kertas);
  scroll-margin-top: 100px;
  transition: transform .6s var(--ease-keluar), border-color .3s ease;
}
.kartu .bingkai img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kartu-isi { display: grid; align-content: start; gap: 12px; padding: 24px; }
.kartu h2 { font-size: 1.5rem; }
.kartu-isi > p { color: var(--teks-2); }
.judul-kecil {
  margin-top: 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--abu);
}
.centang { display: grid; gap: 8px; }
.centang li { position: relative; padding-left: 22px; }
.centang li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  background: var(--navy);
}
@media (min-width: 760px) {
  .kartu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartu-isi { padding: 28px 32px; }
}

/* Proyek: saringan dan kartu */
.saring { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.saring button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--garis-kuat);
  background: var(--kertas);
  color: var(--arang);
  font-weight: 600;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.saring button:hover { border-color: var(--navy); }
.saring button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--kertas); }
.proyek-grid { display: grid; gap: 32px; }
.proyek { display: grid; align-content: start; }
.proyek .bingkai img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proyek-isi { display: grid; gap: 8px; padding-top: 18px; }
.meta { font-size: .875rem; font-weight: 600; color: var(--abu); }
.proyek h3 { position: relative; width: fit-content; font-size: 1.25rem; font-weight: 700; }
.proyek h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: var(--kuning); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-keluar); }
.proyek-isi > p:last-child { color: var(--teks-2); }
@media (min-width: 640px) { .proyek-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .proyek-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } }

/* Susunan kolom */
.dua-kolom, .tiga-kolom, .empat-kolom { display: grid; gap: 32px; }
.foto-lebar .bingkai img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.visi-misi h2 { margin-top: 12px; }
.nilai { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 20px; }
.nilai::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--navy); transform-origin: left; }
.nilai p { color: var(--teks-2); }
.nilai-daftar { display: grid; gap: 20px; }
.blok { display: grid; align-content: start; gap: 14px; }
.blok-atas { margin-top: 24px; }
.judul-bagian { margin: 12px 0 24px; max-width: 46rem; }
.kotak-klien {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 27px 24px 24px;
  background: var(--kertas);
}
.kotak-klien::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--navy); transform-origin: left; }
.kotak-klien p { color: var(--teks-2); }
.catatan { margin-top: 28px; font-size: .9375rem; color: var(--abu); }
@media (min-width: 640px) { .empat-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) {
  .dua-kolom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .tiga-kolom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .empat-kolom { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tentang: perjalanan dan susunan tim */
.linimasa { display: grid; padding-left: 34px; }
.linimasa::before, .linimasa::after { left: 6px; top: 0; bottom: 0; width: 4px; }
.linimasa::after { transform-origin: top; transform: scaleY(var(--p, 1)); }
.linimasa li { display: grid; align-content: start; gap: 6px; padding: 4px 0 22px; }
.linimasa li::before { left: -33px; top: 10px; }
.tahun { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.linimasa p { color: var(--teks-2); }
.tim { display: grid; }
.tim > div { position: relative; display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--garis); }
.tim dt { font-weight: 700; color: var(--navy); }
.tim dd { color: var(--teks-2); }
@media (min-width: 800px) {
  .linimasa { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; padding-left: 0; }
  .linimasa::before, .linimasa::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 4px; }
  .linimasa::after { transform-origin: left; transform: scaleX(var(--p, 1)); }
  .linimasa li { padding: 30px 0 0; }
  .linimasa li::before { left: 0; top: -5px; }
  .tim { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .dua-kolom.foto-kecil { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .nilai { grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
}

/* Klien dan legalitas: tabel */
.tabel { width: 100%; border-collapse: collapse; background: var(--kertas); }
.tabel th, .tabel td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--garis);
  text-align: left;
  vertical-align: top;
  transition: background-color .3s ease;
}
.tabel thead th {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--abu);
  border-bottom: 2px solid var(--navy);
}
.tabel tbody td:first-child { font-weight: 700; color: var(--navy); }
.tabel tbody tr:hover td { background: var(--beton); }
.isian { color: var(--abu); border-bottom: 1px dashed var(--garis-kuat); }
@media (max-width: 639px) {
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { padding: 14px 0; border-bottom: 1px solid var(--garis); }
  .tabel td { padding: 4px 0; border: 0; }
  .tabel td::before {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--abu);
  }
  html:not([lang="en"]) .tabel td::before { content: attr(data-label); }
  html[lang="en"] .tabel td::before { content: attr(data-label-en); }
}

/* Kontak: rincian dan formulir */
.kontak-info dl { display: grid; }
.kontak-info dl > div { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--garis); }
.kontak-info dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--abu);
}
.kontak-info dd { font-size: 1.125rem; font-weight: 600; color: var(--navy); }
.formulir {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--garis);
  background: var(--kertas);
}
.formulir h2 { font-size: 1.5rem; }
.formulir .kecil { font-size: .875rem; color: var(--abu); }
.isian-grup { position: relative; display: grid; gap: 6px; }
.isian-grup::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--kuning);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-keluar);
  pointer-events: none;
}
.isian-grup:focus-within::after { transform: scaleX(1); }
.isian-grup label { font-weight: 600; color: var(--navy); }
.isian-grup input,
.isian-grup select,
.isian-grup textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--garis-kuat);
  border-radius: 0;
  background: var(--kertas);
  color: var(--arang);
  transition: border-color .3s ease;
}
.isian-grup input:focus, .isian-grup select:focus, .isian-grup textarea:focus { border-color: var(--navy); }
.isian-grup textarea { min-height: 120px; resize: vertical; }

/* Kaki halaman */
.kaki { padding-top: 56px; background: var(--navy); color: var(--kaki-teks); }
.kaki a { position: relative; color: var(--kertas); text-decoration: none; }
.kaki-daftar a::after, .kaki-bawah a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 2px;
  background: var(--kuning);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-keluar);
}
.kaki-daftar a:hover::after, .kaki-bawah a:hover::after { transform: scaleX(1); }
.kaki .merek { color: var(--kertas); }
.kaki .tanda-latar { fill: var(--kertas); }
.kaki .tanda-l { fill: var(--navy); }
.kaki-isi { display: grid; gap: 36px; }
.kaki-merek p { max-width: 26em; margin-top: 16px; }
.kaki-judul {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kuning);
}
.kaki-judul::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--kuning); }
.kaki-daftar { display: grid; }
.kaki-daftar li { display: flex; align-items: center; min-height: 44px; }
.kaki-daftar a { display: inline-flex; align-items: center; min-height: 44px; }
.kaki-bawah {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  margin-top: 40px;
  padding-block: 16px 28px;
  border-top: 1px solid var(--kaki-garis);
  font-size: .875rem;
}
.kaki-bawah p { display: flex; flex-wrap: wrap; align-items: center; }
.kaki-bawah a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .kaki-isi { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; }
}

/* Sumber foto */
.sumber-daftar { display: grid; border-top: 1px solid var(--garis); }
.sumber-daftar li {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--garis);
  color: var(--teks-2);
}
.sumber-daftar li > span:first-child { font-weight: 700; color: var(--navy); }
.kecil { font-size: .9375rem; color: var(--abu); }
@media (min-width: 800px) {
  .sumber-daftar li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; gap: 24px; }
}

/* Bingkai foto: siku kuning di dua sudut, foto bergeser pelan saat digulir dan membesar sedikit saat disorot */
.bingkai { position: relative; overflow: hidden; }
.bingkai picture { display: block; }
.bingkai img { transition: scale 1.1s var(--ease-keluar); }
.bingkai::before, .bingkai::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0 solid var(--kuning);
  pointer-events: none;
  transition: width .6s var(--ease-keluar), height .6s var(--ease-keluar);
}
.bingkai::before { left: 14px; top: 14px; border-top-width: 4px; border-left-width: 4px; }
.bingkai::after { right: 14px; bottom: 14px; border-bottom-width: 4px; border-right-width: 4px; }
@media (hover: hover) {
  .bingkai:hover img { scale: 1.06; }
  .bingkai:hover::before, .bingkai:hover::after { width: 56px; height: 56px; }
  .kartu:hover { transform: translateY(-6px); border-color: var(--navy); }
  .proyek:hover h3::after { transform: scaleX(1); }
  .merek:hover .tanda-blok { transform: translate(2px, -4px) rotate(14deg); }
}

/* Lapisan bata (kotak navy dan kuning di atas foto). Hanya tampil kalau JavaScript hidup dan gerak diizinkan. */
.bata-lapis { display: none; }

/* Tirai pembuka beranda (hanya sekali per kunjungan, hanya saat gerak diizinkan) */
.intro { display: none; }

/* Penanda kursor (dibuat skrip, hanya untuk penunjuk halus seperti mouse) */
.penanda { display: none; }

/* ===================== GERAK ===================== */
@keyframes tampilkan { to { opacity: 1; transform: none; clip-path: none; } }
@keyframes blok-turun { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes naik { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes naik-kecil { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes menu-turun { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes kata-naik { from { transform: translateY(118%); } to { transform: none; } }
@keyframes sapu-sorot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes garis-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes garis-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bata-geser { to { transform: translateX(var(--arah)); } }
@keyframes siku-masuk { from { opacity: 0; translate: -18px -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes siku-masuk-b { from { opacity: 0; translate: 18px 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes foto-turun { from { scale: 1.22; } to { scale: 1; } }
@keyframes beton-tuang { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bola-muncul { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes laser-sapu {
  0% { opacity: 0; transform: translateX(-1vw); }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translateX(101vw); }
}
@keyframes pita-jalan { to { transform: translateX(-50%); } }
@keyframes pita-geser { to { transform: translateX(-28px); } }
@keyframes pita-buka { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bullet-pop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes sorot-kartu { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.03); } }
@keyframes intro-gambar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes intro-isi { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes intro-blok { 0% { opacity: 0; transform: translateY(-34px); } 60% { opacity: 1; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
@keyframes intro-nama { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes intro-pergi { to { opacity: 0; transform: translateY(-22px); } }
@keyframes intro-tiang { to { transform: translateY(-101%); } }
@keyframes intro-selesai { to { visibility: hidden; } }

/* Gerak yang jalan sendiri saat halaman dibuka (tanpa menunggu skrip) */
@media (prefers-reduced-motion: no-preference) {
  .denah .dv { animation: garis-y 1.5s var(--ease-keluar) backwards; animation-delay: calc(var(--jeda-dasar) + var(--d, 0s)); }
  .denah .dh { animation: garis-x 1.5s var(--ease-keluar) backwards; animation-delay: calc(var(--jeda-dasar) + var(--d, 0s)); }
  .denah b { animation: bola-muncul .7s var(--ease-pantul) backwards; animation-delay: calc(var(--jeda-dasar) + var(--d, 0s) + .5s); }
  .denah .laser { animation: laser-sapu 2s var(--ease-bata) backwards; animation-delay: calc(var(--jeda-dasar) + .3s); }
  .kepala .tanda-blok { animation: blok-turun .9s var(--ease-pantul) backwards; animation-delay: calc(var(--jeda-dasar) + .3s); }
  .halaman-kepala::after { animation: pita-buka 1.1s var(--ease-bata) backwards, pita-geser 1.8s linear infinite; animation-delay: calc(var(--jeda-dasar) + .3s), 0s; }
  .pita-garis { animation: pita-geser 1.6s linear infinite; }
  .seruan::before { animation: pita-geser 1.6s linear infinite; }
  .pita-lintasan { animation: pita-jalan 46s linear infinite; }
  .pita:hover .pita-lintasan { animation-play-state: paused; }
  .pita.berhenti .pita-lintasan, .pita.berhenti .pita-garis, .seruan.berhenti::before, .halaman-kepala.berhenti::after { animation-play-state: paused; }
  .kartu:target::after { content: ""; position: absolute; z-index: 4; inset: -9px; border: 4px solid var(--kuning); pointer-events: none; animation: sorot-kartu 1.8s var(--ease-keluar) both; }
}

/* Gerak masuk saat digulir: tersembunyi hanya kalau JavaScript hidup dan gerak diizinkan; skrip memberi .tampil */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-muncul="naik"] { opacity: 0; }
  [data-muncul="naik"].tampil { opacity: 1; animation: naik .95s var(--ease-keluar) backwards; animation-delay: calc(var(--jeda-dasar) + var(--tunda, 0s)); }

  /* judul bertopeng */
  [data-muncul="topeng"] .k > span { transform: translateY(118%); }
  [data-muncul="topeng"].tampil .k > span {
    transform: none;
    animation: kata-naik 1s var(--ease-keluar) backwards;
    animation-delay: calc(var(--jeda-dasar) + var(--tunda, 0s) + var(--i) * 60ms);
  }
  .sorot .k::before { transform: scaleX(0); }
  [data-muncul="topeng"].tampil .sorot .k::before {
    transform: none;
    animation: sapu-sorot .9s var(--ease-bata) backwards;
    animation-delay: calc(var(--jeda-dasar) + var(--tunda, 0s) + var(--i) * 60ms + .75s);
  }

  /* garis atas yang digambar (teaser, kotak klien, nilai kerja) */
  .teaser a[data-muncul]::before, .kotak-klien[data-muncul]::before, .nilai[data-muncul]::before { transform: scaleX(0); }
  .teaser a[data-muncul].tampil::before, .kotak-klien[data-muncul].tampil::before, .nilai[data-muncul].tampil::before {
    transform: none;
    animation: garis-x 1s var(--ease-keluar) backwards;
    animation-delay: calc(var(--jeda-dasar) + var(--tunda, 0s) + .1s);
  }

  /* beton dituang di bagian berlatar abu */
  .bagian-beton::before { transform: scaleY(0); transition: transform 1.2s var(--ease-bata); }
  .bagian-beton.tampil::before { transform: scaleY(1); }

  /* foto: lapisan bata runtuh, siku kuning masuk, foto turun pelan */
  .bata-lapis { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; pointer-events: none; }
  /* satu baris = satu elemen; ubin bata dari berkas SVG (selang-seling setengah bata); warna navy dulu supaya foto tidak sempat terlihat */
  .bata-lapis i { flex: 1 1 0; min-height: 0; background: var(--navy) url('/img/bata-a.svg?v=2') 0 0 / auto 100% repeat-x; --arah: 103%; }
  .bata-lapis i:nth-child(even) { background-image: url('/img/bata-b.svg?v=2'); --arah: -103%; }
  /* gerak baru dipasang setelah fotonya muncul: baris yang belum waktunya tidak menjadi lapisan tersendiri (hemat memori dan tenaga) */
  .bingkai.tampil .bata-lapis i {
    animation: bata-geser .95s var(--ease-bata) both;
    animation-delay: calc(var(--jeda-dasar) + .1s + var(--n) * 85ms);
  }
  .bingkai::before, .bingkai::after { opacity: 0; }
  .bingkai.tampil::before { animation: siku-masuk .8s var(--ease-pantul) both; animation-delay: calc(var(--jeda-dasar) + 1s); }
  .bingkai.tampil::after { animation: siku-masuk-b .8s var(--ease-pantul) both; animation-delay: calc(var(--jeda-dasar) + 1.1s); }
  .bingkai picture { scale: 1.22; }
  .bingkai.tampil picture { scale: 1; animation: foto-turun 2.2s var(--ease-keluar) backwards; animation-delay: calc(var(--jeda-dasar) + .15s); }

  /* tanda centang yang meletup */
  .tampil .centang li::before, .centang li.tampil::before { animation: bullet-pop .6s var(--ease-pantul) backwards; animation-delay: calc(var(--jeda-dasar) + .45s + var(--b, 0) * 90ms); }
  .centang li:nth-child(2) { --b: 1; } .centang li:nth-child(3) { --b: 2; } .centang li:nth-child(4) { --b: 3; }

  /* penanda sudah ada: elemen yang muncul langsung tanpa gerak (misalnya hasil saringan) */
  [data-muncul].langsung, [data-muncul].langsung * { animation: none !important; }
  [data-muncul].langsung .bata-lapis, .bingkai.langsung .bata-lapis { display: none; }
  [data-muncul="naik"].langsung { opacity: 1; }

  /* kalau skrip tidak sempat jalan, semua tampil sendiri setelah 4 detik */
  html:not(.siap) [data-muncul="naik"] { animation: tampilkan 0s 4s both; }
  html:not(.siap) [data-muncul="topeng"] .k > span { animation: kata-naik 0s 4s both; }
  html:not(.siap) .sorot .k::before { animation: sapu-sorot 0s 4s both; }
  html:not(.siap) .teaser a[data-muncul]::before, html:not(.siap) .kotak-klien[data-muncul]::before, html:not(.siap) .nilai[data-muncul]::before { animation: garis-x 0s 4s both; }
  html:not(.siap) .bagian-beton::before { animation: beton-tuang 0s 4s both; }
  html:not(.siap) .bata-lapis i { animation: bata-geser .95s 4s both; }
  html:not(.siap) .bingkai::before, html:not(.siap) .bingkai::after { animation: tampilkan 0s 4s both; }
  html:not(.siap) .bingkai picture { animation: foto-turun 0s 4s both; }
}

/* Bilah kemajuan mengikuti gulir lewat CSS (tanpa skrip) di browser yang mendukung; yang lain diisi skrip lewat --p */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes progres-isi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .progres { animation: progres-isi linear both; animation-timeline: scroll(root block); }
  }
}

/* Foto bergeser pelan saat digulir (hanya browser yang mendukung; yang lain tetap diam) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes geser-foto {
      from { transform: translateY(-6%) scale(1.14); }
      to { transform: translateY(6%) scale(1.14); }
    }
    .bingkai { view-timeline: --bk block; }
    .bingkai img { animation: geser-foto linear both; animation-timeline: --bk; animation-range: cover 0% cover 100%; }
  }
}

/* Tirai pembuka beranda */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.tanpa-intro) .intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    pointer-events: none;
    animation: intro-selesai 0s linear 2.3s forwards;
  }
  .intro-tirai { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); }
  .intro-tirai i {
    background: var(--navy);
    border-bottom: 12px solid var(--kuning);
    animation: intro-tiang .75s var(--ease-bata) 1.05s both;
  }
  .intro-tirai i:nth-child(2) { animation-delay: 1.11s; }
  .intro-tirai i:nth-child(3) { animation-delay: 1.17s; }
  .intro-tirai i:nth-child(4) { animation-delay: 1.23s; }
  .intro-tirai i:nth-child(5) { animation-delay: 1.29s; }
  .intro-tirai i:nth-child(6) { animation-delay: 1.35s; }
  .intro-tirai i:nth-child(7) { animation-delay: 1.41s; }
  .intro-tirai i:nth-child(8) { animation-delay: 1.47s; }
  .intro-isi {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 22px;
    animation: intro-pergi .45s var(--ease-bata) .95s both;
  }
  .intro-tanda { width: 104px; height: 104px; overflow: visible; }
  .intro-tanda .it-garis { fill: none; stroke: var(--kuning); stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-gambar .75s var(--ease-bata) .1s forwards; }
  .intro-tanda .it-isi { fill: var(--kuning); fill-opacity: 0; animation: intro-isi .35s ease .6s forwards; }
  .intro-tanda .it-blok { fill: var(--kuning); opacity: 0; animation: intro-blok .6s var(--ease-pantul) .55s forwards; }
  .intro-nama {
    color: var(--kertas);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    animation: intro-nama .7s var(--ease-keluar) .5s forwards;
  }
}

/* Penanda kursor: empat siku di sekeliling penunjuk; merapat ke tombol atau foto yang disorot */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .penanda {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    display: block;
    width: 30px;
    height: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .penanda.hidup { opacity: 1; }
  .penanda i { position: absolute; width: 9px; height: 9px; border: 0 solid var(--navy); transition: border-color .25s ease; }
  .penanda i:nth-child(1) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; }
  .penanda i:nth-child(2) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
  .penanda i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
  .penanda i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
  .penanda.terang i { border-color: var(--kuning); }
  .penanda.kunci i { width: 13px; height: 13px; }
}

/* Perpindahan antarhalaman: tangga kuning naik delapan lajur bergantian (browser yang belum mendukung pindah biasa) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .95s; background: var(--kuning); }
  ::view-transition-old(root) { animation: tangga-lama .95s var(--ease-bata) both; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: tangga-baru .95s var(--ease-bata) both; mix-blend-mode: normal; }
  html:active-view-transition { --jeda-dasar: .6s; }
  /* menyaring proyek: tangga tidak dipakai, kartu yang bergeser saja */
  html.menyaring::view-transition-group(root) { background: none; animation: none; }
  html.menyaring::view-transition-old(root), html.menyaring::view-transition-new(root) { animation: none; }
}
@keyframes tangga-baru {
  0% { clip-path: polygon(0 100%, 0 100%, 12.5% 100%, 12.5% 100%, 25% 100%, 25% 100%, 37.5% 100%, 37.5% 100%, 50% 100%, 50% 100%, 62.5% 100%, 62.5% 100%, 75% 100%, 75% 100%, 87.5% 100%, 87.5% 100%, 100% 100%, 100% 100%); }
  55% { clip-path: polygon(0 100%, 0 0%, 12.5% 0%, 12.5% 14%, 25% 14%, 25% 28%, 37.5% 28%, 37.5% 42%, 50% 42%, 50% 56%, 62.5% 56%, 62.5% 70%, 75% 70%, 75% 84%, 87.5% 84%, 87.5% 98%, 100% 98%, 100% 100%); }
  100% { clip-path: polygon(0 100%, 0 0%, 12.5% 0%, 12.5% 0%, 25% 0%, 25% 0%, 37.5% 0%, 37.5% 0%, 50% 0%, 50% 0%, 62.5% 0%, 62.5% 0%, 75% 0%, 75% 0%, 87.5% 0%, 87.5% 0%, 100% 0%, 100% 100%); }
}
@keyframes tangga-lama {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 87.5% 100%, 87.5% 100%, 75% 100%, 75% 100%, 62.5% 100%, 62.5% 100%, 50% 100%, 50% 100%, 37.5% 100%, 37.5% 100%, 25% 100%, 25% 100%, 12.5% 100%, 12.5% 100%, 0 100%); }
  55% { clip-path: polygon(0 0, 100% 0, 100% 90%, 87.5% 90%, 87.5% 76%, 75% 76%, 75% 62%, 62.5% 62%, 62.5% 48%, 50% 48%, 50% 34%, 37.5% 34%, 37.5% 20%, 25% 20%, 25% 6%, 12.5% 6%, 12.5% -8%, 0 -8%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% -8%, 87.5% -8%, 87.5% -8%, 75% -8%, 75% -8%, 62.5% -8%, 62.5% -8%, 50% -8%, 50% -8%, 37.5% -8%, 37.5% -8%, 25% -8%, 25% -8%, 12.5% -8%, 12.5% -8%, 0 -8%); }
}

/* Kurangi gerak: semua tampil biasa, tanpa tirai, tanpa kursor khusus, pita berhenti */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .pita-lintasan { width: auto; flex-wrap: wrap; justify-content: center; }
  .pita-isi { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .pita-isi + .pita-isi { display: none; }
  .denah .laser { display: none; }
}

@media print {
  .intro, .penanda, .progres, .pita, .bata-lapis, .denah { display: none !important; }
}

/* Nama merek lebih panjang dari patokan: rapatkan jarak huruf agar muat di HP kecil */
.merek-teks > span { letter-spacing: .14em; }