/* Paramo mockup - struktur mengikuti pola situs benchmark, palet dan isi Paramo */
/* Huruf di-host sendiri: satu berkas variabel subset latin untuk bobot 400-800.
   Menggantikan Google Fonts yang memblokir render sekitar 850 ms di ponsel. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../assets/font/plus-jakarta-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --navy:#192638; --navy-800:#2A3F5D; --navy-700:#365178;
  --cream:#F5F2EA; --cream-2:#EBE5D8;
  --gold:#C2A86D; --gold-deep:#816A36; --gold-soft:rgba(194,168,109,.55);
  --ink:#141821; --ink-70:#4A525E; --ink-45:#5F6775;
  --white:#fff; --rule:#E2DDD3;
  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box}
/* jangkar (#warna, #komponen, dst.) tidak tertutup header yang menempel setinggi 76px */
html{scroll-padding-top:96px}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrapper{max-width:var(--wrap);margin:0 auto;padding:0 28px}
a{color:inherit}
/* height:auto menjaga rasio saat img membawa atribut width dan height (mencegah pergeseran tata letak) */
img{max-width:100%;height:auto;display:block}
picture{display:contents}
picture > source{display:none}

/* ---------- slot gambar kosong ---------- */
.ph{background:var(--cream);border:1px dashed var(--gold);border-radius:3px;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ph:after{content:attr(data-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;text-align:center;padding:8px}
.ph.r169{aspect-ratio:16/9}
.ph.r43{aspect-ratio:4/3}
.ph.r11{aspect-ratio:1/1}
.ph.r219{aspect-ratio:21/9}

/* ---------- header ---------- */
header.site{background:var(--navy);position:sticky;top:0;z-index:50}
header.site .wrapper{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo-area img{height:40px;width:auto}
header.site nav{display:flex;align-items:center;gap:26px}
header.site nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:14px;font-weight:500}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--gold)}

/* ---------- mega-menu: panel hover di header, hanya desktop dengan mouse ---------- */
header.site .wrapper{position:relative}
.mega,.chev{display:none}
@media (hover:hover) and (min-width:901px){
  header.site nav{align-self:stretch;align-items:stretch}
  header.site nav > a,.mega-trigger{display:flex;align-items:center}
  .mega-item{display:flex}
  .mega-trigger{position:relative;gap:5px}
  .mega-trigger::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
    transform:scaleX(0);transition:transform .2s ease}
  .chev{display:block;width:11px;height:11px;transition:transform .2s ease}
  .mega-item:hover .mega-trigger,.mega-item:has(:focus-visible) .mega-trigger{color:var(--gold)}
  .mega-item:hover .mega-trigger::after,.mega-item:has(:focus-visible) .mega-trigger::after{transform:scaleX(1)}
  .mega-item:hover .chev,.mega-item:has(:focus-visible) .chev{transform:rotate(180deg)}

  .mega{display:block;position:absolute;left:28px;right:28px;top:100%;color:var(--ink);
    background:var(--white);border-top:2px solid var(--gold);border-radius:0 0 8px 8px;
    box-shadow:0 28px 56px -28px rgba(20,24,33,.45);
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .16s ease .12s,transform .16s ease .12s,visibility 0s linear .28s}
  /* jembatan tak terlihat di separuh bawah pita header (di bawah garis label): mouse yang
     turun miring menuju panel tidak tersangkut label lain. Ikut tersembunyi bersama panel. */
  .mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px}
  /* jeda niat 90ms: mouse yang melintas sekilas di atas item lain tidak membuka panelnya */
  .mega-item:hover .mega,.mega-item:has(:focus-visible) .mega{
    visibility:visible;opacity:1;transform:none;
    transition:opacity .16s ease .09s,transform .16s ease .09s,visibility 0s linear .09s}
  .mega-item:has(:focus-visible) .mega{transition-delay:0s}
}
.mega-in{display:grid;grid-template-columns:260px 1fr;min-height:330px}
header.site .mega-foto{position:relative;display:block;overflow:hidden;border-radius:0 0 0 8px;background:var(--cream)}
.mega-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
header.site .mega-foto:hover img{transform:scale(1.04)}
.mega-foto::after{content:"";position:absolute;inset:auto 0 0;height:55%;
  background:linear-gradient(to top,rgba(25,38,56,.8),rgba(25,38,56,0))}
header.site .mega-foto span{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#F3EEE2}
.mega-body{display:flex;flex-direction:column;padding:26px 30px 20px}
.mega-eyebrow{margin:0 0 12px 14px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
header.site .mega-links a{display:block;padding:12px 14px;border-radius:6px;text-decoration:none;
  transition:background .15s ease}
header.site .mega-links a:hover,header.site .mega-links a:focus-visible{background:var(--cream)}
.mega-links b{display:block;font-size:14.5px;font-weight:700;color:var(--navy);transition:color .15s ease}
header.site .mega-links a:hover b,header.site .mega-links a:focus-visible b{color:var(--gold-deep)}
.mega-links a span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink-45)}
.mega-cta{margin:auto 0 0;padding:16px 14px 0;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-45)}
header.site .mega-cta a{display:inline;padding:0;font-size:12.5px;font-weight:700;color:var(--gold-deep);
  text-decoration:underline;text-underline-offset:3px}
header.site .mega-cta a:hover{color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .mega,.mega-trigger::after,.chev,.mega-foto img{transition:none!important}
  .mega{transform:none!important}
}
.btn{display:inline-block;background:var(--gold);color:var(--navy);text-decoration:none;
  padding:11px 20px;border-radius:4px;font-size:13.5px;font-weight:700;letter-spacing:.03em}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.btn.navy{background:var(--navy);color:#fff}

/* ---------- secondary nav ---------- */
nav.sec{background:var(--navy-800);border-top:1px solid rgba(255,255,255,.08)}
nav.sec .wrapper{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px}
ul.sec-nav{list-style:none;display:flex;gap:24px;margin:0;padding:0;flex-wrap:wrap}
ul.sec-nav a{color:rgba(255,255,255,.72);text-decoration:none;font-size:12.5px;letter-spacing:.04em}
ul.sec-nav a:hover{color:var(--gold)}
.search-form input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:4px;padding:7px 12px;color:#fff;font-size:12.5px;font-family:inherit;min-width:190px}
.search-form input::placeholder{color:rgba(255,255,255,.45)}

/* ---------- hero ---------- */
.sarea{background:var(--navy);color:#fff;position:relative}
.sarea .wrapper{padding-top:64px;padding-bottom:64px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.slidetitle{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  margin:0 0 18px;font-weight:600}
.homequote{font-size:clamp(32px,4.4vw,50px);line-height:1.08;margin:0 0 20px;font-weight:800;
  letter-spacing:-.015em;text-wrap:balance}
.homequote em{font-style:normal;color:var(--gold);display:block}
.subheadline{font-size:16px;font-weight:400;color:rgba(255,255,255,.78);margin:0 0 28px;max-width:52ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- home sections ---------- */
.home-section{padding:72px 0}
.home-section.alt{background:var(--cream)}
.home-section > .wrapper > h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.01em;
  margin:0 0 10px;text-wrap:balance}
.home-section .lead{color:var(--ink-70);max-width:64ch;margin:0 0 34px}
.eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  font-weight:700;margin:0 0 12px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--rule);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.alt .card{background:var(--white)}
.card .body{padding:20px 22px 24px}
.card h3{font-size:17px;margin:0 0 8px;font-weight:700;letter-spacing:-.005em}
.card p{margin:0;color:var(--ink-70);font-size:14px}
.card .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  font-weight:700;margin-bottom:9px}
.card a.more{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--gold-deep);
  text-decoration:none;letter-spacing:.02em}

.linelist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.linelist li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--rule);align-items:start}
.linelist li:last-child{border-bottom:none}
.linelist .n{font-size:13px;font-weight:800;color:var(--gold-deep);letter-spacing:.04em;line-height:26px}
.linelist h3{margin:0 0 5px;font-size:16px;font-weight:700;line-height:26px}
.linelist p{margin:0;color:var(--ink-70);font-size:14px;max-width:62ch}

table.spec{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
table.spec th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);font-weight:700;padding:13px 16px;border-bottom:2px solid var(--gold)}
table.spec td{padding:13px 16px;border-bottom:1px solid var(--rule);color:var(--ink-70)}
table.spec td:first-child{color:var(--ink);font-weight:600}
table.spec tr:last-child td{border-bottom:none}
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:6px}

.quote{background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:22px 24px}
.quote .who{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.quote .av{width:44px;height:44px;border-radius:50%;background:var(--cream);
  border:1px solid var(--gold);flex:0 0 auto}
.quote h4,.quote .nama{display:block;margin:0;font-size:14.5px;font-weight:700}
.quote span{font-size:11.5px;color:var(--ink-45)}
.quote p{margin:0;font-size:13.5px;color:var(--ink-70);font-style:italic;line-height:1.65}

/* ---------- inner page ---------- */
.pagehead{background:var(--cream);border-bottom:1px solid var(--rule);padding:44px 0 40px}
.breadcrumb-page{font-size:12px;color:var(--ink-45);margin:0 0 14px}
.breadcrumb-page a{color:var(--gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1.title{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.015em;margin:0;
  text-wrap:balance;max-width:22ch}
h2.subtitle{font-size:20px;font-weight:700;margin:0 0 14px;letter-spacing:-.005em}
.content{padding:60px 0}
.content .layout{display:grid;grid-template-columns:1fr 320px;gap:52px;align-items:start}
.content p{color:var(--ink-70);max-width:68ch}
.content h2{font-size:26px;font-weight:800;margin:38px 0 12px;letter-spacing:-.01em}
.content h3{font-size:17px;font-weight:700;margin:26px 0 8px}
aside.rail{background:var(--cream);border:1px solid var(--rule);border-radius:6px;padding:24px;
  position:sticky;top:100px}
aside.rail h2,aside.rail h4{margin:0 0 12px;line-height:1.4;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);font-weight:700}
aside.rail ul{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:9px}
aside.rail a{font-size:13.5px;color:var(--ink-70);text-decoration:none}
aside.rail a:hover{color:var(--gold-deep)}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:rgba(255,255,255,.72);padding:56px 0 0;margin-top:0}
footer.site .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:44px}
footer.site h3{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
footer.site nav{display:flex;flex-direction:column;gap:9px}
footer.site a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14px}
footer.site a:hover{color:var(--gold)}
footer.site a.btn,footer.site a.btn:hover{color:var(--navy);font-size:13.5px}
footer.site p{font-size:14px;margin:0 0 8px}
.sched-meeting{background:var(--navy-800);border-radius:6px;padding:26px 28px;margin-bottom:0}
.sched-meeting h3{margin-bottom:8px}
.sched-meeting p{color:rgba(255,255,255,.7);margin-bottom:16px;font-size:14px}
.copy-area{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:12.5px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.5)}
.ph-note{color:var(--gold);font-size:12px}

@media (max-width:900px){
  /* secondary nav jadi strip geser, bukan daftar membungkus */
  nav.sec .wrapper{flex-direction:column;align-items:stretch;gap:0;padding-left:0;padding-right:0}
  ul.sec-nav{flex-wrap:nowrap;overflow-x:auto;gap:22px;padding:13px 28px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  ul.sec-nav::-webkit-scrollbar{display:none}
  ul.sec-nav li{flex:0 0 auto;white-space:nowrap}
  .search-form{display:none}
  .sarea .wrapper{grid-template-columns:1fr;gap:32px}
  .grid3,.grid4{grid-template-columns:1fr 1fr}
  .content .layout{grid-template-columns:1fr}
  aside.rail{position:static}
  header.site nav{display:none}
  footer.site .cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid3,.grid4,.grid2{grid-template-columns:1fr}
  .content{padding:36px 0 48px}
  .content .layout > div > h2:first-child{margin-top:0}
}

/* ================= konfigurator katalog ================= */
.cfg-help{border:1px dashed var(--rule);border-radius:7px;padding:15px 16px;background:var(--cream)}
.cfg-help b{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:5px}
.cfg-help p{margin:0;font-size:11.8px;line-height:1.55;color:var(--ink-70)}
.cfg{display:grid;grid-template-columns:352px 1fr;gap:34px;align-items:start;margin-top:8px}
.cfg-panel{position:sticky;top:100px;display:flex;flex-direction:column;gap:22px}
.cfg-group{border:0;padding:0;margin:0}
.cfg-group[hidden]{display:none}
.cfg-group legend{
  font-family:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-45);font-weight:700;padding:0;margin-bottom:11px;
}
.cfg-group legend .only{color:var(--gold-deep);letter-spacing:.06em;text-transform:none;font-weight:600}
.opt-grid{display:grid;grid-template-columns:1fr;gap:9px}
.opt-grid.two{grid-template-columns:1fr 1fr}
.opt{display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt-b{
  display:block;border:1.5px solid var(--rule);border-radius:7px;
  padding:13px 15px;background:var(--white);transition:border-color .15s,background .15s;
}
.opt-b b{display:block;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.opt-b i{display:block;font-style:normal;font-size:11.8px;color:var(--ink-45);margin-top:3px;line-height:1.45}
.opt:hover .opt-b{border-color:var(--gold)}
.opt input:checked + .opt-b{border-color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
.opt input:checked + .opt-b i,.opt input:checked + .opt-b .kode-tag{color:var(--ink-70)}
.opt input:focus-visible + .opt-b{outline:2px solid var(--navy);outline-offset:2px}
.opt input[type=checkbox] + .opt-b b{padding-left:22px;position:relative}
.opt input[type=checkbox] + .opt-b b::before{
  content:"";position:absolute;left:0;top:1px;width:14px;height:14px;
  border:1.5px solid var(--rule);border-radius:3px;background:var(--white);
}
.opt input[type=checkbox]:checked + .opt-b b::before{
  border-color:var(--gold-deep);background:var(--gold-deep);
}
.opt input[type=checkbox]:checked + .opt-b b::after{
  content:"";position:absolute;left:4.5px;top:4px;width:4px;height:7px;
  border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg);
}

.cfg-out{border:1px solid var(--rule);border-radius:9px;overflow:hidden;background:var(--white)}
.cfg-visual{background:var(--navy);display:flex;align-items:center;justify-content:center;padding:0}
.cfg-visual img{width:100%;height:340px;object-fit:cover;display:block}
.cfg-sheet{padding:26px 28px 30px}
.cfg-head{margin-bottom:20px}
.cfg-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:7px}
.cfg-kode{margin-top:8px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-45)}
.cfg-kode b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.08em;color:var(--gold-deep)}
.bdg.kode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;border-color:var(--gold);color:var(--gold-deep)}
.kode-tag{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.09em;color:var(--ink-45);margin-bottom:3px;
}
.cfg-head h2{font-size:25px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px}
.cfg-head p{margin:0;font-size:13.5px;color:var(--ink-70);max-width:52ch}
.cfg-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bdg{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  padding:5px 9px;border-radius:4px;background:var(--cream);color:var(--ink-70);border:1px solid var(--rule);
}
.bdg.ce{background:var(--gold-soft);color:var(--navy);border-color:var(--gold)}
table.spec tr.sec td{
  background:var(--cream);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep);padding:9px 16px;border-bottom:1px solid var(--rule);
}
table.spec td:first-child{width:44%}
.cfg-note{font-size:11.8px;color:var(--ink-45);margin:14px 0 0;line-height:1.55}

img.framed{width:100%;border:1px solid var(--rule);border-radius:8px;display:block;background:var(--cream)}
img.cimg{width:100%;height:190px;object-fit:cover;display:block;border-bottom:1px solid var(--rule)}

@media (max-width:1040px){
  .cfg{grid-template-columns:1fr;gap:26px}
  .cfg-panel{position:static}
  .opt-grid{grid-template-columns:1fr 1fr}
  
}
@media (max-width:560px){
  .opt-grid,.opt-grid.two{grid-template-columns:1fr}
  .cfg-visual img{height:230px}
  .cfg-sheet{padding:20px 18px 24px}
}

/* slot foto yang sudah terisi - mempertahankan rasio slot aslinya */
img.ph-img{width:100%;display:block;object-fit:cover;border-radius:3px;background:var(--cream)}
img.ph-img.r169{aspect-ratio:16/9}
img.ph-img.r43{aspect-ratio:4/3}
img.ph-img.r11{aspect-ratio:1/1}
img.ph-img.r219{aspect-ratio:21/9}
.card img.ph-img{border-radius:0;border-bottom:1px solid var(--rule)}
/* render beralpha di hero: tampilkan utuh, jangan dipotong */
.sarea img.ph-img{object-fit:contain;background:transparent;aspect-ratio:auto;max-height:420px}
.cfg-visual img[src$=".png"]{object-fit:contain;background:var(--navy);padding:10px}
.card img.cimg[src$=".png"]{background:var(--navy);object-fit:contain;padding:8px}
img.cimg.studio{object-fit:contain;background:#fff;padding:14px 18px}
.komponen-grid img.cimg.studio{height:auto;aspect-ratio:4/3;padding:22px}

/* ---------- perbaikan header di layar sempit ---------- */
@media (max-width:620px){
  .wrapper{padding:0 18px}
  header.site .wrapper{gap:12px;height:64px}
  .logo-area img{height:30px}
  header.site .btn{padding:9px 13px;font-size:11.5px;letter-spacing:.02em;white-space:nowrap}
  ul.sec-nav{padding:12px 18px}
  .pagehead{padding:32px 0 30px}
  h1.title{font-size:clamp(24px,7vw,32px)}
}
/* jaring pengaman: tidak ada elemen boleh melebar melewati layar.
   overflow-x:hidden di html dan body sekaligus menjadikan body wadah gulir sendiri,
   dan itu mematikan position:sticky di header. clip memotong tanpa membuat wadah gulir;
   peramban lama yang belum mengenal clip tetap memakai hidden. */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,table{max-width:100%}

/* ---------- perbaikan overflow: anak grid harus boleh menyusut ----------
   Secara bawaan anak grid memakai min-width:auto sehingga tidak bisa lebih
   sempit dari kontennya. Tabel spesifikasi yang lebar lalu memaksa seluruh
   halaman melebar melewati layar ponsel. */
.cfg, .split, .grid2, .grid3, .grid4, .content .layout{min-width:0}
.cfg > *, .split > *, .grid2 > *, .grid3 > *, .grid4 > *, .content .layout > *{min-width:0}
.cfg-out, .cfg-panel, .cfg-sheet, .tw, .card{min-width:0}
.tw{max-width:100%}

/* ---------- kisi foto .case-more (kontraktor.html, maintenance.html) ----------
   .case, .case-head, .case-facts, .case-hero dibuang 1 Oktober 2026: hanya dipakai
   halaman proyek lama, yang kini dihasilkan bangun-proyek.py dengan kelas pj-. */
.case-more{margin-top:20px}
.case-more img{width:100%;border-radius:8px;display:block;border:1px solid var(--rule);aspect-ratio:4/3;object-fit:cover}
.case-more figure{margin:0}
.case-more figcaption{font-size:12px;color:var(--ink-45);margin-top:8px}

.showreel{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:9px;border:1px solid var(--rule);margin-top:24px;background:var(--navy)}

.proyek-next{
  margin-top:56px;padding:36px 40px;border-radius:10px;background:var(--navy);color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
}
.proyek-next .eyebrow{color:var(--gold);margin:0 0 10px}
.proyek-next h2{color:#fff;margin:0 0 14px;font-size:26px}
.proyek-next p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.7;margin:0 0 10px;max-width:62ch}
.proyek-next p:last-child{margin-bottom:0}
.proyek-next .btn{flex:none;white-space:nowrap}
@media (max-width:760px){
  .proyek-next{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .proyek-next h2{font-size:22px}
}

/* Kartu ikhtisar portofolio */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:34px 30px}

.proj-card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  text-decoration:none;color:inherit;background:#fff;border-radius:12px;
  border:1px solid var(--rule);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,24,33,.04);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.proj-card:hover{transform:translateY(-4px);border-color:rgba(194,168,109,.55);box-shadow:0 18px 38px -18px rgba(20,24,33,.38)}

.proj-shot{position:relative;display:block;overflow:hidden;background:var(--cream)}
.proj-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.proj-card:hover .proj-shot img{transform:scale(1.05)}
.proj-shot::after{
  content:"";position:absolute;inset:auto 0 0;height:58%;
  background:linear-gradient(to top,rgba(25,38,56,.82),rgba(25,38,56,0));
}
.proj-loc{
  position:absolute;left:18px;bottom:15px;z-index:1;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#F3EEE2;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.proj-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.proj-name{
  display:block;font-size:20.5px;line-height:1.32;letter-spacing:-.012em;
  font-weight:700;color:var(--navy);transition:color .25s;
}
.proj-card:hover .proj-name{color:var(--gold-deep)}
.proj-type{display:block;margin-top:9px;margin-bottom:18px;font-size:13.5px;line-height:1.55;color:var(--ink-45)}
.proj-go{
  display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:15px;
  border-top:1px solid var(--rule);
  font-size:12.5px;letter-spacing:.06em;font-weight:700;color:var(--gold-deep);
}
.proj-go svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.proj-card:hover .proj-go svg{transform:translateX(4px)}

.proj-back{margin:36px 0 0;font-size:13.5px}
.proj-back a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-45);text-decoration:none}
.proj-back a:hover{color:var(--gold-deep)}
.proj-back svg{width:15px;height:15px}

@media (max-width:560px){.proj-grid{grid-template-columns:1fr;gap:26px}}
@media (prefers-reduced-motion:reduce){
  .proj-card,.proj-shot img,.proj-go svg{transition:none}
  .proj-card:hover{transform:none}
  .proj-card:hover .proj-shot img{transform:none}
}

/* Kartu proyek yang dokumentasinya belum siap */
.proj-card.soon{
  background:transparent;border:1px dashed rgba(194,168,109,.55);box-shadow:none;cursor:default;
}
.proj-card.soon:hover{transform:none;box-shadow:none;border-color:rgba(194,168,109,.55)}
.proj-soon-shot{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;background:var(--cream);
  border-bottom:1px dashed rgba(194,168,109,.4);
}
.proj-soon-shot svg{width:40px;height:40px;color:rgba(194,168,109,.75)}
.proj-soon-shot .proj-loc{
  position:absolute;left:18px;bottom:15px;color:var(--ink-45);text-shadow:none;
}
.proj-card.soon .proj-name{color:var(--ink-70)}
.proj-card.soon:has(.proj-shot) .proj-name{color:var(--navy)}
.proj-tanda{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--navy);background:rgba(245,242,234,.92);
  padding:5px 9px;border-radius:4px;
}
.proj-badge{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:15px;
  border-top:1px dashed rgba(194,168,109,.4);
  font-size:12.5px;letter-spacing:.06em;font-weight:700;color:var(--ink-45);
}
.proj-badge i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}

/* ---- daftar artikel ---- */
.art-meta{
  margin:16px 0 22px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--gold-deep);
}
.pager{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); font-size:13.5px; font-weight:700;
}
.pager a{color:var(--gold-deep); text-decoration:none}
.pager a:hover{text-decoration:underline}
.pager .mati{color:var(--ink-45)}
.rail a[aria-current="page"]{color:var(--gold-deep); font-weight:700}
/* tabel di naskah artikel (bangun-artikel.py): bergeser di dalam bingkai di HP, halaman tidak */
.art-tabel{margin:20px 0 24px}
.art-tabel table.spec{min-width:560px}
.art-tabel table.spec td{vertical-align:top;line-height:1.5}
.art-tabel table.spec td:first-child{width:auto}

/* ===================== Halaman proyek (bangun-proyek.py) =====================
   Seluruh kelas berawalan pj-. Dihasilkan dari konten/proyek/<slug>.py,
   jangan menyunting halaman proyek secara langsung. */
.pj-kepala{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:44px;align-items:center}
.pj-kepala .lead{margin:12px 0 0;color:var(--ink-70);font-size:16px}
.pj-stat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.pj-stat > div{display:flex;flex-direction:column;grid-column:span 2;padding:16px 16px 15px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-width:0}
/* lebar dan tepi dihitung bangun-proyek.py supaya setiap baris penuh, tanpa sel kosong */
@media (min-width:621px){.pj-stat > .s3{grid-column:span 3}.pj-stat > .kanan{border-right:0}.pj-stat > .bawah{border-bottom:0}}
.pj-stat svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:10px;order:1}
.pj-stat dd{order:2;margin:0;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.pj-stat dt{order:3;margin:3px 0 0;font-size:11.5px;color:var(--ink-45)}
/* Penuh selebar layar seperti pita header di atasnya. Tingginya mengikuti
   lebar (21:9) tapi dibatasi, supaya di layar lebar foto tidak membengkak.
   Sampai 1 Oktober 2026 lebarnya dibatasi 1440 px, sehingga di layar lebih
   lebar foto jadi kotak di tengah dengan sisi kosong. */
.pj-hero{background:var(--cream)}
.pj-hero img{display:block;width:100%;height:clamp(260px,42.86vw,680px);object-fit:cover;object-position:50% 40%}
.pj-bagian{margin-top:64px}
.pj-bagian:first-child{margin-top:0}
.pj-bagian > h2{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.pj-bagian > .pj-sub{margin:0 0 26px;color:var(--ink-45);font-size:14px}
.pj-tentang{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
.pj-tentang h2{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.pj-tentang p{color:var(--ink-70);margin:0 0 14px;max-width:62ch}
.pj-detail{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff}
.pj-detail h3{margin:0;padding:15px 18px;font-size:15px;font-weight:700;border-bottom:1px solid var(--rule);background:var(--cream)}
.pj-detail table.spec td{padding:11px 18px;font-size:13.5px}
.pj-lingkup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.pj-lingkup > div{padding:4px 22px 4px 0;margin-right:22px;border-right:1px solid var(--rule)}
.pj-lingkup > div:last-child{border-right:0;margin-right:0}
.pj-lingkup svg{width:32px;height:32px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:14px}
.pj-lingkup .n{font-size:11px;font-weight:800;color:var(--gold-deep);letter-spacing:.06em}
.pj-lingkup h3{margin:3px 0 6px;font-size:15px;font-weight:700}
.pj-lingkup p{margin:0;font-size:13px;color:var(--ink-45);line-height:1.55}
.pj-galeri-kepala{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.pj-galeri-kepala h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.pj-tab{display:flex;gap:8px;flex-wrap:wrap}
.pj-tab[hidden]{display:none}  /* display:flex di atas mengalahkan atribut hidden */
.pj-tab button{font:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:6px;border:1px solid var(--rule);background:#fff;color:var(--ink-70);cursor:pointer}
.pj-tab button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.pj-tab button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pj-galeri{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.pj-galeri figure{margin:0;position:relative;border-radius:8px;overflow:hidden;background:var(--cream)}
.pj-galeri img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.pj-galeri .b6 img{aspect-ratio:16/10}
.pj-galeri .b12 img{aspect-ratio:21/9}
.pj-galeri .b12{grid-column:span 12}.pj-galeri .b6{grid-column:span 6}
.pj-galeri .b4{grid-column:span 4}.pj-galeri .b3{grid-column:span 3}
.pj-galeri figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(20,24,33,.78),rgba(20,24,33,0))}
.pj-galeri.saring figure{grid-column:span 4}
.pj-galeri.saring img{aspect-ratio:4/3}
.pj-galeri figure[hidden]{display:none}
/* foto galeri bisa diklik, membuka lightbox */
.pj-buka{display:block;height:100%;cursor:zoom-in}
.pj-buka img{transition:transform .35s ease}
.pj-buka:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.pj-galeri figcaption{pointer-events:none}
@media (hover:hover){.pj-galeri figure:hover .pj-buka img{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.pj-buka img{transition:none}}

/* video proyek, diputar tanpa suara saat terlihat */
.pj-video{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pj-video figure{margin:0}
.pj-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--navy)}
.pj-video figcaption{margin-top:10px;font-size:13px;font-weight:600;color:var(--ink-70)}

/* lightbox galeri, <dialog> layar penuh */
html.pj-kunci{overflow:hidden}
.pj-lightbox{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#0C111A;color:#fff}
.pj-lightbox::backdrop{background:rgba(12,17,26,.6)}
.pj-lightbox[open]{display:grid;grid-template-columns:88px minmax(0,1fr) 88px;grid-template-rows:68px minmax(0,1fr);align-items:center}
.pj-lb-atas{grid-column:1 / -1;grid-row:1;display:flex;justify-content:space-between;align-items:center;padding:0 22px;
  font-size:13px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.pj-lb-foto{grid-column:2;grid-row:2;margin:0;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 26px}
.pj-lb-foto img{display:block;max-width:100%;max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);object-fit:contain;border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.pj-lb-foto figcaption{margin-top:14px;font-size:14px;color:rgba(255,255,255,.88);text-align:center;max-width:70ch}
.pj-lightbox button{width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.pj-lightbox button:hover{background:rgba(194,168,109,.22);border-color:var(--gold)}
.pj-lightbox button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pj-lightbox button svg{width:20px;height:20px}
.pj-lb-prev{grid-column:1;grid-row:2;justify-self:center}
.pj-lb-next{grid-column:3;grid-row:2;justify-self:center}
.pj-lightbox.tunggal .pj-lb-prev,.pj-lightbox.tunggal .pj-lb-next{visibility:hidden}
@media (max-width:620px){
  .pj-lightbox[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:60px minmax(0,1fr) 76px}
  .pj-lb-atas{padding:0 14px}
  .pj-lb-foto{grid-column:1;padding:0 8px}
  .pj-lb-foto img{max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px)}
  .pj-lb-prev{grid-column:1;grid-row:3;justify-self:start;margin-left:22px}
  .pj-lb-next{grid-column:1;grid-row:3;justify-self:end;margin-right:22px}
}
.pj-proses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0;counter-reset:none}
.pj-proses li{position:relative;padding-right:14px}
.pj-proses li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:20px;width:14px;height:1px;background:var(--gold)}
.pj-proses .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);
  color:var(--gold-deep);font-weight:800;font-size:13px;margin-bottom:12px}
.pj-proses h3{margin:0 0 5px;font-size:14.5px;font-weight:700}
.pj-proses p{margin:0;font-size:13px;color:var(--ink-45);line-height:1.55}
.pj-ajakan{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);background:var(--navy);border-radius:12px;overflow:hidden;margin-top:72px}
.pj-ajakan > div{padding:40px 44px}
.pj-ajakan h2{color:#fff;margin:0 0 10px;font-size:26px;font-weight:800;letter-spacing:-.01em}
.pj-ajakan p{color:rgba(255,255,255,.74);margin:0 0 22px;max-width:52ch;font-size:15px}
.pj-ajakan .btn{display:inline-flex;align-items:center;gap:8px}
.pj-ajakan .btn svg{width:16px;height:16px;flex:none}
.pj-ajakan figure{margin:0;position:relative;min-height:220px}
.pj-ajakan figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-ajakan figure::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,var(--navy) 0%,rgba(25,38,56,0) 55%)}
.pj-lain-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pj-lain-kepala h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.pj-lain-kepala a{font-size:13.5px;font-weight:700;color:var(--gold-deep);text-decoration:none}
@media (max-width:900px){
  .pj-kepala{grid-template-columns:1fr;gap:26px}
  .pj-tentang{grid-template-columns:1fr;gap:28px}
  .pj-lingkup{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .pj-lingkup > div{border-right:0;margin-right:0;padding-right:16px}
  .pj-proses{grid-template-columns:1fr;gap:20px}
  .pj-proses li{display:grid;grid-template-columns:40px 1fr;column-gap:16px;padding-right:0}
  .pj-proses li .n{grid-row:span 2;margin:0}
  .pj-proses li:not(:last-child)::after{display:none}
  .pj-ajakan{grid-template-columns:1fr}
  .pj-ajakan figure{min-height:180px;order:-1}
  .pj-ajakan figure::before{background:linear-gradient(to top,var(--navy) 0%,rgba(25,38,56,0) 60%)}
  .pj-galeri .b3,.pj-galeri .b4{grid-column:span 6}
  .pj-galeri.saring figure{grid-column:span 6}
  .pj-video{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pj-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-stat > div{grid-column:auto}
  .pj-stat > div:nth-child(2n){border-right:0}
  .pj-stat > div:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
  .pj-stat > div:last-child,.pj-stat > div:nth-last-child(2):nth-child(odd){border-bottom:0}
  .pj-hero img{height:75vw}
  .pj-ajakan > div{padding:28px 24px}
  .pj-galeri .b3,.pj-galeri .b4,.pj-galeri .b6,.pj-galeri .b12{grid-column:span 12}
  .pj-galeri.saring figure{grid-column:span 12}
}

/* ===================== HP: kerangka bersama =====================
   Audit 1 Oktober 2026 pada 360 dan 390 px. Seluruh aturan di bawah berada
   di dalam media query layar sempit, sehingga tampilan desktop tidak berubah.
   Target: setiap target sentuh minimal 44 px, huruf minimal 12 px. */
a,button{-webkit-tap-highlight-color:rgba(194,168,109,.22)}
.menu-buka{display:none}
@media (max-width:900px){
  a,button{touch-action:manipulation}

  /* tombol menu: tiga garis yang berubah menjadi silang */
  header.site .btn{margin-left:auto;display:inline-flex;align-items:center;min-height:44px}
  .menu-buka:not([hidden]){display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:6px;background:transparent;color:#fff;cursor:pointer}
  .menu-buka:focus-visible{outline:2px solid var(--gold);outline-offset:0}
  .menu-buka span,.menu-buka span::before,.menu-buka span::after{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;
    transition:transform .2s ease,background-color .2s ease}
  .menu-buka span{position:relative}
  .menu-buka span::before,.menu-buka span::after{content:"";position:absolute;left:0}
  .menu-buka span::before{top:-7px}
  .menu-buka span::after{top:7px}
  html.menu-terbuka .menu-buka span{background:transparent}
  html.menu-terbuka .menu-buka span::before{transform:translateY(7px) rotate(45deg)}
  html.menu-terbuka .menu-buka span::after{transform:translateY(-7px) rotate(-45deg)}

  /* laci menu: nav utama yang sama, tampil sebagai panel layar penuh */
  html.menu-terbuka header.site nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;left:0;right:0;top:76px;bottom:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;
    background:var(--white);border-top:1px solid rgba(255,255,255,.08);
    padding:6px 0 calc(28px + env(safe-area-inset-bottom))}
  html.menu-terbuka header.site nav > a,html.menu-terbuka .mega-trigger{display:flex;align-items:center;justify-content:space-between;
    min-height:56px;padding:0 24px;border-bottom:1px solid var(--rule);
    font-size:16.5px;font-weight:700;color:var(--navy)}
  /* :hover menempel setelah diketuk di layar sentuh; warna emas hanya untuk halaman aktif dan grup yang terbuka */
  html.menu-terbuka header.site nav > a:hover,html.menu-terbuka header.site .mega-trigger:hover{color:var(--navy)}
  html.menu-terbuka header.site nav > a[aria-current],html.menu-terbuka header.site .mega-trigger[aria-current],
  html.menu-terbuka header.site .mega-item.buka .mega-trigger{color:var(--gold-deep)}
  html.menu-terbuka .mega-item{display:block}
  html.menu-terbuka .chev{display:block;width:14px;height:14px;flex:none;color:var(--gold-deep);transition:transform .2s ease}
  html.menu-terbuka .mega-item.buka .chev{transform:rotate(180deg)}
  html.menu-terbuka .mega-item.buka .mega{display:block;position:static;background:var(--cream);border-bottom:1px solid var(--rule)}
  html.menu-terbuka .mega-in{display:block;min-height:0}
  html.menu-terbuka header.site .mega-foto,html.menu-terbuka .mega-eyebrow,html.menu-terbuka .mega-cta{display:none}
  html.menu-terbuka .mega-body{display:block;padding:6px 0}
  html.menu-terbuka .mega-links{display:block}
  html.menu-terbuka header.site .mega-links a{display:flex;align-items:center;min-height:48px;padding:0 24px 0 38px;border-radius:0}
  html.menu-terbuka .mega-links b{font-size:15px;font-weight:600}
  html.menu-terbuka .mega-links a span{display:none}
  html.menu-terbuka header.site .mega-links a.menu-semua b{color:var(--gold-deep)}

  /* strip navigasi kedua: target sentuh 44 px, tepi kanan memudar sebagai tanda bisa digeser */
  ul.sec-nav{gap:0;padding:2px 18px;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  ul.sec-nav.ujung{-webkit-mask-image:none;mask-image:none}
  ul.sec-nav a{display:flex;align-items:center;min-height:44px;padding:0 10px;font-size:13px}

  .logo-area a{display:flex;align-items:center;min-height:44px}
  /* remah: area sentuh 44 px tanpa mengubah tampilannya */
  .breadcrumb-page a{display:inline-block;padding:14px 0;margin:-14px 0}

  /* footer: tautan 44 px, daftar dua kolom supaya tidak memanjang */
  footer.site nav{gap:0}
  footer.site nav a{display:flex;align-items:center;min-height:44px}
  footer.site .c2 nav,footer.site .c3 nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  footer.site .btn{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:620px){
  header.site .wrapper{gap:8px}
  header.site .btn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:13px}
  html.menu-terbuka header.site nav{top:64px}
  ul.sec-nav{padding:2px 8px}
}
@media (max-width:360px){
  .logo-area img{height:26px}
  header.site .btn{padding:0 11px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .menu-buka span,.menu-buka span::before,.menu-buka span::after,html.menu-terbuka .chev{transition:none}
}

/* ===================== HP: halaman proyek ===================== */
@media (max-width:900px){
  .pj-lain-kepala a,.proj-back a{display:inline-flex;align-items:center;min-height:44px}
  .proj-back{margin-top:20px}
}
@media (max-width:620px){
  /* kepala ringkas: hero sudah terlihat di layar pertama */
  .pj-kepala{gap:18px}
  .pj-kepala .lead{margin-top:8px;font-size:15px}
  .breadcrumb-page{margin-bottom:10px}
  /* statistik: garis kisi dari celah 1 px, sehingga tidak perlu menghitung tepi per sel */
  .pj-stat{gap:1px;background:var(--rule);grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-stat.n3,.pj-stat.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pj-stat.n5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pj-stat.n5 > div{grid-column:span 2}
  .pj-stat.n5 > div:nth-child(n+4){grid-column:span 3}
  .pj-stat > div,.pj-stat > div:last-child:nth-child(odd){grid-column:auto;border:0;background:#fff;padding:12px 12px 11px}
  .pj-stat.n5 > div:last-child:nth-child(odd){grid-column:span 3}
  .pj-stat svg{width:18px;height:18px;margin-bottom:6px}
  .pj-stat dd{font-size:13.5px}
  .pj-stat dt{font-size:12px}
  .quote span{font-size:12.5px}

  .pj-bagian{margin-top:48px}
  .pj-bagian > h2,.pj-tentang h2,.pj-galeri-kepala h2,.pj-lain-kepala h2{font-size:23px}

  /* lingkup: daftar satu kolom, ikon di kiri */
  .pj-lingkup{grid-template-columns:1fr;gap:0}
  .pj-lingkup > div{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
  .pj-lingkup > div:last-child{border-bottom:0}
  .pj-lingkup svg{grid-row:span 3;width:28px;height:28px;margin:2px 0 0}
  .pj-lingkup .n{font-size:12px}
  .pj-lingkup h3{margin:0 0 3px}

  /* tab galeri: satu baris yang bisa digeser */
  .pj-galeri-kepala{display:block;margin-bottom:16px}
  .pj-tab{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:14px -18px 0;padding:0 18px;gap:8px;
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
  .pj-tab::-webkit-scrollbar{display:none}
  .pj-tab button{flex:none;min-height:44px;padding:0 16px;font-size:13.5px;white-space:nowrap}

  /* galeri: dua kolom persegi, foto pertama lebar penuh. Keterangan tetap ada di lightbox */
  .pj-galeri{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pj-galeri .b3,.pj-galeri .b4,.pj-galeri .b6,.pj-galeri .b12,.pj-galeri.saring figure{grid-column:auto}
  .pj-galeri img,.pj-galeri .b6 img,.pj-galeri .b12 img,.pj-galeri.saring img{aspect-ratio:1/1}
  .pj-galeri figcaption{display:none}
  .pj-galeri:not(.saring) figure:first-child{grid-column:1 / -1}
  .pj-galeri:not(.saring) figure:first-child img{aspect-ratio:4/3}
  .pj-galeri:not(.saring) figure:first-child figcaption{display:block}
  /* foto terakhir yang tersisa sendirian dibuat lebar penuh, bukan petak menggantung */
  .pj-galeri:not(.saring) figure:last-child:nth-child(even),.pj-galeri.saring figure.lebar{grid-column:1 / -1}
  .pj-galeri:not(.saring) figure:last-child:nth-child(even) img,.pj-galeri.saring figure.lebar img{aspect-ratio:16/10}

  /* karusel geser: video, ulasan, dan proyek lainnya. Kartu berikutnya mengintip */
  .pj-geser{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 -18px;padding:0 18px 4px;scroll-padding:0 18px}
  .pj-geser::-webkit-scrollbar{display:none}
  .pj-geser > *{scroll-snap-align:start;min-width:0}
  .proj-grid.pj-geser{gap:14px}
  .proj-grid.pj-geser .proj-name{font-size:18px}

  .pj-ajakan{margin-top:56px}
  .pj-ajakan h2{font-size:24px;line-height:1.2}
  .pj-ajakan figure{min-height:150px}

  /* proyek.html: kartu yang masih dikerjakan menjadi baris ringkas, tanpa bidang foto kosong */
  .proj-card.soon{flex-direction:row;align-items:stretch}
  .proj-soon-shot{flex:none;width:76px;aspect-ratio:auto;border-bottom:0;border-right:1px dashed rgba(194,168,109,.4)}
  .proj-soon-shot svg{width:26px;height:26px}
  .proj-soon-shot .proj-loc{display:none}
  .proj-card.soon .proj-body{padding:14px 16px}
  .proj-card.soon .proj-name{font-size:16.5px}
  .proj-card.soon .proj-type{margin:4px 0 10px}
  .proj-card.soon .proj-badge{padding-top:10px}
  .proj-grid{gap:18px}
  .proj-loc{font-size:12px}
}

/* ============ HP: bagian atas halaman proyek, mengikuti mockup Michael 1 Oktober 2026 ============
   Tautan kembali, statistik sebagai chip, bilah tab bagian yang menempel, tombol ke galeri,
   dan kartu Lokasi. Semua elemen baru tersembunyi di atas 620 px, desktop tidak berubah. */
.pj-kembali,.pj-loncat,.pj-ke-galeri,.pj-lokasi{display:none}
@media (max-width:620px){
  /* navigasi tersedia lewat menu; strip kedua dilepas supaya kepala halaman ringkas */
  body:has(.pj-kepala) nav.sec{display:none}
  .pj-kepala .breadcrumb-page{display:none}
  .pj-kembali{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:-8px 0 4px;
    color:var(--gold-deep);text-decoration:none;font-size:15px;font-weight:600}
  .pj-kembali svg{width:20px;height:20px}
  .pj-kepala h1.title{font-size:clamp(28px,8.2vw,34px)}

  /* statistik sebagai chip berbingkai, ikon di kiri. Dua kolom rata: tiga chip per baris
     seperti mockup hanya muat dengan label di bawah 12 px. Nilai panjang membungkus di dalam chip */
  .pj-stat,.pj-stat.n3,.pj-stat.n5,.pj-stat.n6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
    background:none;border:0;border-radius:0;overflow:visible}
  /* :nth-child(n) ganda menaikkan spesifisitas di atas aturan kisi n5 lama (span 3 pada sel terakhir) */
  .pj-kepala .pj-stat > div:nth-child(n):nth-child(n){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i v" "i l";
    column-gap:12px;align-items:center;align-content:center;grid-column:auto;min-width:0;
    padding:11px 16px 11px 14px;background:#fff;border:1px solid var(--rule);border-radius:10px}
  .pj-kepala .pj-stat svg{grid-area:i;width:26px;height:26px;margin:0}
  .pj-kepala .pj-stat dd{grid-area:v;font-size:15px}
  .pj-kepala .pj-stat dt{grid-area:l;margin:1px 0 0;font-size:13px}

  /* bilah tab bagian: menempel tepat di bawah header 64 px */
  .pj-loncat{display:flex;justify-content:space-between;position:sticky;top:64px;z-index:30;padding:0 9px;
    background:var(--cream);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
  .pj-loncat::-webkit-scrollbar{display:none}
  .pj-loncat a{flex:none;display:flex;align-items:center;min-height:50px;padding:0 9px;margin-bottom:-1px;
    border-bottom:2px solid transparent;color:var(--ink-70);text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
  .pj-loncat a[aria-current]{color:var(--gold-deep);border-bottom-color:var(--gold);font-weight:600}
  .pj-loncat a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
  /* scroll-padding 96 px bawaan html ikut dijumlahkan dengan scroll-margin; di sini diganti
     margin per bagian: header 64 px, bilah tab 51 px, jarak 12 px */
  html:has(.pj-loncat){scroll-padding-top:0}
  #tentang,#detail,#galeri,#proses,#lokasi{scroll-margin-top:127px}

  /* Tentang menyambung pita cream dari kepala dan bilah tab */
  body:has(.pj-kepala) .content{padding-top:0}
  .pj-tentang{margin:0 -18px;padding:26px 18px 32px;background:var(--cream)}
  .pj-ke-galeri{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;
    margin-top:22px;border-radius:8px;font-size:16px}
  .pj-ke-galeri svg{width:18px;height:18px}

  /* kartu Lokasi: kota dan pencarian Google Maps, tanpa alamat yang belum terkonfirmasi */
  .pj-lokasi{display:block}
  .pj-lokasi-kartu{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid var(--rule);border-radius:10px}
  .pj-lokasi-kartu svg{flex:none;width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .pj-lokasi-kartu b{display:block;font-size:15.5px;color:var(--navy);line-height:1.35}
  .pj-lokasi-kartu span{display:block;font-size:13.5px;color:var(--ink-45)}
  .pj-peta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:12px;
    background:transparent;border:1.5px solid var(--gold);color:var(--gold-deep)}
  .pj-peta svg{width:16px;height:16px}
}

/* ===================== Beranda (index.html), mockup Michael 1 Oktober 2026 =====================
   Seluruh kelas berawalan br-, hanya dipakai index.html. Huruf minimal 12 px, target sentuh 44 px. */
.br-eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.br-cta{display:flex;flex-wrap:wrap;gap:12px}
.br-cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font-size:14.5px;border-radius:6px}
.br-cta .btn svg{width:17px;height:17px;flex:none}
.br-bagian{padding:80px 0}
.br-bagian h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:0 0 12px;text-wrap:balance;max-width:24ch}
.br-lead{color:var(--ink-70);max-width:60ch;margin:0 0 36px;font-size:16px}
.br-n{font-size:22px;font-weight:800;color:var(--gold);line-height:1.2;letter-spacing:.02em}
.br-kepala{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.br-kepala .br-eyebrow{margin:0}
.br-bagian .br-kepala h2.br-eyebrow{margin:0;max-width:none;font-size:12px;line-height:1.65;letter-spacing:.2em;font-weight:700;text-wrap:wrap}
.br-kepala > a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--gold-deep);text-decoration:none}
.br-kepala > a svg{width:15px;height:15px}

/* hero */
.br-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 85% 40%,#24385A 0%,var(--navy) 55%,#111B29 100%)}
.br-hero .wrapper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding-top:76px;padding-bottom:76px}
.br-hero-teks{position:relative;z-index:2}
.br-hero .br-eyebrow{color:var(--gold)}
.br-hero h1{margin:0 0 20px;font-size:clamp(34px,4.4vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.02em}
.br-hero h1 em{display:block;font-style:normal;color:var(--gold)}
.br-hero-lead{margin:0 0 30px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.8);max-width:46ch}
.br-hero-gambar{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}

/* strip angka */
.br-angka{background:var(--cream);border-bottom:1px solid var(--rule)}
.br-angka dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:28px 0}
.br-angka dl > div{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i v" "i l";column-gap:14px;align-items:center;align-content:center}
.br-angka svg{grid-area:i;width:36px;height:36px;color:var(--gold-deep)}
.br-angka dd{grid-area:v;margin:0;font-size:26px;font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.01em}
.br-angka dt{grid-area:l;font-size:13px;color:var(--ink-45)}

/* layanan */
.br-layanan{background:#FBF9F4}
.br-layanan-daftar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.br-layanan-kartu{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  color:inherit;text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s}
.br-layanan-kartu img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.br-layanan-isi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n t a" "n d a";column-gap:14px;align-items:start;padding:20px 20px 22px;flex:1}
.br-layanan-isi .br-n{grid-area:n;color:var(--gold-deep)}
.br-layanan-isi h3{grid-area:t;margin:2px 0 6px;font-size:17px;font-weight:700;color:var(--navy);line-height:1.3}
.br-layanan-isi p{grid-area:d;margin:0;font-size:14px;line-height:1.55;color:var(--ink-45)}
.br-panah{grid-area:a;align-self:center;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--gold);color:var(--gold-deep);transition:background .25s,color .25s}
.br-panah svg{width:16px;height:16px}
.br-layanan-kartu:hover{border-color:var(--gold-soft);box-shadow:0 18px 38px -20px rgba(20,24,33,.35);transform:translateY(-3px)}
.br-layanan-kartu:hover .br-panah{background:var(--gold);color:var(--navy)}
.br-layanan-kartu:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* prinsip */
.br-prinsip{background:var(--cream)}
.br-prinsip .wrapper{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.br-prinsip-daftar{list-style:none;margin:0;padding:0}
.br-prinsip-daftar li{display:grid;grid-template-columns:36px 40px minmax(0,1fr);column-gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.br-prinsip-daftar li:first-child{padding-top:0}
.br-prinsip-daftar li:last-child{border-bottom:0;padding-bottom:0}
.br-prinsip-daftar .br-n{font-size:14px;color:var(--gold-deep)}
.br-prinsip-daftar svg{width:32px;height:32px;color:var(--gold-deep)}
.br-prinsip-daftar h3{margin:0 0 3px;font-size:16px;font-weight:700;color:var(--navy)}
.br-prinsip-daftar p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-45)}

/* proyek unggulan */
.br-proyek-isi{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:center}
.br-proyek-foto{display:block;border-radius:12px;overflow:hidden}
.br-proyek-foto img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.br-proyek-foto:hover img{transform:scale(1.03)}
.br-proyek h2{font-size:clamp(24px,2.4vw,30px)}
.br-proyek-isi p{margin:0;color:var(--ink-70);font-size:15.5px}
.br-chip{list-style:none;display:flex;flex-wrap:wrap;gap:12px 22px;margin:20px 0 26px;padding:0}
.br-chip li{display:flex;align-items:center;gap:9px}
.br-chip svg{width:24px;height:24px;stroke:var(--gold-deep);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.br-chip span{display:flex;flex-direction:column;font-size:13px;line-height:1.3;color:var(--ink-45)}
.br-chip b{font-size:14.5px;color:var(--navy)}
.br-proyek .btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;font-size:14.5px;border-radius:6px}
.br-proyek .btn svg{width:17px;height:17px}
.br-bukti{margin:30px 0 0;font-size:14px;line-height:1.65;color:var(--ink-45);max-width:none}
/* ikon dari bersama/ikon.py tidak membawa atribut garis; disamakan di sini */
.br-angka svg,.br-chip svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* testimoni */
.br-testi{background:#FBF9F4}
.br-testi .br-kepala{align-items:flex-end;margin-bottom:24px}
.br-testi h2{margin:0}
.br-testi-geser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.br-testi-kartu{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
  padding:26px 28px;background:#fff;border:1px solid var(--rule);border-radius:12px}
.br-av{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--navy);color:var(--gold);font-weight:800;font-size:16px;letter-spacing:.04em}
.br-testi-kartu blockquote{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--ink)}
.br-testi-kartu figcaption b{display:block;font-size:14.5px;color:var(--navy)}
.br-testi-kartu figcaption span{font-size:13px;color:var(--ink-45)}
.br-testi-nav,.br-testi-nav[hidden]{display:none}

/* ajakan */
.br-ajakan{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.br-ajakan-foto{position:absolute;top:0;right:0;width:52%;height:100%;object-fit:cover}
.br-ajakan::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 46%,rgba(25,38,56,.55) 70%,rgba(25,38,56,.1) 100%)}
.br-ajakan .wrapper{position:relative;z-index:1;padding-top:76px;padding-bottom:76px}
.br-ajakan-isi{max-width:560px}
.br-ajakan .br-eyebrow{color:var(--gold)}
.br-ajakan h2{margin:0 0 12px;font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.015em;line-height:1.15;color:#fff}
.br-ajakan p{margin:0 0 28px;color:rgba(255,255,255,.78);max-width:52ch}

@media (max-width:900px){
  .br-hero .wrapper{grid-template-columns:1fr}
  .br-layanan-daftar{grid-template-columns:1fr}
  .br-layanan-kartu{flex-direction:row}
  .br-layanan-kartu img{width:38%;flex:none;aspect-ratio:auto;height:auto;align-self:stretch}
  .br-layanan-isi{min-width:0}
  .br-prinsip .wrapper{grid-template-columns:1fr;gap:26px}
  .br-proyek-isi{grid-template-columns:1fr;gap:22px}
  .br-testi-geser{grid-template-columns:1fr}
}
@media (max-width:620px){
  body:has(.br-hero) nav.sec{display:none}
  /* footer: kotak ajakan disembunyikan di Beranda, karena bidang ajakan tepat di atasnya */
  body:has(.br-hero) footer.site .cols > div:has(> .sched-meeting){display:none}

  .br-hero .wrapper{display:block;position:relative;padding-top:38px;padding-bottom:40px}
  .br-hero h1{max-width:76%;font-size:clamp(26px,7.2vw,31px);margin-bottom:16px;text-wrap:balance}
  .br-hero-lead,.br-hero .br-cta{max-width:64%}
  .br-hero-lead{font-size:14px;line-height:1.6;margin-bottom:22px}
  .br-hero .br-cta{flex-direction:column;align-items:stretch;gap:10px}
  .br-hero .br-cta .btn{padding:0 14px;font-size:14px}
  .br-hero-gambar{position:absolute;z-index:1;right:-34%;top:110px;width:96%;max-width:none;opacity:.95}
  .br-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(17,27,41,.9) 0%,rgba(17,27,41,.6) 46%,rgba(17,27,41,0) 72%)}

  .br-angka dl{gap:6px;padding:18px 0}
  .br-angka dl > div{grid-template-columns:1fr;grid-template-areas:"i" "v" "l";justify-items:center;text-align:center;row-gap:2px}
  .br-angka svg{width:26px;height:26px;margin-bottom:4px}
  .br-angka dd{font-size:18px}
  .br-angka dt{font-size:12px;line-height:1.3}

  .br-bagian{padding:48px 0}
  .br-bagian h2,.br-ajakan h2{font-size:25px}
  .br-lead{font-size:15px;margin-bottom:24px}

  .br-layanan-daftar{gap:12px}
  .br-layanan-kartu img{width:36%}
  .br-layanan-isi{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n t a" "d d a";column-gap:10px;padding:14px 12px 14px 14px}
  .br-layanan-isi .br-n{font-size:18px}
  .br-layanan-isi h3{font-size:15px;margin:1px 0 4px}
  .br-layanan-isi p{font-size:13px;line-height:1.45}
  .br-panah{width:36px;height:36px}

  .br-prinsip-daftar li{grid-template-columns:26px 32px minmax(0,1fr);column-gap:12px;padding:14px 0}
  .br-prinsip-daftar svg{width:28px;height:28px}
  .br-prinsip-daftar h3{font-size:15px}
  .br-prinsip-daftar p{font-size:13px}

  .br-proyek .br-kepala{margin-bottom:12px}
  .br-proyek h2{font-size:23px}
  .br-proyek-isi p{font-size:15px}
  .br-chip{gap:10px 18px;margin:16px 0 20px}
  .br-proyek .btn{width:100%;justify-content:center}
  .br-bukti{font-size:13.5px;margin-top:22px}

  /* testimoni: karusel geser satu kartu, tombol 44 px */
  .br-testi .br-kepala{align-items:flex-end}
  .br-testi-geser{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .br-testi-geser::-webkit-scrollbar{display:none}
  .br-testi-kartu{scroll-snap-align:start;padding:20px;gap:14px}
  .br-av{width:46px;height:46px;font-size:15px}
  .br-testi-kartu blockquote{font-size:15px}
  .br-testi-nav:not([hidden]){display:flex;align-items:center;gap:4px;flex:none}
  .br-testi-nav span{min-width:40px;text-align:center;font-size:13px;font-weight:600;color:var(--ink-70)}
  .br-testi-nav button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;
    border:1.5px solid var(--gold);background:#fff;color:var(--gold-deep);cursor:pointer}
  .br-testi-nav button svg{width:18px;height:18px}
  .br-testi-nav button:disabled{border-color:var(--rule);color:var(--ink-45);cursor:default}

  .br-ajakan-foto{width:78%}
  .br-ajakan::after{background:linear-gradient(90deg,var(--navy) 30%,rgba(25,38,56,.7) 62%,rgba(25,38,56,.25) 100%)}
  .br-ajakan .wrapper{padding-top:44px;padding-bottom:44px}
  .br-ajakan p{font-size:15px;margin-bottom:22px}
  .br-ajakan .br-cta .btn{padding:0 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .br-layanan-kartu,.br-panah,.br-proyek-foto img{transition:none}
  .br-layanan-kartu:hover{transform:none}
}

/* ===================== Kontraktor (kontraktor.html), mockup UI consultant 2 Oktober 2026 =====================
   Memakai ulang pola br- dari Beranda; semua aturan di sini dibatasi .kt atau kelas kt-,
   sehingga Beranda tidak berubah. Prioritas HP: kartu bisa diketuk utuh, target sentuh 44 px. */
.kt-hero{color:#fff;background:radial-gradient(120% 90% at 85% 40%,#24385A 0%,var(--navy) 55%,#111B29 100%)}
.kt-hero .wrapper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:40px;padding-bottom:72px}
.kt-remah{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0 0 18px;font-size:13px;color:rgba(255,255,255,.62)}
.kt-remah a{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.82);text-decoration:none}
.kt-remah a:hover{color:var(--gold)}
.kt-remah [aria-current]{color:rgba(255,255,255,.62)}
.kt-hero .br-eyebrow{color:var(--gold)}
.kt-hero h1{margin:0 0 20px;font-size:clamp(32px,3.9vw,50px);line-height:1.1;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.kt-hero h1 em{font-style:normal;color:var(--gold)}
.kt-hero-lead{margin:0 0 30px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.8);max-width:48ch}
.kt-hero-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

.kt .br-layanan-kartu small{display:block;margin-top:2px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-45)}
/* kartu tanpa nomor (model, sistem) */
.kt .kt-baris .br-layanan-isi{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t a" "d a"}
.kt-model{background:#FBF9F4}
.kt-model .br-layanan-kartu img{background:#E9EDF2}
.kt-sistem{background:#FBF9F4}
.kt .br-layanan{background:var(--cream)}

/* proses */
.kt-proses-daftar{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;position:relative}
/* garis sambung dari pusat ikon pertama ke pusat ikon terakhir (5 kolom, celah 24 px) */
.kt-proses-daftar::before{content:"";position:absolute;left:28px;right:calc((100% - 96px) / 5 - 28px);top:70px;border-top:1.5px dashed var(--gold-soft)}
.kt-proses-daftar li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kt-no{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(194,168,109,.18);color:var(--gold-deep);font-size:12px;font-weight:800}
.kt-ikon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#fff;border:1px solid var(--rule);color:var(--gold-deep);box-shadow:0 8px 20px -14px rgba(20,24,33,.35)}
.kt-ikon svg{width:26px;height:26px}
.kt-proses-daftar h3{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--navy)}
.kt-proses-daftar p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-45)}

/* proyek */
.kt-proyek-daftar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.kt-proyek-kartu{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  color:inherit;text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s}
.kt-proyek-kartu img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.kt-proyek-isi{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 16px;flex:1}
.kt-proyek-isi b{display:block;font-size:15.5px;color:var(--navy);line-height:1.3}
.kt-proyek-isi > span > span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--ink-45)}
.kt-proyek-isi .br-panah{flex:none}
.kt-proyek-kartu:hover{border-color:var(--gold-soft);box-shadow:0 18px 38px -20px rgba(20,24,33,.35);transform:translateY(-3px)}
.kt-proyek-kartu:hover .br-panah{background:var(--gold);color:var(--navy)}
.kt-proyek-kartu:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.kt-proyek .br-bukti{margin-top:24px}
.kt-semua{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;font-size:14.5px;border-radius:6px;margin-top:22px}
.kt-semua svg{width:17px;height:17px}

/* yang perlu disiapkan */
.kt-siap-daftar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kt-siap-daftar li{display:flex;flex-direction:column;gap:12px;padding:20px;background:#fff;border:1px solid var(--rule);border-radius:12px}
.kt-siap-daftar svg{width:30px;height:30px;color:var(--gold-deep)}
.kt-siap-daftar h3{margin:0 0 4px;font-size:15.5px;font-weight:700;color:var(--navy)}
.kt-siap-daftar p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-45)}

@media (min-width:901px){
  .kt .kt-empat{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kt-model .kt-baris{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kt-sistem .kt-baris{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kt-sistem .br-layanan-isi{padding:16px 16px 18px}
  .kt .kt-baris .br-layanan-isi{grid-template-areas:"t a" "d d"}
  .kt .kt-baris .br-layanan-isi p{margin-top:6px}
  .kt .kt-empat .br-layanan-isi{padding:18px 16px 20px;column-gap:10px}
}
@media (max-width:900px){
  .kt-hero .wrapper{grid-template-columns:1fr;gap:32px;padding-bottom:56px}
  .kt-proses-daftar{grid-template-columns:1fr;gap:0}
  .kt-proses-daftar::before{display:none}
  .kt-proses-daftar li{display:grid;grid-template-columns:30px 56px minmax(0,1fr);column-gap:14px;align-items:center;padding:10px 0}
  .kt-proyek-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-siap-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  body:has(.kt-hero) nav.sec{display:none}
  body:has(.kt-hero) footer.site .cols > div:has(> .sched-meeting){display:none}

  .kt-hero .wrapper{display:block;padding-top:4px;padding-bottom:0}
  .kt-remah{margin-bottom:6px;font-size:12.5px}
  .kt-hero h1{font-size:clamp(27px,7.6vw,32px);margin-bottom:14px}
  .kt-hero-lead{font-size:15px;line-height:1.6;margin-bottom:22px}
  .kt-hero .br-cta{flex-direction:column;align-items:stretch;gap:10px;max-width:none}
  .kt-hero-foto{display:block;margin:30px -18px 0}
  .kt-hero-foto img{aspect-ratio:16/10;border-radius:0;box-shadow:none}

  /* strip angka 2x2, ikon di kiri seperti mockup */
  .kt .br-angka dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;padding:22px 0}
  .kt .br-angka dl > div{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i v" "i l";justify-items:start;text-align:left;column-gap:12px;row-gap:0}
  .kt .br-angka svg{width:30px;height:30px;margin:0}
  .kt .br-angka dd{font-size:20px}

  .kt .br-layanan-kartu small{font-size:12px}
  .kt .kt-baris .br-layanan-isi{padding:14px 12px 14px 14px}
  .kt-sistem .br-layanan-kartu img{width:32%}

  .kt-proses-daftar li{grid-template-columns:28px 48px minmax(0,1fr);column-gap:12px;padding:9px 0}
  .kt-no{width:28px;height:28px}
  .kt-ikon{width:48px;height:48px}
  .kt-ikon svg{width:22px;height:22px}
  .kt-proses-daftar h3{font-size:15px;margin-bottom:2px}
  .kt-proses-daftar p{font-size:13.5px;line-height:1.5}

  .kt-proyek-daftar{grid-template-columns:1fr;gap:14px}
  .kt-proyek-isi{padding:12px 14px 14px}
  .kt-semua{display:flex;width:100%}

  .kt-siap-daftar{gap:10px}
  .kt-siap-daftar li{padding:14px;gap:8px}
  .kt-siap-daftar svg{width:26px;height:26px}
  .kt-siap-daftar h3{font-size:14.5px}
  .kt-siap-daftar p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .kt-proyek-kartu{transition:none}
  .kt-proyek-kartu:hover{transform:none}
}

/* ===================== Kontak WhatsApp (js/situs.js bagian 3), 3 Oktober 2026 =====================
   Tombol melayang, teaser, panel topik (bottom sheet di HP), exit intent desktop,
   kartu WhatsApp inline, dan FAQ. Hijau WhatsApp hanya untuk elemen WhatsApp. */
:root{--wa:#1F8A4C;--wa-terang:#25D366;--wa-gelap:#17703D}
.wa-tombol,.wa-teaser{position:fixed;right:18px;z-index:45}
.wa:not(.tampil) .wa-teaser{display:none}
.wa-tombol{bottom:calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--wa-terang);color:#fff;
  box-shadow:0 12px 28px -8px rgba(12,17,26,.45),0 0 0 4px rgba(255,255,255,.9);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s,background .2s}
.wa.tampil .wa-tombol{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .22s ease,background .2s}
.wa-tombol:hover{background:#1FBE5B}
.wa-tombol:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.wa-tombol svg{width:30px;height:30px}
.wa-tombol svg + svg{display:none;width:24px;height:24px}
.wa.panel-buka .wa-tombol{background:var(--navy)}
.wa.panel-buka .wa-tombol svg:first-child{display:none}
.wa.panel-buka .wa-tombol svg + svg{display:block}
html.menu-terbuka .wa,html.pj-kunci:not(.wa-buka) .wa{display:none}

.wa-teaser{bottom:calc(88px + env(safe-area-inset-bottom));display:flex;align-items:flex-start;max-width:250px;
  background:#fff;border-radius:14px;box-shadow:0 16px 36px -14px rgba(12,17,26,.45);border:1px solid var(--rule);
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}
.wa-teaser.muncul{opacity:1;transform:none}
.wa-teaser::after{content:"";position:absolute;right:22px;bottom:-7px;width:14px;height:14px;background:#fff;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transform:rotate(45deg)}
.wa-teaser-isi{display:block;padding:12px 4px 12px 16px;min-height:44px;font-size:13.5px;line-height:1.4;color:var(--ink-70);text-decoration:none}
.wa-teaser-isi b{display:block;color:var(--navy);font-size:14.5px}
.wa-teaser-tutup{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;background:none;color:var(--ink-45);cursor:pointer}
.wa-teaser-tutup svg{width:16px;height:16px}

.wa-panel{position:fixed;z-index:70;right:18px;bottom:calc(90px + env(safe-area-inset-bottom));width:360px;max-width:calc(100vw - 36px);
  background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px -20px rgba(12,17,26,.55);
  opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease}
.wa.panel-buka .wa-panel{opacity:1;transform:none}
.wa-kepala{display:flex;align-items:center;gap:12px;padding:14px 8px 14px 16px;background:var(--wa);color:#fff}
.wa-logo{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--navy)}
.wa-logo img{width:30px;height:30px;object-fit:contain}
.wa-kepala > div{flex:1;min-width:0}
.wa-kepala b{display:block;font-size:15.5px;line-height:1.3}
.wa-status{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(255,255,255,.88)}
.wa-status::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);flex:none}
.wa-status.aktif::before{background:#7CF5A8;box-shadow:0 0 0 3px rgba(124,245,168,.25)}
.wa-tutup{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:none;color:#fff;cursor:pointer}
.wa-tutup:hover{background:rgba(255,255,255,.14)}
.wa-tutup svg{width:20px;height:20px}
.wa-badan{padding:18px 16px 18px;background:#F3F1EC}
.wa-sapa{position:relative;margin:0 0 16px;padding:12px 14px;background:#fff;border-radius:4px 14px 14px 14px;font-size:14.5px;line-height:1.55;color:var(--ink);
  box-shadow:0 1px 1px rgba(12,17,26,.08)}
.wa-label{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.wa-topik{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wa-topik a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:6px 10px;border-radius:999px;
  background:#fff;border:1.5px solid rgba(31,138,76,.35);color:var(--wa-gelap);font-size:13.5px;font-weight:600;line-height:1.25;text-decoration:none;
  transition:background .15s,border-color .15s}
.wa-topik a:hover{background:#E9F6EE;border-color:var(--wa)}
.wa-mulai{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border-radius:10px;
  background:var(--wa);color:#fff;font-size:15px}
.wa-mulai:hover{background:var(--wa-gelap);color:#fff}
.wa-mulai svg{width:20px;height:20px;flex:none}
.wa-mulai svg:last-child{width:17px;height:17px}
.wa-topik a:focus-visible,.wa-mulai:focus-visible,.wa-tutup:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wa-scrim{position:fixed;inset:0;z-index:65;background:rgba(12,17,26,.5);opacity:0;transition:opacity .2s ease}
.wa.panel-buka .wa-scrim{opacity:1}

/* exit intent, desktop */
.wa-exit{width:min(760px,calc(100vw - 48px));max-width:none;padding:0;border:0;border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(12,17,26,.7)}
.wa-exit[open]{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.wa-exit::backdrop{background:rgba(17,27,41,.62)}
.wa-exit-isi{padding:44px 40px 36px;background:#FBF9F4}
.wa-exit h2{outline:none;margin:0 0 12px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--navy)}
.wa-exit p{margin:0 0 26px;font-size:15.5px;line-height:1.6;color:var(--ink-70)}
.wa-exit-chat{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;border-radius:10px;background:var(--wa);color:#fff;font-size:15px}
.wa-exit-chat:hover{background:var(--wa-gelap);color:#fff}
.wa-exit-chat svg{width:20px;height:20px}
.wa-exit-chat svg:last-child{width:17px;height:17px}
.wa-exit-lanjut{display:block;margin-top:10px;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink-70);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.wa-exit-foto img{width:100%;height:100%;object-fit:cover}
.wa-exit-tutup{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);cursor:pointer}
.wa-exit-tutup svg{width:20px;height:20px}

/* kartu WhatsApp inline */
.art-tombol{margin:4px 0 26px}
.art-tombol a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:8px;border:1.5px solid var(--navy);
  color:var(--navy);font-size:14.5px;font-weight:700;text-decoration:none;transition:background .15s,color .15s}
.art-tombol a:hover{background:var(--navy);color:#fff}
.art-tombol svg{width:16px;height:16px}
.art-wa{margin:0 0 24px}
.art-wa p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-45)}
.art-wa p a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.art-wa>a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:8px;background:var(--wa);color:#fff;font-size:14.5px;font-weight:700;text-decoration:none}
.art-wa>a:hover{background:var(--wa-gelap)}
.art-wa svg{width:18px;height:18px}
.wa-kartu{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 22px;margin:0 0 22px;
  background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 14px 34px -24px rgba(20,24,33,.4)}
.wa-kartu-ikon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--wa);color:#fff}
.wa-kartu-ikon svg{width:28px;height:28px}
.wa-kartu h3{margin:0 0 3px;font-size:17px;font-weight:700;color:var(--navy)}
.wa-kartu p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-45)}
.wa-garis{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:8px;
  border:1.5px solid var(--wa);background:#fff;color:var(--wa-gelap);font-size:14.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.wa-garis:hover{background:var(--wa);color:#fff}
.wa-garis svg{width:16px;height:16px}
.content .wa-kartu{margin:14px 0 0}
.art-testi{margin:34px 0 0;padding:0 0 0 16px;border-left:3px solid var(--wa)}
.art-testi blockquote{margin:0;font-size:16px;line-height:1.55;font-style:italic;color:var(--navy)}
.art-testi figcaption{margin-top:6px;font-size:13px;color:var(--ink-45)}

/* FAQ */
.faq{background:#FBF9F4}
.faq .wrapper{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-daftar{border-top:1px solid var(--rule)}
.faq-daftar details{border-bottom:1px solid var(--rule)}
.faq-daftar summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 4px;cursor:pointer;
  list-style:none;font-size:16px;font-weight:700;color:var(--navy);line-height:1.4}
.faq-daftar summary::-webkit-details-marker{display:none}
.faq-daftar summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gold);
  background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/12px 1.6px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) center/1.6px 12px no-repeat;
  transition:transform .2s ease}
.faq-daftar details[open] summary::after{transform:rotate(45deg)}
.faq-daftar summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.faq-jawab{padding:0 4px 18px}
.faq-jawab p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--ink-70)}
.faq-jawab a{color:var(--gold-deep);font-weight:600}

@media (max-width:900px){
  .wa-panel{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
    border-radius:20px 20px 0 0;transform:translateY(100%);opacity:1;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .wa-panel::before{content:"";position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.55)}
  .wa-kepala{padding-top:20px}
  .wa-badan{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .faq .wrapper{grid-template-columns:1fr;gap:22px}
}
@media (max-width:620px){
  .wa-tombol{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:56px;height:56px}
  .wa-teaser{right:14px;bottom:calc(82px + env(safe-area-inset-bottom))}
  .wa-kartu{grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:16px}
  .wa-kartu-ikon{width:46px;height:46px}
  .wa-kartu-ikon svg{width:25px;height:25px}
  .wa-kartu h3{font-size:16px}
  .wa-kartu p{font-size:13.5px}
  .wa-garis{grid-column:1 / -1;width:100%}
  .faq-daftar summary{font-size:15px;min-height:56px}
  .faq-jawab p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .wa-tombol,.wa.tampil .wa-tombol,.wa-teaser,.wa-panel,.wa-scrim,.faq-daftar summary::after{transition:none}
}

/* ===================== Maintenance (maintenance.html), mockup UI consultant 3 Oktober 2026 =====================
   Dibungkus main.kt.mt: hero, strip angka, dan kartu baris memakai pola kt- dan br-.
   Kelas mt- hanya dipakai halaman ini. */
.mt-alasan{background:var(--cream)}
.mt-alasan-daftar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mt-alasan-daftar li{padding:22px 20px;background:#fff;border:1px solid var(--rule);border-radius:12px}
.mt-alasan-daftar svg{width:32px;height:32px;color:var(--gold-deep);margin-bottom:14px}
.mt-alasan-daftar h3{margin:0 0 6px;font-size:16.5px;font-weight:700;line-height:1.3;color:var(--navy)}
.mt-alasan-daftar p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-45)}
.mt-periksa{background:#FBF9F4}

/* detail komponen */
.mt-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mt-detail-grid figure{margin:0;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.mt-zoom{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.mt-zoom img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.mt-zoom:hover img{transform:scale(1.04)}
.mt-zoom:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.mt-lup{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy);box-shadow:0 4px 12px rgba(12,17,26,.25)}
.mt-lup svg{width:18px;height:18px}
.mt-detail-grid figcaption{padding:12px 14px 14px;font-size:13.5px;line-height:1.45;color:var(--ink-45)}
.mt-detail-grid figcaption b{display:block;margin-bottom:2px;font-size:15px;color:var(--navy)}
.mt-lightbox{max-width:min(1000px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:12px;overflow:hidden;background:#000}
.mt-lightbox::backdrop{background:rgba(12,17,26,.82)}
.mt-lightbox img{display:block;max-width:100%;max-height:calc(100vh - 32px);object-fit:contain}
.mt-lightbox-tutup{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy);cursor:pointer}
.mt-lightbox-tutup svg{width:20px;height:20px}

/* paket */
.mt-paket{background:var(--cream)}
.mt-paket-daftar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mt-paket-kartu{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k k" "c h";gap:16px 22px;padding:24px;
  background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 16px 36px -26px rgba(20,24,33,.4)}
.mt-paket-kepala{grid-area:k;display:flex;align-items:center;gap:14px}
.mt-paket-kepala svg{flex:none;width:40px;height:40px;color:var(--gold-deep)}
.mt-paket-kepala h3{margin:0 0 2px;font-size:18px;font-weight:800;color:var(--navy)}
.mt-paket-kepala p{margin:0;font-size:13.5px;color:var(--ink-45)}
.mt-centang{grid-area:c;list-style:none;margin:0;padding:0}
.mt-centang li{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:14px;line-height:1.45;color:var(--ink-70)}
.mt-centang svg{flex:none;width:17px;height:17px;margin-top:1px;color:var(--gold-deep)}
.mt-paket-harga{grid-area:h;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-width:150px}
.mt-paket-harga span{font-size:12.5px;color:var(--ink-45)}
.mt-paket-harga b{font-size:22px;font-weight:800;line-height:1.2;color:var(--navy);letter-spacing:-.01em}
.mt-paket-harga .btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin-top:14px;padding:0 16px;font-size:14px;border-radius:6px;white-space:nowrap}
.mt-paket-harga .btn svg{width:16px;height:16px}

/* pemilih intensitas */
.mt-pakai{margin-top:44px;padding:26px;background:#fff;border:1px solid var(--rule);border-radius:14px}
.mt-pakai-pilih{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.mt-pakai-pilih label{position:relative;cursor:pointer}
.mt-pakai-pilih input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mt-pakai-pilih span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;padding:8px;border:1.5px solid var(--rule);border-radius:10px;
  font-size:12.5px;color:var(--ink-45);text-align:center;transition:border-color .15s,background .15s}
.mt-pakai-pilih b{font-size:17px;color:var(--navy)}
.mt-pakai-pilih input:checked + span{border-color:var(--gold);background:#FBF6EA}
.mt-pakai-pilih input:checked + span b{color:var(--gold-deep)}
.mt-pakai-pilih input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
.mt-pakai-hasil{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#FBF9F4;border-radius:10px}
.mt-pakai-hasil > svg{flex:none;width:34px;height:34px;color:var(--gold-deep)}
.mt-pakai-hasil p{margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--ink-70)}
.mt-pakai-hasil b{color:var(--navy)}
.mt .mt-pakai-wa{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;font-size:14px;border-radius:6px;color:var(--navy);border-color:var(--navy)}
.mt .mt-pakai-wa:hover{background:var(--navy);color:#fff}
.mt-pakai-wa svg{width:16px;height:16px}

/* slider sebelum/sesudah (aktif setelah foto ada) */
.mt-banding{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10}
.mt-banding img{display:block;width:100%;height:100%;object-fit:cover}
.mt-banding-sebelum{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--posisi)) 0 0)}
.mt-banding::after{content:"";position:absolute;top:0;bottom:0;left:var(--posisi);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.mt-banding input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.mt-label{position:absolute;bottom:12px;padding:5px 10px;border-radius:6px;background:rgba(12,17,26,.7);color:#fff;font-size:12.5px;font-weight:600}
.mt-label.kiri{left:12px}.mt-label.kanan{right:12px}

/* FAQ, certified */
.mt-faq{background:#FBF9F4}
.mt-faq .br-kepala{margin-bottom:10px}
.mt-sertif .wrapper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.mt-sertif-ikon{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
.mt-sertif-ikon li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--navy)}
.mt-sertif-ikon svg{flex:none;width:30px;height:30px;color:var(--gold-deep)}
.mt-sertif-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}

@media (min-width:901px){
  .mt .mt-baris{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .mt .mt-baris .br-layanan-isi{padding:16px 14px 18px;column-gap:8px}
  .mt .mt-baris .br-layanan-isi h3{font-size:16px}
  .mt .mt-baris .br-layanan-isi p{font-size:13.5px}
}
@media (max-width:900px){
  .mt-alasan-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt-paket-daftar{grid-template-columns:1fr}
  .mt-sertif .wrapper{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  .mt-alasan-daftar{gap:10px}
  .mt-alasan-daftar li{padding:16px 14px}
  .mt-alasan-daftar svg{width:28px;height:28px;margin-bottom:10px}
  .mt-alasan-daftar h3{font-size:15px}
  .mt-alasan-daftar p{font-size:13px;line-height:1.5}
  .mt-baris .br-layanan-kartu img{width:34%}
  .mt-detail-grid{gap:10px}
  .mt-detail-grid figcaption{padding:10px 12px 12px;font-size:12.5px}
  .mt-detail-grid figcaption b{font-size:14px}
  .mt-paket-kartu{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k k" "c c" "h h";padding:18px;gap:14px}
  .mt-paket-kepala svg{width:34px;height:34px}
  .mt-paket-kepala h3{font-size:17px}
  .mt-centang li{font-size:13.5px;padding:4px 0}
  .mt-paket-harga{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;column-gap:8px;padding-top:14px;border-top:1px solid var(--rule)}
  .mt-paket-harga span:first-child{flex-basis:100%}
  .mt-paket-harga b{font-size:19px}
  .mt-paket-harga .btn{flex-basis:100%;justify-content:center;margin-top:12px}
  .mt-pakai{margin-top:32px;padding:18px}
  .mt-pakai-pilih{gap:8px}
  .mt-pakai-pilih b{font-size:16px}
  .mt-pakai-hasil{padding:14px}
  .mt-pakai-hasil p{font-size:14px}
  .mt-pakai-wa{width:100%;justify-content:center}
  .mt-sertif-ikon{gap:8px}
  .mt-sertif-ikon li{flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px}
  .mt-sertif-ikon svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  .mt-zoom img,.mt-pakai-pilih span{transition:none}
  .mt-zoom:hover img{transform:none}
}

/* ===================== Portfolio (proyek.html, dihasilkan bangun-proyek.py), mockup UI consultant 3 Oktober 2026 =====================
   Dibungkus main.kt.pf. Kelas pf- hanya halaman ini; br-, faq, dan br-testi dipakai ulang. */
.pf svg[role="img"]{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pf-hero{position:relative;overflow:hidden;color:#fff;background:var(--navy)}
.pf-hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,27,41,.94) 0%,rgba(17,27,41,.8) 45%,rgba(17,27,41,.35) 100%)}
.pf-hero .wrapper{position:relative;z-index:1;padding-top:40px;padding-bottom:64px}
.pf-hero .br-eyebrow{color:var(--gold)}
.pf-hero h1{text-wrap:balance;margin:0 0 18px;font-size:clamp(32px,4vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.02em}
.pf-hero h1 em{display:block;font-style:normal;color:var(--gold)}
.pf-hero-lead{max-width:50ch;margin:0 0 30px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.82)}
.pf-angka{display:flex;flex-wrap:wrap;gap:16px 40px;margin:0}
.pf-angka > div{display:grid;grid-template-columns:auto auto;grid-template-areas:"i v" "i l";column-gap:12px;align-items:center}
.pf-angka svg{grid-area:i;width:34px;height:34px;color:var(--gold)}
.pf-angka dd{grid-area:v;margin:0;font-size:26px;font-weight:800;line-height:1.1}
.pf-angka dt{grid-area:l;font-size:13px;color:rgba(255,255,255,.72)}

.pf-filter{position:sticky;top:76px;z-index:20;background:rgba(251,249,244,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.pf-filter[hidden]{display:none}
.pf-filter .wrapper{display:flex;gap:10px;padding-top:12px;padding-bottom:12px}
.pf-filter button{min-height:44px;min-width:110px;padding:0 20px;border:1px solid var(--rule);border-radius:999px;background:#fff;
  font:inherit;font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s}
.pf-filter button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.pf-filter button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pf-bagian[hidden]{display:none}

.pf-label{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:5px;background:rgba(194,168,109,.2);
  color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pf-label.berjalan{background:#FDF0DC;color:#8A5A12}
.pf-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0}
.pf-meta li{display:flex;align-items:center;gap:6px;font-size:13.5px;line-height:1.4;color:var(--ink-45)}
.pf-meta svg{flex:none;width:17px;height:17px;color:var(--gold-deep)}

/* unggulan */
.pf-bagian{padding-bottom:0}
.pf-bagian + .pf-bagian{padding-top:56px}
.pf-unggulan{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  box-shadow:0 20px 44px -30px rgba(20,24,33,.45)}
.pf-unggulan-foto{display:block;overflow:hidden}
.pf-unggulan-foto img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover;transition:transform .5s ease}
.pf-unggulan-foto:hover img{transform:scale(1.03)}
.pf-unggulan-isi{display:flex;flex-direction:column;gap:14px;padding:32px}
.pf-unggulan h3{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.pf-unggulan h3{color:var(--navy)}
.pf-unggulan p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-70)}
.pf-unggulan .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;min-height:48px;padding:0 22px;font-size:14.5px;border-radius:6px}
.pf-unggulan .btn svg{width:17px;height:17px}

/* proyek selesai */
.pf-semua h2,.pf-jalan h2{margin-bottom:20px}
.pf-daftar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-kartu{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.pf-kartu img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.pf-kartu-isi{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px 18px;flex:1}
.pf-kartu-isi > b{font-size:17px;line-height:1.3;color:var(--navy)}
.pf-lihat{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:14px;font-weight:700;color:var(--gold-deep)}
.pf-lihat svg{width:16px;height:16px}
.pf-kartu:hover{border-color:var(--gold-soft);box-shadow:0 18px 38px -20px rgba(20,24,33,.35);transform:translateY(-3px)}
.pf-kartu:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* proyek berjalan */
.pf-jalan .br-lead{margin-bottom:22px}
.pf-jalan-daftar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pf-berjalan{display:flex;align-items:center;gap:14px;padding:12px;background:#fff;border:1px solid var(--rule);border-radius:12px}
.pf-berjalan > picture img,.pf-tanpa-foto{flex:none;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:9px;object-fit:cover}
.pf-tanpa-foto{background:linear-gradient(135deg,#24385A,var(--navy));color:var(--gold)}
.pf-tanpa-foto svg{width:38px;height:38px}
.pf-berjalan > picture img{width:108px}
.pf-kredit{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--ink-45)}
.pf-kredit a{color:inherit}
.pf-berjalan > div{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.pf-berjalan b{font-size:15px;line-height:1.3;color:var(--navy)}
.pf-berjalan .pf-label{min-height:20px;font-size:12px;letter-spacing:.04em;padding:0 7px}
.pf-berjalan .pf-meta{flex-direction:column;gap:2px}
.pf-berjalan .pf-meta li{font-size:13px}

/* lokasi */
.pf-lokasi{background:var(--cream);padding-bottom:64px}
.pf-lokasi .br-bagian,.pf-bagian:last-of-type{padding-bottom:0}
.pf-lencana{display:inline-flex;flex-direction:column;padding:8px 14px;background:#fff;border:1px solid var(--rule);border-radius:10px;
  font-size:12.5px;line-height:1.3;color:var(--ink-45);box-shadow:0 10px 24px -18px rgba(20,24,33,.4)}
.pf-lencana b{font-size:18px;color:var(--navy)}
.pf-peta{max-width:860px;margin:8px auto 22px}
.pf-peta-svg{display:block;width:100%;height:auto}
.pf-peta-svg path{fill:#E6DCC6;stroke:#CDB98E;stroke-width:1}
.pf-peta-svg circle{stroke:#fff;stroke-width:4}
.pf-peta-svg .selesai{fill:var(--navy)}
.pf-peta-svg .berjalan{fill:var(--gold)}
.pf-kota{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0}
.pf-kota a,.pf-kota span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--rule);
  font-size:14px;font-weight:600;color:var(--navy);text-decoration:none}
.pf-kota a:hover{border-color:var(--gold)}
.pf-kota i,.pf-legenda i{display:inline-block;width:10px;height:10px;border-radius:50%}
.pf-kota i.selesai,.pf-legenda i.selesai{background:var(--navy)}
.pf-kota i.berjalan,.pf-legenda i.berjalan{background:var(--gold)}
.pf-legenda{display:flex;gap:18px;margin:0;font-size:13px;color:var(--ink-45)}
.pf-legenda span{display:inline-flex;align-items:center;gap:7px}

/* standar */
.pf-standar{background:var(--navy);color:#fff}
.pf-standar .br-eyebrow{color:var(--gold)}
.pf-standar h2{color:#fff}
.pf-standar .br-lead{color:rgba(255,255,255,.75)}
.pf-standar-daftar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pf-standar-daftar li{display:flex;gap:14px;align-items:flex-start}
.pf-standar-daftar svg{flex:none;width:34px;height:34px;color:var(--gold)}
.pf-standar-daftar h3{margin:2px 0 4px;font-size:16px;font-weight:700;color:#fff}
.pf-standar-daftar p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}

/* galeri mozaik */
.pf-mozaik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;height:520px}
.pf-mozaik a{display:block;border-radius:12px;overflow:hidden}
.pf-mozaik a:first-child{grid-row:1 / 3}
.pf-mozaik img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pf-mozaik a:hover img{transform:scale(1.04)}
.pf-mozaik a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pf .br-testi{background:#FBF9F4}
.pf-faq .br-kepala{margin-bottom:10px}

@media (max-width:900px){
  .pf-filter{top:64px}
  .pf-unggulan{grid-template-columns:1fr}
  .pf-unggulan-foto img{min-height:0;height:auto;aspect-ratio:16/10}
  .pf-daftar{grid-template-columns:1fr}
  .pf-kartu{flex-direction:row}
  .pf-kartu img{flex:none;width:44%;height:auto;aspect-ratio:auto;min-height:130px;align-self:stretch}
  .pf-kartu-isi{min-width:0}
  .pf-jalan-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-standar-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-mozaik{height:420px}
}
@media (max-width:620px){
  body:has(.pf-hero) nav.sec{display:none}
  .pf-hero .wrapper{padding-top:4px;padding-bottom:30px}
  .pf-hero::after{background:linear-gradient(180deg,rgba(17,27,41,.88) 0%,rgba(17,27,41,.72) 55%,rgba(17,27,41,.9) 100%)}
  .pf-hero h1{max-width:none;font-size:clamp(27px,7.6vw,32px);margin-bottom:12px}
  .pf-hero h1 em{display:inline}
  .pf-hero h1{text-wrap:balance}
  .pf-hero-lead{font-size:15px;line-height:1.6;margin-bottom:22px}
  .pf-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pf-angka > div{column-gap:8px}
  .pf-angka svg{width:28px;height:28px}
  .pf-angka dd{font-size:20px}
  .pf-angka dt{font-size:12px}
  .pf-filter .wrapper{gap:8px;padding-top:10px;padding-bottom:10px}
  .pf-filter button{flex:1;min-width:0;padding:0 8px;font-size:14px}
  .pf-bagian{padding-top:32px}
  .pf-bagian + .pf-bagian{padding-top:44px}
  .pf-unggulan-isi{padding:18px 18px 20px;gap:12px}
  .pf-unggulan h3{font-size:22px}
  .pf-unggulan p{font-size:14.5px}
  .pf-unggulan .btn{align-self:stretch}
  .pf-daftar{gap:12px}
  .pf-kartu img{width:42%}
  .pf-kartu-isi{padding:12px 12px 12px 14px;gap:6px}
  .pf-kartu-isi > b{font-size:15.5px}
  .pf-kartu .pf-meta{flex-direction:column;gap:3px}
  .pf-kartu .pf-meta li{font-size:12.5px}
  .pf-lihat{min-height:32px}
  .pf-jalan-daftar{grid-template-columns:1fr;gap:10px}
  .pf-berjalan > picture img,.pf-tanpa-foto{width:76px;height:76px}
  .pf-berjalan > picture img{width:100px}
  .pf-lokasi{padding-bottom:48px}
  .pf-lencana b{font-size:16px}
  .pf-kota a,.pf-kota span{padding:0 12px;font-size:13.5px}
  .pf-standar-daftar{grid-template-columns:1fr 1fr;gap:20px 14px}
  .pf-standar-daftar li{flex-direction:column;gap:8px}
  .pf-standar-daftar svg{width:30px;height:30px}
  .pf-standar-daftar h3{font-size:15px}
  .pf-standar-daftar p{font-size:13px}
  .pf-mozaik{height:300px;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .pf-kartu,.pf-unggulan-foto img,.pf-mozaik img,.pf-filter button{transition:none}
  .pf-kartu:hover{transform:none}
}

/* ===================== Konfigurator (konfigurator.html), mockup UI consultant 3 Oktober 2026 =====================
   Wizard enam langkah. Tanpa JavaScript semua langkah tampil berurutan (kelas .kf-js dipasang skrip).
   Pratinjau SVG digambar skrip halaman. Huruf minimal 12 px, target sentuh 44 px. */
.kf{background:#FBF9F4}
.kf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kf-kepala .wrapper{padding-top:22px;padding-bottom:6px}
.kf-kepala .kt-remah{color:var(--ink-45);margin-bottom:4px}
.kf-kepala .kt-remah a{color:var(--ink-70)}
.kf-kepala .kt-remah a:hover{color:var(--gold-deep)}
.kf-kepala .kt-remah [aria-current]{color:var(--ink-45)}
.kf-kepala h1{margin:0 0 10px;font-size:clamp(28px,3.2vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.kf-kepala h1 em{font-style:normal;color:var(--gold-deep)}
.kf-lead{margin:0;max-width:62ch;font-size:16px;color:var(--ink-70)}

.kf-wizard .wrapper{padding-top:26px;padding-bottom:72px}
/* stepper */
.kf-langkah{display:none;list-style:none;margin:0 0 26px;padding:0;counter-reset:none}
.kf-js .kf-langkah{display:flex}
.kf-langkah li{flex:1;position:relative;display:flex;justify-content:center}
.kf-langkah li + li::before{content:"";position:absolute;top:22px;right:calc(50% + 22px);left:calc(-50% + 22px);border-top:2px solid var(--rule)}
.kf-langkah li.sudah + li::before,.kf-langkah li.sudah + li.kini::before{border-color:var(--gold)}
.kf-langkah button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0;
  background:none;border:0;font:inherit;color:var(--ink-45);cursor:pointer}
.kf-langkah button:disabled{cursor:default}
.kf-no{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid var(--rule);font-size:15px;font-weight:800;color:var(--ink-45);transition:background .2s,border-color .2s,color .2s}
.kf-nama{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.kf-langkah .sudah .kf-no{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.kf-langkah .kini .kf-no{background:var(--navy);border-color:var(--navy);color:#fff}
.kf-langkah .kini .kf-nama{color:var(--navy)}
.kf-langkah .sudah .kf-nama{color:var(--ink-70)}
.kf-langkah button:not(:disabled):hover .kf-no{border-color:var(--gold)}

.kf-tata{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:44px;align-items:start}
.kf-pratinjau{position:sticky;top:100px;margin:0;border-radius:14px;overflow:hidden;background:#1E2531;
  box-shadow:0 24px 50px -30px rgba(20,24,33,.55)}
.kf-pratinjau svg{display:block;width:100%;height:auto;aspect-ratio:16/10}
.kf-pratinjau figcaption{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:12px}
.kf-chip{padding:5px 11px;border-radius:999px;background:rgba(17,27,41,.78);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.kf-indikatif{align-self:flex-end;padding:3px 9px;border-radius:999px;background:rgba(17,27,41,.6);color:rgba(255,255,255,.86);font-size:12px}

/* langkah */
.kf-step{margin:0 0 44px;padding:0;border:0;min-width:0}
.kf-js .kf-step{display:none;margin:0}
.kf-js .kf-step.aktif{display:block}
.kf-step legend{float:left;width:100%;padding:0;margin:0 0 6px}
.kf-step legend + *{clear:both}
.kf-ke{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.kf-step h2,.kf-selesai h2{margin:4px 0 8px;font-size:24px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.kf h2:focus:not(:focus-visible){outline:none}
.kf-bantu{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--ink-70)}
.kf-bantu a,.kf-tautan a{color:var(--gold-deep);font-weight:700;text-decoration:none}
.kf-tautan{margin:14px 0 0}
.kf-tautan-rapat{margin:-14px 0 0}
.kf-tautan a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.kf-tautan a:hover,.kf-bantu a:hover{text-decoration:underline}
.kf-sub{margin:26px 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}

/* kartu pilihan */
.kf-pilihan{display:grid;gap:12px}
.kf-tiga{grid-template-columns:repeat(3,minmax(0,1fr))}
.kf-dua,.kf-model{grid-template-columns:repeat(2,minmax(0,1fr))}
.kf-lebar{grid-column:1 / -1}
.kf-khusus .kf-opsi-isi{height:100%;display:flex;flex-direction:column;justify-content:center;gap:4px}
.kf-khusus .kf-ikon{width:40px;height:40px;margin-bottom:6px}
.kf-opsi{position:relative;display:block;cursor:pointer}
.kf-opsi input,.kf-warna input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.kf-opsi-isi{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 16px 15px;background:#fff;
  border:1.5px solid var(--rule);border-radius:12px;transition:border-color .2s,box-shadow .2s,background .2s}
.kf-opsi:hover .kf-opsi-isi{border-color:var(--gold-soft)}
.kf-opsi input:checked + .kf-opsi-isi{border-color:var(--gold);background:#FFFCF4;box-shadow:inset 0 0 0 1px var(--gold)}
.kf-opsi input:checked + .kf-opsi-isi::after{content:"";position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23192638' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.kf-opsi input:focus-visible + .kf-opsi-isi,.kf-warna input:focus-visible + span{outline:2px solid var(--navy);outline-offset:2px}
.kf-opsi-isi b{display:block;font-size:15.5px;line-height:1.3;color:var(--navy);padding-right:24px}
.kf-opsi-isi small{display:block;font-size:13px;line-height:1.5;color:var(--ink-45)}
.kf-ikon{width:30px;height:30px;margin-bottom:6px;fill:none;stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kf-model img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#E9EDF2;margin-bottom:8px}
.kf-lebar .kf-opsi-isi,.kf-lampu .kf-opsi-isi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center}
.kf-lebar .kf-opsi-isi > .kf-ikon,.kf-lampu .kf-opsi-isi img{grid-row:span 2;margin:0}
.kf-lebar .kf-opsi-isi b{align-self:end}
.kf-lebar .kf-opsi-isi small{align-self:start}
.kf-lampu .kf-opsi-isi img{width:76px;height:76px;object-fit:cover;border-radius:8px;background:#E9EDF2}
.kf-lampu .kf-lebar .kf-ikon{width:76px;height:30px}
.kf-kode{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:var(--cream-2);color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:.04em;vertical-align:1px}

/* jumlah */
.kf-hitung{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}
.kf-hitung button{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;
  border:1.5px solid var(--rule);color:var(--navy);cursor:pointer;transition:border-color .2s}
.kf-hitung button:hover:not(:disabled){border-color:var(--gold)}
.kf-hitung button:disabled{opacity:.35;cursor:default}
.kf-hitung svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.kf-angka input{width:112px;padding:0;border:0;background:transparent;text-align:center;font:800 48px/1.1 var(--sans);color:var(--navy);
  -moz-appearance:textfield;appearance:textfield}
.kf-angka input::-webkit-outer-spin-button,.kf-angka input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kf-angka input:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:8px}
.kf-satuan{margin:0 0 18px;text-align:center;font-size:14px;color:var(--ink-45)}
.kf-cepat{display:flex;justify-content:center;gap:8px;margin-bottom:22px}
.kf-cepat button{min-width:54px;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;border:1.5px solid var(--rule);
  font:700 15px var(--sans);color:var(--navy);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.kf-cepat button:hover{border-color:var(--gold)}
.kf-cepat button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.kf-step[data-langkah="2"] .kf-bantu{text-align:center;max-width:44ch;margin-left:auto;margin-right:auto}
.kf-step[data-langkah="2"] .kf-tautan{text-align:center}

/* warna */
.kf-warna{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 14px}
.kf-warna label{position:relative;display:block;cursor:pointer}
.kf-warna span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px 10px;background:#fff;border:1.5px solid var(--rule);
  border-radius:12px;font-size:13px;font-weight:700;color:var(--navy);transition:border-color .2s,box-shadow .2s}
.kf-warna span::before{content:"";width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.22),transparent 58%),repeating-linear-gradient(115deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px),var(--w)}
.kf-warna .kf-warna-lain::before{background:conic-gradient(#C8332E,#E05A9C,#6A46A6,#2A62C9,#1C9C88,#2F7A3A,#C2A86D,#9C4128,#C8332E)}
.kf-warna label:hover span{border-color:var(--gold-soft)}
.kf-warna input:checked + span{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#FFFCF4}

/* ringkasan dan isian */
.kf-ringkas{margin:6px 0 0;background:#fff;border:1px solid var(--rule);border-radius:12px}
.kf-ringkas > div{display:grid;grid-template-columns:118px minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:52px;padding:6px 6px 6px 16px}
.kf-ringkas > div + div{border-top:1px solid var(--rule)}
.kf-ringkas dt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.kf-ringkas dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--navy)}
.kf-ubah{min-height:44px;padding:0 10px;background:none;border:0;border-radius:8px;font:700 13.5px var(--sans);color:var(--gold-deep);cursor:pointer}
.kf-ubah:hover{background:var(--cream)}
.kf-ringkas-ringan{margin:18px 0 22px;text-align:left}
.kf-ringkas-ringan > div{grid-template-columns:118px minmax(0,1fr);padding-right:16px}
.kf-isian{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kf-isian label{display:block;font-size:13.5px;font-weight:700;color:var(--navy)}
.kf-isian label span{font-weight:500;color:var(--ink-45)}
.kf-isian input,.kf-isian textarea{display:block;width:100%;margin-top:6px;min-height:48px;padding:12px 14px;background:#fff;
  border:1.5px solid var(--rule);border-radius:10px;font:400 16px/1.4 var(--sans);color:var(--ink);resize:vertical}
.kf-isian input:focus,.kf-isian textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(25,38,56,.12)}
.kf-step[data-langkah="6"] .kf-bantu{margin:14px 0 0}

/* tombol bawah */
.kf-aksi{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
.kf-aksi[hidden],.kf-aksi [hidden]{display:none}
.kf-kembali{display:none}
.kf-js .kf-kembali{display:inline-flex}
.kf-kembali{align-items:center;gap:6px;min-height:50px;padding:0 18px 0 12px;background:#fff;border:1.5px solid var(--rule);border-radius:8px;
  font:700 15px var(--sans);color:var(--navy);cursor:pointer}
.kf-kembali:hover{border-color:var(--gold)}
.kf .btn.kf-lanjut,.kf .btn.kf-wa{display:none;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;
  border:0;border-radius:8px;font:700 15px var(--sans);letter-spacing:.02em;cursor:pointer}
.kf .btn.kf-wa,.kf-js .btn.kf-lanjut{display:inline-flex}
.kf .btn.kf-lanjut{margin-left:auto}
.kf .btn[hidden]{display:none}
.kf-aksi svg,.kf-garis svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kf .kf-wa svg{width:19px;height:19px;flex:none}
.kf-kirim{margin-left:auto}
/* bar bawah melekat selama isi langkah digulir */
.kf-js .kf-aksi{position:sticky;bottom:0;z-index:20;padding-bottom:18px;background:rgba(251,249,244,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* layar selesai */
.kf-selesai{display:none;padding:8px 0 0}
.kf-selesai.aktif{display:block}
.kf-centang{width:60px;height:60px;fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kf-centang circle{fill:#FFFCF4}
.kf-selesai > p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-70);max-width:52ch}
.kf-selesai-aksi{display:flex;flex-wrap:wrap;gap:10px}
.kf-garis{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 18px;background:#fff;border:1.5px solid var(--rule);
  border-radius:8px;font:700 14.5px var(--sans);color:var(--navy);text-decoration:none;cursor:pointer}
.kf-garis:hover{border-color:var(--gold)}

/* panduan dan FAQ di bawah wizard */
.kf-panduan{background:#fff}
.kf-panduan-daftar{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.kf-panduan-daftar li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px;border-top:1px solid var(--rule)}
.kf-panduan-no{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--gold-deep)}
.kf-panduan-daftar h3{margin:0;font-size:17px;line-height:1.3;font-weight:700;color:var(--navy)}
.kf-panduan-daftar p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-70)}
.kf-panduan-daftar a{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;font-size:14px;font-weight:700;color:var(--gold-deep);text-decoration:none}
.kf-panduan-daftar a:hover{text-decoration:underline}

/* kartu masuk di katalog.html */
.kf-masuk{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 36px;padding:24px 28px;border-radius:14px;
  background:radial-gradient(120% 140% at 90% 30%,#24385A 0%,var(--navy) 60%);color:#fff;text-decoration:none;
  box-shadow:0 20px 40px -28px rgba(20,24,33,.6)}
.kf-masuk-isi{display:flex;flex-direction:column;gap:4px;min-width:0}
.kf-masuk .br-eyebrow{margin:0;color:var(--gold)}
.kf-masuk b{font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.kf-masuk-isi > span:last-child{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78);max-width:60ch}
.kf-masuk .btn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 20px;border-radius:8px;font-size:14.5px}
.kf-masuk .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kf-masuk:hover .btn{background:#CDB57E}

@media (max-width:900px){
  .kf-tata{grid-template-columns:1fr;gap:22px}
  .kf-pratinjau{position:relative;top:auto}
  .kf-tiga{grid-template-columns:1fr}
  .kf-tiga .kf-opsi-isi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center}
  .kf-tiga .kf-ikon{grid-row:span 2;margin:0}
  .kf-tiga .kf-opsi-isi b{align-self:end}
  .kf-tiga .kf-opsi-isi small{align-self:start}
  .kf-js .kf-aksi{margin:22px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 24px -18px rgba(20,24,33,.35)}
  .kf-js .btn.kf-lanjut,.kf-js .btn.kf-kirim{flex:1}
  .kf-panduan-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kf-masuk{flex-direction:column;align-items:stretch;gap:16px;padding:20px 18px}
  .kf-masuk b{font-size:20px}
  .kf-masuk .btn{justify-content:center}
}
@media (max-width:620px){
  body:has(.kf) nav.sec{display:none}
  body:has(.kf) footer.site .cols > div:has(> .sched-meeting){display:none}
  .kf-kepala .wrapper{padding-top:4px;padding-bottom:0}
  .kf-kepala .kt-remah{margin-bottom:0;font-size:12.5px}
  .kf-kepala .br-eyebrow{margin-bottom:6px}
  .kf-kepala h1{font-size:clamp(24px,6.8vw,28px);margin-bottom:8px}
  .kf-lead{font-size:14.5px;line-height:1.55}
  .kf-wizard .wrapper{padding-top:18px;padding-bottom:40px}
  .kf-langkah{margin-bottom:16px}
  .kf-nama{display:none}
  .kf-langkah li + li::before{top:21px}
  .kf-no{width:42px;height:42px;font-size:14px}
  .kf-langkah button{min-height:44px}
  .kf-pratinjau{border-radius:12px}
  .kf-pratinjau svg{aspect-ratio:2/1}
  .kf-pratinjau figcaption{padding:8px}
  .kf-step h2,.kf-selesai h2{font-size:21px}
  .kf-bantu{font-size:13.5px}
  .kf-pilihan{gap:10px}
  .kf-opsi-isi{padding:14px}
  .kf-model .kf-opsi-isi{padding:10px 10px 12px}
  .kf-model .kf-opsi-isi b{font-size:14.5px}
  .kf-model .kf-opsi-isi small{font-size:12.5px}
  .kf-model .kf-lebar .kf-opsi-isi{padding:14px}
  .kf-lampu .kf-opsi-isi img{width:64px;height:64px}
  .kf-lampu .kf-lebar .kf-ikon{width:64px}
  .kf-warna{gap:8px}
  .kf-warna span{font-size:12.5px;padding:10px 2px 9px}
  .kf-warna span::before{width:36px;height:36px}
  .kf-hitung{gap:14px}
  .kf-angka input{font-size:44px;width:96px}
  .kf-cepat button{min-width:48px;padding:0 10px}
  .kf-isian{grid-template-columns:1fr}
  .kf-ringkas > div{grid-template-columns:minmax(0,1fr) auto;padding:8px 4px 8px 14px;row-gap:1px}
  .kf-ringkas dt{grid-column:1;font-size:12px}
  .kf-ringkas dd{grid-column:1;font-size:14px}
  .kf-ubah{grid-column:2;grid-row:1 / span 2}
  .kf-ringkas-ringan > div{grid-template-columns:1fr}
  .kf-js .kf-aksi .kf-kembali{padding:0 14px 0 10px}
  .kf-selesai-aksi > *{flex:1 1 100%}
  .kf-panduan-daftar{grid-template-columns:1fr;gap:0;margin-top:18px}
  .kf-panduan-daftar li{padding:16px 0 4px;gap:6px}
  .kf-panduan-daftar h3{font-size:16px}
  .kf-panduan-daftar p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .kf-no,.kf-opsi-isi,.kf-warna span,.kf-cepat button{transition:none}
}

/* ---- halaman artikel (bangun-artikel.py: halaman_artikel) ----
   Kepala dan isi dalam satu grid; rail ikut naik sejajar judul dan menempel saat digulir.
   Pita krem kepala dibentangkan selebar layar dengan bayangan + clip-path. */
.art-halaman{background:var(--white);overflow-x:clip}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:48px;align-items:start}
.art-kepala{grid-column:1;padding:40px 0 44px;background:var(--cream);
  box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax)}
.art-remah{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 22px;font-size:14px;color:var(--ink-70)}
.art-remah a{display:inline-flex;align-items:center;gap:8px;padding:12px 0;margin:-12px 0;color:var(--gold-deep);text-decoration:none}
.art-remah a:hover{text-decoration:underline;text-underline-offset:3px}
.art-remah svg{width:18px;height:18px;color:var(--ink-70)}
.art-sep{display:inline-flex;color:var(--ink-45)}
.art-kini{display:inline-flex;align-items:center;gap:10px}
.art-sep svg{width:14px;height:14px}
.art-judul{margin:0;font-size:clamp(30px,4vw,54px);line-height:1.12;font-weight:800;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.art-lead{margin:18px 0 0;max-width:62ch;font-size:18px;line-height:1.6;color:var(--ink-70)}
.art-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;list-style:none;padding:0;margin:26px 0 0;font-size:15px;color:var(--ink-70)}
.art-info li{display:inline-flex;align-items:center;gap:10px;padding:0 22px;border-left:1px solid var(--rule)}
.art-info li:first-child{padding-left:0;border-left:0}
.art-info svg{width:20px;height:20px;color:var(--ink)}
.art-isi{grid-column:1;padding:22px 0 72px}
.art-isi .ph-img{border-radius:12px}
.art-rail{grid-column:2;grid-row:1 / span 2;position:sticky;top:96px;margin:40px 0 72px;z-index:1}
.art-rail-isi{display:flex;flex-direction:column;max-height:calc(100vh - 190px);
  background:var(--white);border:1px solid var(--rule);border-radius:16px;padding:26px 24px 24px;
  box-shadow:0 12px 32px rgba(25,38,56,.08)}
.art-gulir{flex:1 1 auto;min-height:0;overflow:auto;margin:0 -8px;padding:0 8px;scrollbar-width:thin}
.art-rail h2{margin:0 0 14px;font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.art-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.art-toc a{display:flex;align-items:center;gap:14px;padding:7px 10px 7px 6px;border-radius:10px;
  font-size:14.5px;line-height:1.4;color:var(--ink-70);text-decoration:none;transition:background .15s}
.art-toc a:hover,.art-toc a[aria-current="true"]{background:var(--cream)}
.art-toc a[aria-current="true"]{color:var(--ink)}
.art-no{flex:0 0 32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--cream);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.art-toc a[aria-current="true"] .art-no{background:var(--cream-2)}
.art-topik{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
/* Di layar laptop daftar isi sudah memenuhi rail, sehingga topik terkait terpotong tinggal
   judulnya. Tautan yang sama ada di menu atas. */
@media (max-height:1079px){.art-topik{display:none}}
.art-toc + .art-topik{margin-top:22px}
.art-topik:first-child{margin-top:0;padding-top:0;border-top:0}
.art-topik ul{list-style:none;margin:0;padding:0}
.art-topik a{display:flex;align-items:center;gap:14px;padding:9px 4px;font-size:14.5px;color:var(--ink-70);text-decoration:none}
.art-topik a:hover{color:var(--gold-deep)}
.art-topik a span{flex:1}
.art-topik svg{width:22px;height:22px;color:var(--ink)}
.art-topik svg:last-child{width:16px;height:16px;color:var(--ink-45)}
.art-kartu{flex:none;margin-top:20px;padding:22px 20px 20px;border-radius:12px;background:var(--navy);color:#fff}
.art-kartu-kepala{display:flex;gap:16px;align-items:flex-start}
.art-kartu-ikon{flex:0 0 52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1)}
.art-kartu-ikon svg{width:24px;height:24px}
.art-kartu h2{margin:2px 0 6px;font-size:17px;letter-spacing:0;text-transform:none;color:#fff}
.art-kartu p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.art-kartu-tombol{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;min-height:46px;border-radius:8px;
  background:var(--gold);color:var(--navy);font-size:16px;font-weight:700;text-decoration:none;transition:background .15s}
.art-kartu-tombol:hover{background:#D3BB84}
.art-kartu-tombol svg{width:18px;height:18px}
/* Di desktop kartu konsultasi di rail selalu terlihat, jadi tombol atas cukup di layar sempit. */
@media (min-width:1041px){.art-isi .art-wa{display:none}}
@media (max-width:1040px){
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .art-rail{grid-column:1;grid-row:auto;position:static;margin:0 0 56px}
  .art-rail-isi{max-height:none;box-shadow:none}
  .art-gulir{overflow:visible}
  .art-isi{padding-bottom:40px}
}
@media (max-width:620px){
  .art-kepala{padding:26px 0 30px}
  .art-remah{font-size:12.5px;margin-bottom:16px}
  .art-lead{font-size:16px}
  .art-info{font-size:13.5px;margin-top:20px}
  .art-info{gap:8px 18px}
  .art-info li{padding:0;border-left:0}
  .art-kini{display:none}
  .art-info svg{width:17px;height:17px}
  .art-isi{padding-top:18px}
  .art-rail-isi{padding:22px 18px 18px}
}
/* Tombol Hubungi Kami di header membawa panah, seperti tombol ajakan lain. */
header.site .btn::after{content:"";display:inline-block;width:16px;height:16px;margin-left:10px;vertical-align:-3px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:420px){header.site .btn::after{display:none}}

/* Kotak harga di kepala artikel berharga (bangun-artikel.py: kotak_harga) */
.art-harga{display:grid;gap:4px;margin:26px 0 0;padding:18px 20px;max-width:62ch;background:var(--white);
  border:1px solid var(--rule);border-left:4px solid var(--gold);border-radius:8px}
.art-harga span{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.art-harga strong{font-size:26px;line-height:1.25;font-weight:800;color:var(--navy)}
.art-harga small{font-size:14px;line-height:1.55;color:var(--ink-70)}
.art-harga a{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:44px;margin-top:6px;
  font-size:15px;font-weight:700;color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.art-harga a svg{width:18px;height:18px}
@media (max-width:640px){
  .art-harga strong{font-size:22px}
}

/* foto di badan artikel: tampil utuh pada rasio aslinya, dengan keterangan */
.art-foto{margin:8px 0 28px}
.art-foto img{display:block;width:100%;height:auto;border-radius:12px;background:var(--cream)}
.art-foto figcaption{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--ink-70)}

/* galeri geser di badan artikel: bingkai 4:3 berlatar putih, foto tampil utuh */
.art-galeri{margin:8px 0 28px}
.art-galeri-geser{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:12px}
.art-galeri-geser::-webkit-scrollbar{display:none}
.art-galeri figure{margin:0;scroll-snap-align:start;min-width:0}
.art-galeri img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:12px}
.art-galeri figcaption{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--ink-70)}
.art-galeri-nav:not([hidden]){display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:6px}
.art-galeri-nav span{min-width:44px;text-align:center;font-size:13px;font-weight:600;color:var(--ink-70)}
.art-galeri-nav button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1.5px solid var(--gold);background:#fff;color:var(--gold-deep);cursor:pointer}
.art-galeri-nav button svg{width:18px;height:18px}
.art-galeri-nav button:disabled{border-color:var(--rule);color:var(--ink-45);cursor:default}

/* konfigurator langkah 6: perkiraan biaya awal */
.kf-estimasi{margin:18px 0 6px;padding:18px 18px 16px;border-radius:12px;background:var(--navy);color:#fff}
.kf-estimasi-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.kf-estimasi-angka{margin:8px 0 0;font-size:17px;line-height:1.35}
.kf-estimasi-angka b{display:block;font-size:26px;line-height:1.2;color:#fff}
.kf-estimasi-court{margin:8px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.kf-estimasi-court b{color:#fff}
.kf-estimasi ul{margin:12px 0 0;padding:12px 0 0 18px;border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.kf-estimasi li + li{margin-top:5px}

/* artikel berharga: kartu konfigurator sebagai ajakan utama */
.art-rancang{margin:22px 0 28px;scroll-margin-top:96px}
.art-rancang .kf-masuk{margin:0;text-decoration:none}
.art-rancang-alt{margin:12px 0 0;font-size:14.5px;color:var(--ink-70)}
.art-rancang-alt a{font-weight:700;color:var(--ink);text-underline-offset:3px;display:inline-block;padding:12px 0;margin:-12px 0}
.art-rancang-bukti{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-45)}
.art-rancang-bukti a{color:inherit;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:13px 0;margin:-13px 0}
.kt-rancang{padding-top:44px;padding-bottom:0}
.kt-rancang .kf-masuk{margin:0;color:#fff;text-decoration:none}
.kf-bukti{margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.5}
.kf-bukti a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* HP, artikel berharga: judul, harga, dan foto utama muat di layar pertama.
   Tanggal disembunyikan dan tautan kotak harga dilepas, karena kartu konfigurator tepat di bawah foto. */
@media (max-width:620px){
  .art-kepala:has(.art-harga) .art-info{display:none}
  .art-kepala:has(.art-harga) .art-harga{margin-top:18px}
  .art-harga a{display:none}
}

/* ---------- navigasi instan ----------
   Perpindahan halaman memudar singkat; header dan tombol WA tetap di tempat. */
@view-transition{navigation:auto}
header.site{view-transition-name:kepala}
.wa-tombol{view-transition-name:wa-tombol}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}