/* ===========================================================
   AB & Partners Law Office — design system
   Palet: tinta hampir-hitam + satu aksen oxblood, dipakai hemat.
   Menggantikan navy+emas klasik (lihat docs/PRD.md soal arahnya).
   Nama variabel --navy/--gold dipertahankan apa adanya — mengubah
   nilainya cukup untuk mengganti seluruh identitas warna situs,
   karena setiap komponen di bawah membaca warnanya lewat variabel
   ini, bukan menuliskan warna sendiri-sendiri. Motif guilloche
   diambil dari cetak pengaman sertifikat saham, bukan dari pustaka
   komponen.
   =========================================================== */
:root{
  --paper:#f2f1ee;
  --surface:#fbfaf8;
  --raise:#e7e5e0;
  --line:#d5d2ca;
  --line-2:#b6b1a5;
  --ink:#12161c;
  --ink-2:#333b45;
  --muted:#6b7280;
  --navy:#8d0000;
  --navy-2:#a9241b;
  --gold:#8d0000;
  --rule:#a8372c;
  --rule-2:#d8b5a8;
  --ok:#1c6146;
  --warn:#8a5512;
  --scrim:rgba(12,18,26,.55);
  --on-navy:#f7f4ec;
  --ribbon:#12161c;
  --ribbon-ink:#c79e5f;
  --guilloche:#8d0000;
  --guilloche-a:.13;

  /* Dua peran, dua huruf, karena tugasnya berbeda. Judul dilihat sekilas
     dalam ukuran besar; badan teks dibaca berparagraf-paragraf. Satu huruf
     untuk keduanya selalu mengorbankan salah satunya.
     --f-mono tetap peran terpisah untuk label kecil dan angka yang perlu
     sejajar, memakai Lato dengan jarak huruf. */
  --f-display:'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-body:'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-mono:'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --step--1:.8125rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:clamp(2.1rem,3.8vw,3.1rem);
  --step-5:clamp(2.9rem,6.6vw,5.6rem);

  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:78rem;
  --ease:cubic-bezier(.2,.65,.25,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0a0f16;
    --surface:#101823;
    --raise:#16202c;
    --line:#22303f;
    --line-2:#35485d;
    --ink:#eceff3;
    --ink-2:#c5cdd7;
    --muted:#8794a3;
    --navy:#d5594a;
    --navy-2:#e17365;
    --gold:#d5594a;
    --rule:#b3392d;
    --rule-2:#b96559;
    --ok:#5fc9a0;
    --warn:#dda85a;
    --scrim:rgba(0,0,0,.7);
    --on-navy:#0a0f16;
    --ribbon:#05090e;
    --ribbon-ink:#c79e5f;
    --guilloche:#d5594a;
    --guilloche-a:.16;
  }
}
:root[data-theme="dark"]{
  --paper:#0a0f16;
  --surface:#101823;
  --raise:#16202c;
  --line:#22303f;
  --line-2:#35485d;
  --ink:#eceff3;
  --ink-2:#c5cdd7;
  --muted:#8794a3;
  --navy:#d5594a;
  --navy-2:#e17365;
  --gold:#d5594a;
  --rule:#b3392d;
  --rule-2:#b96559;
  --ok:#5fc9a0;
  --warn:#dda85a;
  --scrim:rgba(0,0,0,.7);
  --on-navy:#0a0f16;
  --ribbon:#05090e;
  --ribbon-ink:#c79e5f;
  --guilloche:#d5594a;
  --guilloche-a:.16;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--step-0);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.14;letter-spacing:-.005em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--rule);outline-offset:4px}
::selection{background:var(--rule);color:#12161c}
img,canvas{max-width:100%}

/* ---- pita prototipe ---- */
.ribbon{
  background:var(--ribbon);color:var(--ribbon-ink);
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.55rem var(--gut);display:flex;gap:.7rem;align-items:center;justify-content:center;text-align:center;
}
.ribbon b{font-weight:500}

/* ---- kepala ---- */
.hdr{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--rule);opacity:.3}
.hdr-in{max-width:var(--max);margin:0 auto;padding:.9rem var(--gut);display:flex;align-items:center;gap:1.25rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
/* Monogram firma menggantikan lambang huruf yang dulu digambar dengan CSS.
   Ditampilkan 34px, disajikan 68px, karena berkas sumbernya kecil dan
   membiarkan browser menaikkan skalanya sendiri terlihat kabur. Lebar dan
   tinggi ditulis pada elemennya agar tata letak tidak melompat sebelum
   gambar termuat. */
.brand-mark{display:block;height:2.125rem;width:auto;flex:none}
.brand .nm{display:flex;flex-direction:column;line-height:1.15}
.brand .nm b{font-family:var(--f-display);font-size:1.1875rem;font-weight:500;letter-spacing:.01em}
.brand .nm small{font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:1.35rem;align-items:center}
.nav a{
  text-decoration:none;font-size:.8125rem;letter-spacing:.02em;color:var(--ink-2);
  padding:.4rem 0;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--rule)}
.tools{display:flex;gap:.4rem;align-items:center}
.ico{
  width:2.1rem;height:2.1rem;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line);border-radius:50%;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.ico:hover{border-color:var(--rule);background:var(--surface)}
.ico svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.3}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em}
.lang button{background:transparent;border:0;padding:.45rem .62rem;cursor:pointer;color:var(--muted);text-transform:uppercase;transition:background .3s var(--ease)}
.lang button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.burger{display:none}

/* ---- kerangka ---- */
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
main{min-height:60vh}
main{animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}*{transition-duration:.01ms !important}}

/* ---- primitif ---- */
.eyebrow{
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.8rem;
}
.eyebrow::after{content:"";flex:1;height:1px;max-width:4.5rem;background:linear-gradient(to right,var(--rule),transparent)}
.lede{font-size:var(--step-1);line-height:1.6;color:var(--ink-2);max-width:40ch;font-weight:300}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;cursor:pointer;
  font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;font-weight:400;
  padding:.85rem 1.4rem;border:1px solid var(--navy);background:var(--navy);color:var(--on-navy);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--rule);background:transparent}
.btn svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.4}
.rule2{height:0;border-top:1px solid var(--line);position:relative}
.rule2::after{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--rule);opacity:.28}
.sect{padding:clamp(3.5rem,8vw,6.5rem) 0;border-top:1px solid var(--line);position:relative}
.sect::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--rule);opacity:.22}
.sect-head{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:end;justify-content:space-between;margin-bottom:2.75rem}
.sect-head h2{font-size:var(--step-4)}
.link-more{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--gold);border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.cell{background:var(--paper);padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;transition:background .4s var(--ease)}
a.cell{text-decoration:none}
a.cell:hover{background:var(--surface)}
.cell h3{font-size:var(--step-2)}
.cell p{font-size:.875rem;color:var(--muted);line-height:1.65}
.cell .idx{font-family:var(--f-mono);font-size:.625rem;color:var(--gold);letter-spacing:.2em}
.note{font-size:.8125rem;color:var(--muted);border-left:1px solid var(--rule);padding:.4rem 0 .4rem 1rem;max-width:62ch}

/* ---- hero ----
   .hero polos (kontak, profil pengacara, tentang) tetap di atas --paper
   biasa, warna teks ikut var(--ink) seperti bagian lain situs. Hanya
   .hero-full (beranda, latar foto) yang berubah jadi teks terang literal —
   bukan var(--ink)/var(--paper) yang terbalik di tema gelap, karena
   gelapnya di sini soal ada foto di belakang teks, bukan soal tema situs. */
.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem);position:relative}
.hero-row{position:relative;display:grid;gap:3rem;grid-template-columns:1fr;margin-top:2.5rem}
@media (min-width:920px){.hero-row{grid-template-columns:1.1fr .9fr;align-items:end}}
/* Foto hero di kolom kanan (mis. "Tentang Kami") -- sama pola bingkai
   dengan .plate (potret pengacara), rasio lebih lanskap karena sumbernya
   foto kantor/tim, bukan potret formal satu orang. */
.hero-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-2);background:var(--navy)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Fullscreen: satu slide mengisi (kurang lebih) satu layar penuh, header
   sticky tetap di atasnya seperti biasa — bukan tumpang tindih. */
.hero-full{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;color:#f4f1ea}
.hero-full .eyebrow{color:var(--rule-2)}
.hero-full .eyebrow::after{background:linear-gradient(to right,rgba(244,241,234,.4),transparent)}
.hero-code{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,241,234,.65);margin-top:.6rem}
.hero-full h1{font-size:var(--step-5);letter-spacing:-.015em;max-width:20ch;margin:.7rem 0 0;color:#fff}
.hero-full h1 a{color:inherit;text-decoration:none}
.hero-full h1 a:hover{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.14em}
.hero-full .lede{color:rgba(244,241,234,.85);max-width:50ch;margin-top:1.3rem;font-size:var(--step-1)}
.hero-full .btn{background:var(--rule);border-color:var(--rule);color:#fff}
.hero-full .btn:hover{background:transparent;border-color:#fff;color:#fff}
.hero-full .btn-ghost{border-color:rgba(244,241,234,.4);color:#fff}
.hero-full .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.orn{position:absolute;right:calc(var(--gut) * -1);top:-2rem;width:34rem;height:34rem;pointer-events:none;z-index:-1;opacity:.9}
@media (max-width:1000px){.orn{display:none}}

/* Carousel latar: gambar-gambar ditumpuk lewat crossfade opacity, dibentangkan
   penuh (trik 100vw yang sama seperti .why) supaya tidak terpotong oleh
   padding main.shell. */
.hero-bg{
  position:absolute;top:0;bottom:0;width:100vw;margin-left:calc(50% - 50vw);z-index:-2;
  background:linear-gradient(135deg,#1c1210,#3a1512 55%,#1c1210);
  overflow:hidden;
}
.hero-slide-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  transition:opacity 3.2s var(--ease),transform 7s var(--ease);
}
.hero-slide-bg.is-active{opacity:1;transform:scale(1)}
.hero-slide-bg.is-placeholder canvas{position:absolute;top:50%;right:6%;width:28rem;height:28rem;max-width:70vw;transform:translateY(-50%)}
@media (max-width:1000px){.hero-slide-bg.is-placeholder canvas{right:50%;transform:translate(50%,-50%)}}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,9,14,.7) 0%,rgba(5,9,14,.52) 45%,rgba(5,9,14,.8) 100%);
}

/* ---- konten hero: satu blok yang gantian isinya per layanan ----
   Cuma ada satu <h1> di halaman ini — isinya ditulis ulang lewat JS saat
   slide berganti, bukan beberapa <h1> yang disembunyikan-munculkan, supaya
   tetap satu heading yang benar untuk SEO/pembaca layar. */
.hero-content{position:relative;max-width:44rem}
.hero-content.is-swapping{animation:heroContentIn 1.4s var(--ease)}
@keyframes heroContentIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@media (max-width:640px){@keyframes heroContentIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}}
.hero-cta{position:relative;display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}

.hero-nav{position:relative;display:flex;align-items:center;gap:1.1rem;margin-top:2.8rem}
.hero-nav-btn{
  width:2.1rem;height:2.1rem;flex:none;border-radius:50%;border:1px solid rgba(244,241,234,.32);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.hero-nav-btn:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.hero-nav-btn svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.6}
.hero-dots{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-dot{width:.45rem;height:.45rem;border-radius:50%;border:0;padding:0;background:rgba(244,241,234,.35);cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}
.hero-dot:hover{background:rgba(244,241,234,.6)}
.hero-dot.is-active{background:var(--rule-2);transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){
  .hero-slide-bg{transition:none}
  .hero-content.is-swapping{animation:none}
}

/* ---- strip fakta di bawah hero ----
   Angka di atas, label di bawah — bukan sejajar-baseline seperti .fact
   biasa — supaya label yang bungkus dua baris tidak membuat angkanya
   kelihatan miring/tak sejajar. Angka pakai Lato tebal (EB Garamond cuma
   sampai 600, kelihatan tipis untuk peran ini), bukan serif. Isi tiap
   kolom ditengahkan, bukan menempel ke garis pembatas kiri. */
.hero-facts{position:relative;display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(244,241,234,.2);margin-top:2.8rem}
.hero-facts .fact{
  flex:1 1 12rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.5rem 1.8rem;border-bottom:0;border-right:1px solid rgba(244,241,234,.2);
}
.hero-facts .fact:last-child{border-right:0}
.hero-facts .fact b{
  font-family:var(--f-body);font-weight:900;font-size:2.25rem;line-height:1;min-width:0;
  color:var(--rule-2);font-variant-numeric:tabular-nums;
}
.hero-facts .fact span{color:rgba(244,241,234,.75);font-size:.8125rem;line-height:1.5;max-width:22ch}
@media (max-width:640px){
  .hero-facts .fact{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(244,241,234,.2)}
  .hero-facts .fact:last-child{border-bottom:0}
}

.facts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.fact{display:flex;gap:1.2rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--line)}
.fact b{font-family:var(--f-display);font-size:2rem;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;min-width:3.6rem}
.fact span{font-size:.8125rem;color:var(--ink-2);line-height:1.5}

/* ---- tombstone ---- */
.tombs{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.tomb{border:1px solid var(--line-2);background:var(--surface);padding:1.7rem 1.2rem;text-align:center;display:flex;flex-direction:column;gap:.6rem;position:relative}
.tomb::before,.tomb::after{content:"";position:absolute;left:1.2rem;right:1.2rem;height:1px;background:var(--rule);opacity:.5}
.tomb::before{top:.6rem}
.tomb::after{bottom:.6rem}
.tomb .val{font-family:var(--f-mono);font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tomb .what{font-family:var(--f-display);font-size:1.125rem;line-height:1.3}
.tomb .role{font-size:.8125rem;color:var(--muted)}
.tomb .meta{font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---- orang ---- */
.ppl{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.person{text-decoration:none;display:flex;flex-direction:column;gap:.9rem}
.plate{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--navy);border:1px solid var(--line-2)}
/* --navy jadi terang di tema gelap (aksen koral), jadi pelat tanpa foto
   perlu latar sendiri yang tetap gelap — dipinjam dari --ribbon, satu-satunya
   token lain yang sengaja tetap gelap di kedua tema. */
:root[data-theme="dark"] .plate{background:var(--ribbon)}
.plate canvas{position:absolute;inset:0;width:100%;height:100%}
/* Potret mengisi pelat sepenuhnya. object-fit menahan wajah dari peregangan
   ketika rasio unggahan tidak persis 4:5; object-position ditarik ke atas
   karena pada potret formal kepala berada di bagian atas bingkai. */
.plate-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.plate .mono{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-size:3.1rem;font-weight:400;color:var(--rule-2);letter-spacing:.04em;
}
:root[data-theme="dark"] .plate .mono{color:var(--rule)}
.plate small{
  position:absolute;bottom:.55rem;left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);
}
.person h3{font-size:var(--step-1)}
.person .role{font-size:.75rem;color:var(--gold);font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.person .sub{font-size:.8125rem;color:var(--muted);line-height:1.5}

/* ---- artikel ---- */
.art-head{padding:clamp(2.5rem,6vw,4.5rem) 0 1.5rem;max-width:46rem}
.art-head h1{font-size:var(--step-4);margin-top:1.2rem;max-width:24ch}
.art-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.3rem;font-size:.8125rem;color:var(--muted);align-items:center}
.art-body{max-width:37rem;display:flex;flex-direction:column;gap:1.25rem;font-size:1.0625rem;line-height:1.85;color:var(--ink-2);padding-bottom:2.5rem}
.pull{font-family:var(--f-display);font-style:italic;font-size:var(--step-3);line-height:1.32;border-left:1px solid var(--rule);padding-left:1.4rem;color:var(--ink);margin:.8rem 0}
.cite{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem;padding-bottom:1rem;line-height:1.7;max-width:37rem}
.cite a{color:var(--gold)}
.draft{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.625rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--warn);
  border:1px solid var(--warn);padding:.3rem .6rem;
}

/* ---- blok AI ---- */
.ai{border:1px solid var(--line-2);background:var(--surface);padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:1rem;max-width:46rem;position:relative}
.ai::after{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:var(--rule)}
.ai-hd{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between}
.ai-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ai-badge .dot{width:4px;height:4px;border-radius:50%;background:var(--rule)}
.ai ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.6rem}
.ai li{font-size:.9375rem;color:var(--ink-2);line-height:1.65}
.ai .prov{font-family:var(--f-mono);font-size:.6875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.85rem;line-height:1.7}

/* ---- pencarian ---- */
.ov{position:fixed;inset:0;z-index:60;display:none;padding:6vh 1rem 1rem;background:var(--scrim)}
.ov[open-x]{display:block}
.ov-in{max-width:46rem;margin:0 auto;background:var(--paper);border:1px solid var(--line-2)}
.ov-top{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.ov-top input{flex:1;background:transparent;border:0;font-family:var(--f-display);font-size:var(--step-2);color:var(--ink);outline:none;min-width:0}
.ov-top input::placeholder{color:var(--muted);font-style:italic}
.ov-body{max-height:54vh;overflow-y:auto}
.hit{display:block;text-decoration:none;padding:1.05rem 1.25rem;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.hit:hover{background:var(--surface)}
.hit h4{font-family:var(--f-display);font-size:var(--step-1);margin:0 0 .35rem}
.hit .why{font-size:.8125rem;color:var(--muted)}
.hit .why b{color:var(--gold);font-weight:400}
.ov-foot{padding:.85rem 1.25rem;font-family:var(--f-mono);font-size:.625rem;color:var(--muted);letter-spacing:.1em}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:.95rem 1.25rem}
.chip{font-family:var(--f-mono);font-size:.6875rem;border:1px solid var(--line);background:transparent;padding:.35rem .65rem;border-radius:999px;cursor:pointer;color:var(--muted);transition:border-color .3s var(--ease),color .3s var(--ease)}
.chip:hover{border-color:var(--rule);color:var(--ink)}

/* ---- formulir ---- */
.form{display:flex;flex-direction:column;gap:1.2rem;max-width:35rem}
.f-row{display:flex;flex-direction:column;gap:.4rem}
.f-row label{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.f-row input,.f-row select,.f-row textarea{font:inherit;font-size:.9375rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:0;padding:.7rem .8rem;width:100%}
.f-row textarea{min-height:7rem;resize:vertical}
.f-two{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:640px){.f-two{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.8125rem;color:var(--ink-2);line-height:1.55}
.consent input{margin-top:.25rem;width:.95rem;height:.95rem;accent-color:var(--navy);flex:none}
.disc{font-size:.75rem;color:var(--muted);background:var(--raise);border:1px solid var(--line);padding:.95rem 1rem;line-height:1.6}
.out{border:1px solid var(--line-2);background:var(--surface);padding:1.4rem;display:none;flex-direction:column;gap:1.1rem}
.out[show-x]{display:flex}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;font-family:var(--f-mono);font-size:.8125rem;font-variant-numeric:tabular-nums}
.kv dt{color:var(--muted);letter-spacing:.08em}
.kv dd{margin:0;color:var(--ink)}
.pill{display:inline-block;padding:.2rem .55rem;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase}
.pill-ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}

/* ---- catatan spesifikasi ---- */
.spec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.75rem}
.spec-r{background:var(--paper);padding:1.25rem 1.35rem;display:grid;gap:.45rem;grid-template-columns:1fr}
@media (min-width:760px){.spec-r{grid-template-columns:9rem 1fr}}
.spec-r code{font-family:var(--f-mono);font-size:.6875rem;color:var(--gold);letter-spacing:.06em}
.spec-r p{font-size:.9375rem;color:var(--ink-2);line-height:1.65}
.risk{border-left:1px solid var(--warn);padding-left:1rem;font-size:.875rem;color:var(--ink-2);line-height:1.7;max-width:62ch}

/* ---- kaki ---- */
/* Footer memakai elemen pembungkus tersendiri, bukan class .shell.
   Sebelumnya footer memakai .shell, dan `margin:0 auto` pada class itu
   mengalahkan `margin-top` pada selector elemen — jaraknya menjadi nol
   dan footer menabrak isi halaman di atasnya. */
.site-foot{
  margin-top:clamp(4rem,8vw,6.5rem);
  border-top:1px solid var(--line);
  padding:clamp(2.75rem,5vw,3.75rem) 0 3rem;
  font-size:.8125rem;color:var(--muted);position:relative;
}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--rule);opacity:.22}

.f-top{display:flex;flex-direction:column;gap:2.75rem}
@media (min-width:860px){
  .f-top{position:relative;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:4rem}
  /* Garis pembatas tengah, diposisikan lepas dari konten (di tengah kontainer,
     bukan menempel di tepi blok link) supaya tetap di tengah walau lebar
     f-brand dan f-links tidak sama. */
  .f-top::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line)}
}

.f-brand{display:flex;flex-direction:column;gap:1.1rem}
.f-brand .brand{cursor:default}
.f-addr{max-width:22rem;line-height:1.75}
.f-maps{display:block!important;width:fit-content;font-size:.75rem;color:var(--muted)!important;text-decoration:underline;padding:0!important;margin-top:.35rem}

.f-links{display:flex;flex-wrap:wrap;gap:3.5rem}
.site-foot h4{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1rem}
.site-foot a,.site-foot .f-links span{display:block;text-decoration:none;padding:.28rem 0;line-height:1.5;transition:color .3s var(--ease)}
.site-foot a:hover{color:var(--ink)}

/* Ikon sosial: sama seperti .ico di header (bulat, garis tipis SVG buatan
   sendiri) — bukan pustaka ikon, mengikuti prinsip font self-hosted di
   file ini. Disembunyikan per-ikon lewat @if di Blade, bukan CSS, ketika
   URL-nya belum diisi di Pengaturan Situs. */
.f-social{display:flex;gap:.6rem;margin-top:.9rem}
.f-social a{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:none;padding:0;
  border:1px solid var(--line);border-radius:50%;color:var(--ink-2);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.f-social a:hover{border-color:var(--rule);color:var(--ink);background:var(--surface)}
.f-social svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.3}

.f-bot{
  border-top:1px solid var(--line);margin-top:2.75rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:space-between;
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
}

@media (max-width:880px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem var(--gut) 1.2rem}
  .nav.open a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .burger{display:grid}
  .hdr-in{position:relative}
}
.hero > *:not(.orn):not(.hero-bg){position:relative;z-index:1}
.orn{z-index:0}

/* Skip link: tersembunyi sampai difokus keyboard. Dulu memakai handler
   onfocus inline, yang memaksa CSP melonggarkan script-src. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  display:inline-flex;align-items:center;padding:.85rem 1.4rem;
  background:var(--navy);color:var(--on-navy);text-decoration:none;
  font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;
}
.skip:focus{left:1rem;top:1rem}

/* ---- artikel dengan gambar ----
   Ditulis di akhir berkas dengan sengaja: BrandAssetTest membaca --paper dan
   --gold dengan regex "kecocokan pertama menang", jadi menyisipkan aturan di
   atas definisi token akan mengubah nilai yang diuji kontrasnya. */
.art-fig{margin:0 0 2rem;border:1px solid var(--line-2);background:var(--surface)}
.art-fig img{display:block;width:100%;height:auto}

@media (min-width:920px){
  .art-cols{
    display:grid;column-gap:clamp(2rem,4vw,3.5rem);
    grid-template-columns:minmax(0,38rem) minmax(15rem,24rem);
    /* Wajib. Tanpa ini item grid meregang setinggi barisnya dan position:sticky
       tidak punya ruang untuk bergerak sama sekali. */
    align-items:start;
  }
  .art-cols .art-head{grid-column:1;grid-row:1}
  .art-cols .art-main{grid-column:1;grid-row:2}
  /* Membentang pada kedua baris, lalu menempel di dalamnya: itulah yang
     membuat gambar ikut sampai ujung naskah, bukan berhenti di paragraf
     pertama. Offset memperhitungkan .hdr yang juga sticky (±4rem). */
  .art-cols .art-fig{
    grid-column:2;grid-row:1 / span 2;
    position:sticky;top:5.5rem;
    margin:clamp(2.5rem,6vw,4.5rem) 0 0;
  }
}

/* ---- lembar dokumen ----
   Gambar halaman pertama ditampilkan seperti kertas. Latarnya putih tetap,
   bukan var(--paper): kertas yang ikut menggelap pada tema gelap tidak lagi
   terbaca sebagai kertas.

   Pudarnya memakai mask, bukan gradien berwarna yang ditumpuk di atasnya.
   Gradien berwarna harus menebak warna halaman, dan pada tema gelap tebakan
   itu mengubah bagian bawah kertas menjadi abu kotor. Mask membuat kertasnya
   benar-benar larut, apa pun warna di belakangnya.

   Tingginya dibatasi supaya ini terbaca sebagai intipan halaman pertama,
   bukan halaman penuh yang kebetulan kotor di bawah. */
.doc-sheet{margin:0 0 1.6rem;max-width:46rem}
.doc-sheet-window{
  max-height:clamp(20rem,58vh,34rem);overflow:hidden;background:#fff;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 97%);
          mask-image:linear-gradient(to bottom,#000 58%,transparent 97%);
}
.doc-sheet img{display:block;width:100%;height:auto}
.doc-sheet figcaption{
  display:flex;align-items:center;gap:.55rem;margin-top:.2rem;
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--rule);padding-top:.9rem;
}
.doc-sheet .doc-lock{display:inline-flex;color:var(--gold)}

/* Teks yang tetap dibaca pembaca layar dan mesin pencari, tanpa tampil. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- panah pada tautan "lihat semua" ----
   SVG-nya ditambahkan di section-head.blade.php; di sini hanya diberi
   transisi geser saat hover, sama seperti tombol lain di situs. */
.link-more{display:inline-flex;align-items:center;gap:.4rem}
.link-more svg{width:.7rem;height:.7rem;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s var(--ease)}
.link-more:hover svg{transform:translateX(3px)}

/* ---- kartu terangkat saat hover ----
   a.cell sudah berganti latar saat hover (baris 196); ini menambah
   sedikit gerak supaya terasa bisa diklik, bukan sekadar berganti warna. */
a.cell,.tomb,.person{transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .4s var(--ease)}
a.cell:hover,.person:hover .plate{transform:translateY(-4px)}
a.cell:hover{box-shadow:0 18px 32px -20px rgba(18,22,28,.28)}
:root[data-theme="dark"] a.cell:hover{box-shadow:0 18px 32px -20px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a.cell:hover{box-shadow:0 18px 32px -20px rgba(0,0,0,.6)}}

/* ---- muncul saat discroll ----
   Elemen yang diberi atribut ini oleh site.js (bukan ditulis di Blade,
   supaya tidak ada halaman yang tertinggal); dilewati sepenuhnya saat
   prefers-reduced-motion, sama seperti animasi masuk halaman di atas. */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1.5s var(--ease),transform 1.5s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---- tekstur kertas ----
   Noise dibuat lewat filter SVG (feTurbulence), bukan berkas gambar —
   tidak ada aset tambahan untuk dimuat atau di-cache. multiply menggelapkan
   sedikit di atas latar terang; overlay dipakai di tema gelap karena
   multiply nyaris tidak terlihat di atas warna yang sudah gelap. */
body::before{
  content:"";position:fixed;inset:0;z-index:5;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
:root[data-theme="dark"] body::before{mix-blend-mode:overlay;opacity:.06}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:overlay;opacity:.06}}

/* ---- "Mengenal Kami" — blok teks penuh, rata kiri ----
   Dulu panel dua warna (foto di kiri, teks di kanan); foto dibuang atas
   permintaan pemilik akun (belum ada foto sungguhan yang terunggah, cuma
   ikon kosong), jadi sekarang cuma satu kolom teks selebar section,
   latarnya menyatu dengan latar halaman seperti section lain -- bukan
   panel terangkat terpisah lagi. */
.about-split{
  border-top:1px solid var(--line);position:relative;
}
.about-split::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--rule);opacity:.22}
.about-text{
  position:relative;overflow:hidden;max-width:56rem;
}
.about-mark{
  position:absolute;top:.5rem;right:-.4rem;font-size:clamp(3.2rem,9vw,6.5rem);
  font-family:var(--f-display);font-weight:400;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink);opacity:.045;white-space:nowrap;pointer-events:none;line-height:1;
}
.about-scale{
  position:absolute;bottom:-2rem;left:calc(-2rem - var(--gut) * .3);width:9.5rem;height:9.5rem;
  fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
  opacity:.06;pointer-events:none;
}
.checks{display:flex;flex-direction:column;gap:.65rem;margin-top:1.6rem;position:relative}
.check{display:flex;align-items:center;gap:.7rem;font-size:.875rem;color:var(--ink-2)}
.check svg{width:1rem;height:1rem;flex:none;fill:none;stroke:var(--gold);stroke-width:2}

.about-text[data-reveal]{
  transform:translateX(48px);
  transition:opacity 2s var(--ease),transform 2s var(--ease);
  transition-delay:.25s;
}
.about-text[data-reveal].in{transform:none}

/* ---- variasi "hero": foto latar statis, diatur dari Pengaturan Situs ----
   Kelas .has-bg cuma ada kalau foto sungguhan sudah diunggah -- tanpa itu
   section ini tetap latar polos seperti sebelumnya (lihat komentar di atas
   .about-split). Warna teks dibalik ke terang di atas scrim gelap, sama
   pola dengan .hero-full/.why supaya konsisten di seluruh situs. */
.about-split.has-bg{
  padding:clamp(5rem,11vw,9rem) 0;border-top:0;
}
.about-split.has-bg::before{display:none}
.about-bg{
  position:absolute;inset:0;width:100vw;margin-left:calc(50% - 50vw);z-index:-2;
  background-size:cover;background-position:center;
}
.about-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,9,14,.72) 0%,rgba(5,9,14,.52) 45%,rgba(5,9,14,.78) 100%);
}
.about-split.has-bg .eyebrow{color:var(--rule-2)}
.about-split.has-bg .eyebrow::after{background:linear-gradient(to right,rgba(244,241,234,.35),transparent)}
.about-split.has-bg h2{color:#fff}
.about-split.has-bg .lede{color:rgba(244,241,234,.85)}
.about-split.has-bg .check{color:rgba(244,241,234,.85)}
.about-split.has-bg .check svg{stroke:var(--rule-2)}
.about-split.has-bg .link-more{color:var(--rule-2);border-bottom-color:rgba(244,241,234,.35)}
/* Tipografi hantu ini didesain buat latar polos -- di atas foto malah
   kelihatan seperti bayangan yang mengganggu, jadi disembunyikan saja
   ketika ada foto latar. */
.about-split.has-bg .about-mark,
.about-split.has-bg .about-scale{display:none}

/* ---- "Mengapa Memilih Kami" — pita gelap ----
   Selalu gelap di kedua tema, sama seperti .ribbon di header: dipinjam
   token yang sama (--ribbon/--ribbon-ink) supaya tidak perlu literal baru,
   dan supaya pita ini tidak pernah terbalik jadi terang di tema gelap. */
.why{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--ribbon);color:#f4f1ea;
  padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative;
}
.why .eyebrow{color:var(--ribbon-ink)}
.why .eyebrow::after{background:linear-gradient(to right,rgba(244,241,234,.35),transparent)}
.why h2{color:#fff}
.why-grid{display:grid;gap:1px;background:rgba(244,241,234,.1);grid-template-columns:repeat(auto-fit,minmax(min(100%,14.5rem),1fr))}
.why-item{background:var(--ribbon);padding:2rem 1.6rem;display:flex;flex-direction:column;gap:.9rem}
.why-grid .why-item:nth-child(1){transition-delay:0ms}
.why-grid .why-item:nth-child(2){transition-delay:160ms}
.why-grid .why-item:nth-child(3){transition-delay:320ms}
.why-grid .why-item:nth-child(4){transition-delay:480ms}
@media (prefers-reduced-motion:reduce){.why-grid .why-item{transition-delay:0ms !important}}
.why-ico{width:2.5rem;height:2.5rem;border:1px solid rgba(244,241,234,.25);border-radius:50%;display:grid;place-items:center}
.why-ico svg{width:1.1rem;height:1.1rem;fill:none;stroke:var(--ribbon-ink);stroke-width:1.4}
.why-item h3{font-family:var(--f-display);font-size:var(--step-2);color:#fff;font-weight:400}
.why-item p{font-size:.875rem;color:rgba(244,241,234,.72);line-height:1.6}

/* ---- tim muncul satu per satu, geser dari kiri ----
   nth-child, bukan indeks dari Blade: berlaku di halaman /tim juga tanpa
   perlu meneruskan atribut lewat komponen x-person-card. Geser horizontal,
   bukan naik vertikal seperti [data-reveal] umum, supaya kelihatan seperti
   masuk satu-satu, bukan sekadar memudar bersamaan. */
.person[data-reveal]{
  transform:translateX(-34px);
  transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);
}
.person[data-reveal].in{transform:none}
.ppl .person:nth-child(1){transition-delay:0ms}
.ppl .person:nth-child(2){transition-delay:220ms}
.ppl .person:nth-child(3){transition-delay:440ms}
.ppl .person:nth-child(4){transition-delay:660ms}
.ppl .person:nth-child(5){transition-delay:880ms}
.ppl .person:nth-child(6){transition-delay:1100ms}
@media (prefers-reduced-motion:reduce){.ppl .person{transition-delay:0ms !important}}