/* ============================================================
   webmal.studio — gaya editorial
   Nilai warna, tipografi, spacing, dan easing mengikuti spesifikasi
   handoff desain. Ditulis sebagai CSS biasa (tanpa build step) karena
   situsnya diupload manual ke hosting.
   ============================================================ */

:root {
  --ink: #0F172A;
  --biru: #2563EB;
  --biru-hover: #1D4ED8;
  --biru-muda: #8FB0F5;
  --kanvas: #FBFCFE;
  --putih: #FFFFFF;
  --abu: #5A6478;
  --abu-2: #3E4759;
  --garis: #E6E9F0;
  --garis-2: #E2E6EF;
  --garis-3: #DDE2EC;
  --latar-abu: #F7F8FB;
  --latar-hover: #F5F8FE;
  --pil-abu: #EFF2F7;
  --gelap-garis: #1E293B;
  --gelap-garis-2: #1B2434;
  --gelap-stroke: #223049;
  --gelap-teks: #AAB4C6;
  --gelap-teks-2: #B6BFCE;
  --gelap-teks-3: #C9D2E0;
  --gelap-mikro: #98A2B3;
  --gelap-mikro-2: #8A93A5;
  --dot: #E3E7EF;

  --masuk: cubic-bezier(0.16, 1, 0.3, 1);

  --display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --isi: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kanvas);
  color: var(--ink);
  font-family: var(--isi);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

.wadah { max-width: 1320px; margin: 0 auto; padding: 0 44px; }

/* Tautan lewati — hanya tampil saat difokus lewat papan ketik. */
.lewati {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
  font-family: var(--mono); font-size: 12px;
}
.lewati:focus { left: 0; }

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

/* ---------- Progres scroll ---------- */
.progres {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: var(--biru); transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- Header ---------- */
.kepala {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 72px;
  background: rgba(251, 252, 254, 0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--garis);
}
.kepala-isi {
  max-width: 1320px; margin: 0 auto; padding: 0 44px; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.merek { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.merek-ikon { width: 30px; height: 30px; border-radius: 9px; }
.merek-teks { font-family: var(--display); font-size: 16px; letter-spacing: -0.02em; }
.merek-teks b { font-weight: 600; color: var(--ink); }
.merek-teks i { font-style: normal; font-weight: 400; color: var(--abu); }
.merek-terang b { color: #fff; }
.merek-terang i { color: var(--gelap-mikro-2); }

.kepala-aksi { display: flex; align-items: center; gap: 18px; }

.pil-konsultasi {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 18px;
  border: 1px solid var(--garis-3); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  transition: color .25s ease, border-color .25s ease;
}
.pil-konsultasi:hover { color: var(--biru); border-color: var(--biru); }
.titik-denyut { width: 6px; height: 6px; border-radius: 50%; background: var(--biru); animation: wmKedip 2.2s infinite; }
@keyframes wmKedip { 0%, 100% { opacity: 1 } 50% { opacity: .28 } }

.tombol-menu {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 20px;
  background: var(--ink); color: #fff; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  transition: background .25s ease;
}
.tombol-menu:hover { background: var(--gelap-garis); }
.garis-menu { display: inline-flex; flex-direction: column; gap: 4px; }
.garis-menu i { display: block; width: 13px; height: 1px; background: #fff; }

/* ---------- Overlay menu ---------- */
.menu-layar {
  position: fixed; inset: 0; z-index: 70; background: var(--ink); color: #fff;
  overflow-y: auto; display: flex; flex-direction: column; padding: 0 44px 34px;
  transform: translateY(-101%); opacity: 0; pointer-events: none;
  transition: transform .6s var(--masuk), opacity .4s ease;
}
.menu-layar[hidden] { display: flex; }
.menu-layar.buka { transform: translateY(0); opacity: 1; pointer-events: auto; }
.menu-atas { display: flex; align-items: center; justify-content: space-between; height: 72px; flex: 0 0 auto; }
.tombol-tutup {
  min-height: 44px; padding: 12px 20px; border: 1px solid #2E3A4F; border-radius: 999px;
  color: var(--gelap-teks); font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; transition: color .25s ease, border-color .25s ease;
}
.tombol-tutup:hover { color: #fff; border-color: #fff; }

.menu-daftar { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.menu-baris {
  display: flex; align-items: center; gap: 18px; padding: 22px 0;
  border-top: 1px solid var(--gelap-garis); overflow: hidden;
}
.menu-no { font-family: var(--mono); font-size: 12px; color: var(--gelap-mikro); flex: 0 0 auto; }
.menu-nama {
  font-family: var(--display); font-weight: 600; font-size: clamp(30px, 5.4vw, 62px);
  letter-spacing: -0.04em; line-height: 1.05;
  transition: transform .5s var(--masuk);
}
.menu-pita { margin-left: auto; max-width: 46%; overflow: hidden; opacity: 0; transition: opacity .35s ease; }
.menu-pita-jalan { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; animation: wmJalan 9s linear infinite; }
.menu-pita em {
  font-style: normal; font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--biru);
}
.menu-pita s { text-decoration: none; color: #2E3A4F; }
@media (hover: hover) and (pointer: fine) {
  .menu-baris:hover .menu-nama { transform: translateX(18px); }
  .menu-baris:hover .menu-pita { opacity: 1; }
}
.menu-baris:focus-visible .menu-pita { opacity: 1; }

.menu-bawah {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 22px; padding-top: 22px;
  border-top: 1px solid var(--gelap-garis);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gelap-mikro);
}
.menu-bawah a {
  /* 44px: target sentuh minimum supaya mudah ditekan di HP. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.menu-bawah a { transition: color .25s ease; }
.menu-bawah a:hover { color: #fff; }

@media (max-height: 720px) {
  .menu-baris { padding: 12px 0; }
  .menu-nama { font-size: clamp(22px, 3.6vh, 38px); }
}

/* ---------- Hero ---------- */
.hero { padding-top: 118px; padding-bottom: 88px; }
.statistik {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border-bottom: 1px solid var(--garis); padding-bottom: 26px;
}
.stat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stat-angka {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.03em; white-space: nowrap;
}
.stat-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  color: var(--abu); line-height: 1.5;
}

.hero-judul {
  margin: 34px 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(48px, 12.4vw, 172px); line-height: 0.9; letter-spacing: -0.055em;
}
.hero-baris { display: block; animation: wmBaris .9s var(--masuk) both; }
.hero-baris:nth-child(2) { animation-delay: .12s; padding-left: 0.1em; }
.hero-baris:nth-child(3) { animation-delay: .24s; }
.hero-geser { padding-left: 0.04em; }
.hero-biru { color: var(--biru); }
@keyframes wmBaris { from { opacity: 0; transform: translateY(0.24em); } to { opacity: 1; transform: none; } }

.hero-kaki {
  margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--garis);
  display: grid; grid-template-columns: 1fr 0.82fr; gap: 26px; align-items: center;
}
.hero-tagline {
  margin: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--biru);
}
.hero-tombol { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.tbl {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 16px 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
  transition: background .25s ease, transform .25s ease, border-color .25s ease, color .25s ease;
}
.tbl-ink { background: var(--ink); color: #fff; }
.tbl-ink:hover { background: var(--biru); transform: translateY(-2px); }
.tbl-garis { border: 1px solid var(--garis-3); background: var(--putih); }
.tbl-garis:hover { border-color: var(--ink); }

/* ---------- Tentang ---------- */
.tentang { padding: 92px 44px; display: grid; grid-template-columns: 0.34fr 1fr; gap: 56px; }
.label-mikro {
  margin: 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--abu);
}
.tentang-teks {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 2.5vw, 34px); line-height: 1.42; letter-spacing: -0.025em;
}
.tautan-mikro {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 14px; padding-bottom: 3px;
  border-bottom: 1px solid var(--garis-3);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; transition: color .25s ease, border-color .25s ease;
}
.tautan-mikro:hover { color: var(--biru); border-color: var(--biru); }

/* ---------- Pita merek ---------- */
.pita-merek { background: var(--ink); padding: 22px 0; overflow: hidden; }
.pita-merek-jalan {
  display: flex; align-items: center; gap: 22px; white-space: nowrap;
  animation: wmJalan 26s linear infinite; width: max-content;
}
.pita-merek span { font-family: var(--display); font-weight: 500; font-size: 22px; color: #fff; }
.pita-merek b { color: var(--biru); font-weight: 400; }
@keyframes wmJalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Proses & FAQ (akordeon) ---------- */
.proses, .faq { padding: 92px 44px; display: grid; grid-template-columns: 0.34fr 1fr; gap: 56px; }
.judul-seksi {
  margin: 0 0 34px; font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.045em;
}
.akor-baris { border-bottom: 1px solid var(--garis); }
.akor-kepala {
  width: 100%; display: flex; align-items: center; gap: 22px; padding: 26px 0;
  text-align: left; transition: background .25s ease, padding-left .25s ease;
}
.akor-kepala:hover { background: var(--latar-hover); }
.akor-no { font-family: var(--mono); font-size: 11px; color: var(--biru); flex: 0 0 26px; }
.akor-nama {
  flex: 1 1 auto; font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.03em;
}
.akor-tanya {
  flex: 1 1 auto; font-family: var(--display); font-weight: 500;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.35;
}
.akor-ikon { flex: 0 0 auto; font-size: 22px; color: var(--gelap-mikro-2); transition: transform .3s ease; line-height: 1; }
.akor-baris.terbuka .akor-ikon { transform: rotate(45deg); }
.akor-isi { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--masuk); }
.akor-baris.terbuka .akor-isi { grid-template-rows: 1fr; }
.akor-isi > p {
  overflow: hidden; margin: 0; font-size: 16px; line-height: 1.7; color: var(--abu);
  max-width: 62ch; padding-left: 48px;
}
.faq .akor-isi > p { padding-left: 0; }
.akor-baris.terbuka .akor-isi > p { padding-bottom: 26px; }
.faq .akor-kepala { padding: 24px 0; }
.faq-lead { margin: 14px 0 0; font-size: 15px; color: var(--abu); max-width: 30ch; }

/* ---------- Layanan ---------- */
.layanan { padding: 92px 44px; }
.layanan-kepala { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--garis); }
.layanan-baris {
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding: 30px 0; border-bottom: 1px solid var(--garis);
  transition: padding-left .3s ease;
}
.layanan-baris:hover { padding-left: 12px; }
.lay-no { font-family: var(--mono); font-size: 11px; color: var(--biru); flex: 0 0 26px; }
.lay-nama {
  flex: 1 1 260px; font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 3.4vw, 44px); letter-spacing: -0.04em;
}
.lay-desc { flex: 1 1 300px; max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--abu); }
.lay-durasi {
  min-width: 120px; text-align: right; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; color: var(--abu);
}

/* ---------- Karya Terpilih ---------- */
.karya { padding: 92px 44px; }
.karya-judul {
  margin: 0 0 30px; font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 9vw, 128px); line-height: 0.92; letter-spacing: -0.055em;
}
.karya-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--garis); }
.karya-grid { display: grid; grid-template-columns: 1fr 0.72fr; gap: 52px; align-items: start; }
.karya-baris { border-bottom: 1px solid var(--garis); padding: 30px 0; }
.karya-tautan { display: flex; align-items: baseline; gap: 20px; transition: color .25s ease; }
.karya-tautan:hover { color: var(--biru); }
.karya-no { font-family: var(--mono); font-size: 11px; color: var(--abu); flex: 0 0 30px; }
.karya-nama {
  flex: 1 1 auto; font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3.6vw, 48px); letter-spacing: -0.04em;
}
.karya-kanan { display: flex; align-items: baseline; gap: 16px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.karya-tahun { color: var(--abu); }
.karya-live { color: var(--biru); white-space: nowrap; }
.karya-ket { margin: 12px 0 0 50px; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--abu); }
.karya-gambar-hp { display: none; margin-top: 20px; border-radius: 12px; aspect-ratio: 16/9; object-fit: cover; object-position: top; }

.mode-pil { display: inline-flex; gap: 4px; margin: 16px 0 0 50px; padding: 4px; background: var(--pil-abu); border-radius: 999px; }
.mode-tbl {
  min-height: 44px; padding: 8px 18px; border-radius: 999px; color: #6B7488;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  transition: background .25s ease, color .25s ease;
}
.mode-tbl.aktif { background: var(--ink); color: #fff; }

.pratinjau { position: sticky; top: 108px; }
.pratinjau-kartu { border: 1px solid var(--garis-2); border-radius: 16px; box-shadow: 0 22px 54px rgba(15, 23, 42, .09); overflow: hidden; background: var(--putih); }
.pratinjau-bar { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--garis-2); }
.pratinjau-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.pratinjau-domain { margin-left: 10px; font-family: var(--mono); font-size: 10px; color: var(--abu); }
.pratinjau-gambar { aspect-ratio: 16/10; background: var(--latar-abu); }
.pratinjau-gambar img { width: 100%; height: 100%; object-fit: contain; }
.pratinjau-poin { margin-top: 18px; display: grid; gap: 10px; }
.pratinjau-poin li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.6; color: var(--abu-2); }
.pratinjau-poin li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--biru); }

/* ---------- Paket & Harga ---------- */
.paket { background: var(--ink); color: #fff; padding: 92px 0; }
.paket-kepala { display: grid; grid-template-columns: 1fr 0.82fr; gap: 40px; align-items: end; margin-bottom: 46px; }
.paket-judul { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.05em; }
.paket-lead { margin: 0; font-size: 16px; color: var(--gelap-teks); }
.paket-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--gelap-garis); border-top: 1px solid var(--gelap-garis); border-bottom: 1px solid var(--gelap-garis);
}
.kartu-paket { background: var(--ink); padding: 34px 30px 36px; display: flex; flex-direction: column; }
.kartu-paket.unggulan { background: #131E33; }
.kartu-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kartu-label { margin: 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gelap-mikro-2); }
.unggulan .kartu-label { color: var(--biru-muda); }
.badge { background: var(--biru); color: #fff; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; padding: 5px 11px; }
.kartu-untuk { margin: 16px 0 0; font-family: var(--display); font-weight: 500; font-size: 24px; color: #fff; }
.kartu-harga { margin: 14px 0 0; font-family: var(--display); font-weight: 600; font-size: 40px; letter-spacing: -0.045em; }
.kartu-satuan { margin: 4px 0 0; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gelap-mikro-2); }
.kartu-promo { margin: 10px 0 0; font-size: 13px; color: var(--biru-muda); }
.kartu-fitur { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--gelap-garis); display: grid; gap: 11px; }
.kartu-fitur li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--gelap-teks-3); }
.kartu-fitur li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--biru); }
.kartu-kaki { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kartu-durasi { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gelap-mikro-2); }
.kartu-tbl {
  display: inline-flex; align-items: center; min-height: 44px; padding: 13px 22px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 500;
  transition: transform .25s ease, background .25s ease;
}
.kartu-tbl:hover { transform: translateY(-2px); }
.kartu-tbl-biru { background: var(--biru); color: #fff; }
.kartu-tbl-biru:hover { background: var(--biru-hover); }

.paket-catatan { margin-top: 40px; display: flex; gap: 16px; align-items: flex-start; }
.catatan-bulat { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--biru); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.catatan-judul { margin: 0; font-family: var(--display); font-weight: 500; font-size: 17px; color: #fff; }
.catatan-teks { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--gelap-teks); max-width: 82ch; }

/* ---------- Kontak ---------- */
.kontak { padding: 92px 44px; text-align: center; border-top: 1px solid var(--garis); }
.kontak-judul { margin: 0 auto; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.05em; max-width: 20ch; }
.kontak-lead { margin: 22px auto 0; font-size: 16px; color: var(--abu); max-width: 52ch; }
.tbl-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px;
  background: var(--biru); color: #fff; font-family: var(--display); font-size: 17px; font-weight: 500;
  padding: 20px 40px; border-radius: 999px; box-shadow: 0 16px 38px rgba(37, 99, 235, .28);
  transition: background .25s ease, transform .25s ease;
}
.tbl-cta:hover { background: var(--biru-hover); transform: translateY(-3px); }
.kontak-kaki {
  margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--abu);
}
.kontak-kaki a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); border-bottom: 1px solid var(--garis-3); transition: color .25s ease, border-color .25s ease; }
.kontak-kaki a:hover { color: var(--biru); border-color: var(--biru); }
.pemisah { color: #C9CFDB; }

/* ---------- Footer ---------- */
.kaki { background: var(--ink); color: var(--gelap-teks-2); padding: 56px 44px 20px; overflow: hidden; }
.kaki-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
.kaki-judul { margin: 0 0 14px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gelap-mikro); }
.kaki-grid a { display: flex; align-items: center; min-height: 40px; font-size: 14px; transition: color .25s ease; }
.kaki-grid a:hover { color: #fff; }
.kaki-deskripsi {
  margin: 16px 0 0; max-width: 42ch; font-size: 14px; line-height: 1.65;
  color: var(--gelap-teks-2);
}
.kaki-bawah {
  max-width: 1320px; margin: 40px auto 0; padding-top: 18px; border-top: 1px solid var(--gelap-garis-2);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gelap-mikro);
}
.kaki-wordmark {
  margin: 30px 0 0; text-align: center; font-family: var(--display); font-weight: 600;
  font-size: clamp(56px, 16.5vw, 250px); line-height: 0.78; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px var(--gelap-stroke); white-space: nowrap;
}

/* ---------- Muncul saat digulir ----------
   Isi HANYA disembunyikan kalau <html> punya kelas .js, dan kelas itu
   cuma dipasang oleh JavaScript setelah pengamatnya siap. Kalau JS mati
   atau diblokir, tidak ada satu pun bagian halaman yang hilang. */
html.js [data-muncul] { opacity: 0; transform: translateY(30px); }
html.js [data-muncul].tampil {
  opacity: 1; transform: none;
  transition: opacity .9s var(--masuk), transform .9s var(--masuk);
}

/* ============================================================
   Responsif
   ============================================================ */

/* Tablet dan laptop kecil */
@media (max-width: 1024px) {
  .hero-kaki { grid-template-columns: 1fr; }
  .hero-tombol { justify-content: flex-start; }
  .tentang, .proses, .faq { grid-template-columns: 1fr; gap: 30px; }
  .paket-kepala { grid-template-columns: 1fr; align-items: start; }
  .paket-grid { grid-template-columns: repeat(2, 1fr); }

  /* Panel pratinjau butuh ruang lebar untuk berguna. Di layar sempit ia
     disembunyikan dan gambarnya dipindah ke dalam tiap baris proyek. */
  .karya-grid { grid-template-columns: 1fr; gap: 0; }
  .pratinjau { display: none; }
  .karya-gambar-hp { display: block; }
}

/* HP */
@media (max-width: 767px) {
  .wadah, .kepala-isi, .tentang, .proses, .faq, .layanan, .karya, .kontak, .kaki { padding-left: 20px; padding-right: 20px; }
  .menu-layar { padding-left: 20px; padding-right: 20px; }
  .paket { padding: 56px 0; }
  .hero { padding-top: 100px; padding-bottom: 56px; }
  .tentang, .proses, .faq, .layanan, .karya, .kontak { padding-top: 56px; padding-bottom: 56px; }

  /* Tiga statistik berjajar jadi terlalu sempit; ditumpuk supaya terbaca. */
  .statistik { grid-template-columns: 1fr; gap: 14px; }
  .stat { gap: 8px; }

  .hero-tombol { width: 100%; }
  .hero-tombol .tbl { flex: 1 1 auto; justify-content: center; }

  .paket-grid { grid-template-columns: 1fr; }
  .kartu-paket { padding: 28px 22px 30px; }

  /* Baris layanan: nama dan deskripsi bertumpuk, durasi pindah ke kiri
     supaya tidak tergantung di tepi kanan sendirian. */
  .layanan-baris { gap: 8px 18px; padding: 24px 0; }
  .lay-nama { flex: 1 1 100%; }
  .lay-desc { flex: 1 1 100%; max-width: none; }
  .lay-durasi { min-width: 0; text-align: left; }

  .karya-tautan { flex-wrap: wrap; gap: 6px 16px; }
  .karya-nama { flex: 1 1 100%; }
  .karya-kanan { margin-left: 0; }
  .karya-ket, .mode-pil { margin-left: 0; }
  .akor-isi > p { padding-left: 0; }
  .akor-kepala { gap: 14px; }

  .kaki-grid { grid-template-columns: 1fr; gap: 30px; }
  .kaki-bawah { margin-top: 30px; }
  .kontak { text-align: left; }
  .kontak-lead, .kontak-judul { margin-left: 0; margin-right: 0; }
  .kontak-kaki { justify-content: flex-start; }
}

/* Pil "Konsultasi" disembunyikan di HP.
   Logo + pil + tombol Menu tidak muat dalam 390px: tombol Menu terdorong
   17px keluar layar dan tepinya jadi tidak bisa ditekan. Tidak ada yang
   hilang — ajakan konsultasi tetap ada di tombol hero, di dalam menu,
   dan di seksi Kontak. */
@media (max-width: 767px) {
  .pil-konsultasi { display: none; }
}

/* ============================================================
   Kurangi gerak
   Pengunjung yang menyalakan pengaturan ini di HP atau laptopnya tidak
   mendapat gerakan sama sekali — isi tetap tampil utuh, hanya diam.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js [data-muncul] { opacity: 1; transform: none; }
  .pita-merek-jalan, .menu-pita-jalan { animation: none; }
  .hero-baris { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   Situs multi-halaman (Oktober 2026)
   Semua aturan di bawah ini baru; aturan di atas tidak diubah,
   jadi tampilan bagian lama tetap sama persis.
   ============================================================ */

/* Header tetap setinggi 72px. Saat datang dari halaman lain lewat
   tautan berpenanda (mis. /harga/#faq) judul seksi jangan tertutup. */
[id] { scroll-margin-top: 90px; }

/* ---------- Navigasi di header (layar lebar) ----------
   Dengan lima halaman, menu sebaiknya terlihat tanpa harus dibuka.
   Di bawah 1100px tetap memakai tombol Menu seperti sebelumnya. */
.nav-atas { display: none; }
@media (min-width: 1100px) {
  .nav-atas { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .nav-atas a {
    position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--abu-2); transition: color .25s ease;
  }
  .nav-atas a:hover { color: var(--biru); }
  .nav-atas a[aria-current="page"] { color: var(--ink); }
  .nav-atas a[aria-current="page"]::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 1px; background: var(--biru);
  }
  .tombol-menu { display: none; }
}
.menu-baris[aria-current="page"] .menu-nama { color: var(--biru); }
.kaki-grid a[aria-current="page"] { color: #fff; }

/* ---------- Kepala halaman (selain beranda) ---------- */
.halaman-kepala { padding-top: 132px; padding-bottom: 56px; border-bottom: 1px solid var(--garis); }
.jejak a { display: inline-block; padding: 12px 0; margin: -12px 0; border-bottom: 1px solid transparent; transition: color .25s ease; }
.jejak a:hover { color: var(--biru); }
.halaman-judul {
  margin: 26px 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(52px, 11.5vw, 156px); line-height: 0.92; letter-spacing: -0.055em;
  animation: wmBaris .9s var(--masuk) both;
}
.halaman-lead {
  margin: 34px 0 0; max-width: 46ch; font-family: var(--display); font-weight: 400;
  font-size: clamp(19px, 2.1vw, 28px); line-height: 1.45; letter-spacing: -0.02em; color: var(--abu-2);
}
.halaman-404 { border-bottom: 0; padding-bottom: 92px; }
.halaman-404-tombol { justify-content: flex-start; margin-top: 34px; }

/* ---------- Beranda: proyek terbaru ---------- */
.terbaru { padding: 92px 44px; }
.terbaru-kepala {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 26px; border-bottom: 1px solid var(--garis);
}
.terbaru-kepala .karya-judul { margin: 0; }
.terbaru-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; margin-top: 44px; }
.terbaru-bingkai { display: block; transition: transform .5s var(--masuk), box-shadow .5s var(--masuk); }
.terbaru-bingkai:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(15, 23, 42, .14); }
.terbaru-bingkai .pratinjau-gambar { display: block; }
.terbaru-nama {
  margin: 14px 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(32px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.045em;
}
.terbaru-klien {
  margin: 12px 0 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--biru);
}
.terbaru-ket { margin: 22px 0 0; font-size: 16px; line-height: 1.7; color: var(--abu); max-width: 52ch; }
.terbaru-teks .pratinjau-poin { margin-top: 22px; }
.terbaru-tombol { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.layanan > .tautan-mikro { margin-top: 26px; }

/* ---------- Beranda: paket ringkas ---------- */
.paket-ringkas a.kartu-paket { transition: background .3s ease; }
.paket-ringkas a.kartu-paket:hover { background: #131E33; }
.paket-ringkas a.kartu-paket.unggulan:hover { background: #18253F; }
.paket-lanjut { margin-top: 36px; }
.tbl-terang { background: #fff; color: var(--ink); }
.tbl-terang:hover { background: var(--biru); color: #fff; transform: translateY(-2px); }
.paket-catatan + .paket-catatan { margin-top: 26px; }

/* ---------- Portofolio ---------- */
.karya.karya-halaman { padding-top: 48px; }
.karya-baru {
  display: inline-block; vertical-align: middle; margin-left: 10px; padding: 5px 11px;
  border-radius: 999px; background: var(--biru); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- About Us ---------- */
.studio-angka { padding-top: 56px; }
.statistik-4 { grid-template-columns: repeat(4, 1fr); }
.statistik-4 .stat { flex-direction: column; align-items: flex-start; gap: 6px; }
.statistik-4 .stat-angka { font-size: clamp(28px, 3.4vw, 46px); }

.prinsip .lay-nama { font-size: clamp(22px, 2.8vw, 36px); }

.pendiri {
  padding: 92px 44px; display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
  gap: 64px; align-items: start; border-top: 1px solid var(--garis);
}
.pendiri-foto {
  margin: 0; position: sticky; top: 108px; aspect-ratio: 4 / 5;
  border-radius: 16px; overflow: hidden; background: var(--latar-abu);
}
.pendiri-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.pendiri-nama {
  margin: 18px 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(36px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.05em;
}
.pendiri-peran {
  margin: 14px 0 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--biru);
}
.pendiri-bio { margin: 22px 0 0; font-size: 16px; line-height: 1.75; color: var(--abu-2); max-width: 60ch; }
.pendiri-bio + .pendiri-bio { margin-top: 14px; }
.pendiri-fakta { margin: 34px 0 0; border-top: 1px solid var(--garis); }
.pendiri-fakta > div {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--garis);
}
.pendiri-fakta dt {
  padding-top: 3px; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--abu);
}
.pendiri-fakta dd { margin: 0; font-size: 15px; line-height: 1.6; }
.pendiri-tautan { display: flex; gap: 0 28px; flex-wrap: wrap; margin-top: 18px; }

.kontak-info { padding: 92px 44px; border-top: 1px solid var(--garis); }
.kontak-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--garis); }
/* Alamat email adalah nilai terpanjang; di kolom seperempat ia terpotong di
   tengah kata. Kolomnya diberi ruang lebih supaya tetap satu baris. */
@media (min-width: 1025px) { .kontak-grid { grid-template-columns: 0.9fr 1.35fr 1fr 1.05fr; } }
.kontak-sel {
  display: flex; flex-direction: column; gap: 12px; min-height: 160px; padding: 30px 26px;
  border-right: 1px solid var(--garis); border-bottom: 1px solid var(--garis);
  transition: background .25s ease;
}
a.kontak-sel:hover { background: var(--latar-hover); }
a.kontak-sel:hover .kontak-nilai { color: var(--biru); }
.kontak-nilai {
  font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.02em; overflow-wrap: anywhere; transition: color .25s ease;
}
.kontak-catatan { font-size: 13px; line-height: 1.55; color: var(--abu); }

/* ---------- Responsif untuk bagian baru ---------- */
@media (max-width: 1024px) {
  .terbaru-grid { grid-template-columns: 1fr; gap: 34px; }
  .pendiri { grid-template-columns: 1fr; gap: 40px; }
  .pendiri-foto { position: static; max-width: 440px; }
  .kontak-grid { grid-template-columns: repeat(2, 1fr); }
  .statistik-4 { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
}
@media (max-width: 767px) {
  .halaman-kepala, .terbaru, .pendiri, .kontak-info { padding-left: 20px; padding-right: 20px; }
  .halaman-kepala { padding-top: 100px; padding-bottom: 40px; }
  .terbaru, .pendiri, .kontak-info { padding-top: 56px; padding-bottom: 56px; }
  .halaman-404 { padding-bottom: 56px; }
  .terbaru-tombol .tbl, .halaman-404-tombol .tbl { flex: 1 1 auto; justify-content: center; }
  .kontak-grid { grid-template-columns: 1fr; }
  .kontak-sel { min-height: 0; padding: 24px 20px; }
  .pendiri-fakta > div { grid-template-columns: 1fr; gap: 4px; }
  .karya-baru { margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .halaman-judul { animation: none; opacity: 1; transform: none; }
}