/* Mockup PT Shaka Kharisma Bagja.
   Acuan: docs/03-design-doc.md (token bagian 12), docs/02-ui-ux-doc.md.
   Tanpa gradasi, tanpa animasi, tanpa transisi: perubahan warna terjadi seketika. */

/* ---------- Huruf (di-host sendiri, OFL 1.1, subset Latin) ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}

/* ---------- Token ---------- */
:root{
  --color-blue:#0766B8;
  --color-red:#E70F1C;
  --color-dark:#101820;
  --color-white:#FFFFFF;
  --color-blue-tint:#EEF5FB;
  --color-blue-hover:#055394;
  --color-red-hover:#C50D18;
  --color-text-secondary:#4A5560;
  --color-text-muted:#6B7785;
  --color-border:#E2E8EE;
  --color-footer-text:#B8C2CC;
  --color-whatsapp:#25D366;      /* JAWABAN D-2 */
  --color-placeholder:#D5DBE1;   /* hanya untuk kotak pengganti foto */
  --font-heading:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radius-sm:8px;
  --radius-md:12px;
  --container:1200px;
  --gutter:24px;
  --section-y:56px;
  --header-h:60px;
}
@media (min-width:768px){:root{--gutter:40px}}
@media (min-width:1024px){:root{--section-y:96px;--header-h:72px}}

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 16px);scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
body{margin:0;background:var(--color-white);color:var(--color-dark);font:400 16px/26px var(--font-body)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--color-blue)}
a:hover{color:var(--color-blue-hover)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:var(--color-white)}

.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:200;padding:12px 16px;background:var(--color-white);border-radius:var(--radius-sm);font:600 16px/20px var(--font-heading)}
.skip-link:focus{top:8px}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.no-js .js-only,.js .no-js-only{display:none}

h1,h2,h3{font-family:var(--font-heading);text-wrap:balance}
h1{font-weight:700;font-size:30px;line-height:38px}
h2{font-weight:600;font-size:26px;line-height:34px}
h3{font-weight:600;font-size:19px;line-height:27px}
.text-small{font-size:14px;line-height:22px;color:var(--color-text-secondary)}
@media (min-width:768px){
  h1{font-size:44px;line-height:52px}
  h2{font-size:34px;line-height:42px}
  h3{font-size:22px;line-height:30px}
}


/* ---------- Tombol ---------- */
/* 16 px di semua lebar: putih di atas SKB Red hanya lolos untuk teks 16 px tebal (Design Doc 3.3) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--radius-sm);font:600 16px/20px var(--font-heading);text-decoration:none;cursor:pointer}
.btn--primary{background:var(--color-red);color:var(--color-white)}
.btn--primary:hover{background:var(--color-red-hover);color:var(--color-white)}
.btn--on-blue{background:var(--color-white);color:var(--color-blue)}
.btn--on-blue:hover{background:var(--color-blue-tint);color:var(--color-blue)}
.btn--secondary{background:var(--color-white);border-color:var(--color-blue);color:var(--color-blue)}
.btn--secondary:hover{background:var(--color-blue-tint);color:var(--color-blue)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 16px/20px var(--font-heading);text-decoration:none}
.link-arrow:hover{text-decoration:underline}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:var(--color-white);border-bottom:1px solid var(--color-border);color:var(--color-dark)}
.site-header__inner{display:flex;align-items:center;gap:16px;height:100%}
.logo{display:inline-flex;align-items:center;flex:none;color:inherit;text-decoration:none}
/* Brand guideline: logo horizontal minimal 160 px. Gambar logo mengisi 94,3 persen lebar berkas SVG
   (sisanya ruang kosong bawaan berkas), jadi lebar <img> 170 px = logo 160 px. */
.logo img{width:170px;height:auto}
@media (min-width:1024px){.logo img{width:188px}}
.logo__img--dark{display:none}

.nav{display:none;align-self:stretch;margin-left:32px}
.nav__list{display:flex;gap:20px;height:100%}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{display:inline-flex;align-items:center;gap:4px;padding:6px 0 4px;border:0;border-bottom:2px solid transparent;background:none;color:inherit;font:600 15px/20px var(--font-heading);text-decoration:none;cursor:pointer}
.nav__link:hover{color:var(--color-blue)}
.nav__link[aria-current="page"]{border-bottom-color:var(--color-red)}
.nav__link .icon{width:16px;height:16px;stroke-width:2}

.header-tools{display:flex;align-items:center;gap:12px;margin-left:auto}
.lang{display:none;align-items:center;gap:8px;font:600 16px/20px var(--font-heading)}
.lang a{color:var(--color-text-muted);text-decoration:none}
.lang a:hover{color:var(--color-blue)}
.lang a[aria-current="true"]{color:var(--color-dark)}
.lang__sep{color:var(--color-text-muted)}
.header-cta{display:none;min-height:44px;padding:0 20px;white-space:nowrap}
/* JAWABAN B-1: di layar sempit tombol Hubungi Kami di header disembunyikan, logo tetap 160 px */
@media (min-width:480px){.header-cta{display:inline-flex}}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:inherit;cursor:pointer}
.menu-btn:hover{color:var(--color-blue)}

@media (min-width:1024px){
  .nav{display:block}
  .lang{display:inline-flex}
  .header-tools{gap:16px}
  .menu-btn{display:none}
}
@media (min-width:1280px){.nav__list{gap:32px}.header-tools{gap:24px}}

/* Header transparan di atas hero: hanya bila JavaScript aktif dan halaman di puncak */
.js .site-header--overlay.is-top{background:transparent;border-bottom-color:transparent;color:var(--color-white)}
.js .site-header--overlay.is-top .logo__img--light{display:none}
.js .site-header--overlay.is-top .logo__img--dark{display:flex}
.js .site-header--overlay.is-top .nav__link:hover,
.js .site-header--overlay.is-top .menu-btn:hover,
.js .site-header--overlay.is-top .lang a:hover{color:var(--color-footer-text)}
.js .site-header--overlay.is-top .lang a,
.js .site-header--overlay.is-top .lang__sep{color:var(--color-footer-text)}
.js .site-header--overlay.is-top .lang a[aria-current="true"]{color:var(--color-white)}
.js .site-header--overlay.is-top :focus-visible{outline-color:var(--color-white)}

/* Mega menu Perusahaan */
.mega{display:none;position:absolute;top:100%;left:-16px;width:400px;padding-top:8px;color:var(--color-dark)} /* padding-top = jembatan kursor */
.mega-toggle[aria-expanded="true"] + .mega,
.no-js .has-mega:hover .mega,
.no-js .has-mega:focus-within .mega{display:block}
.mega__panel{padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);box-shadow:0 12px 32px rgb(16 24 32 / .12)}
.mega__option{display:flex;gap:16px;align-items:center;padding:12px;border-radius:var(--radius-sm);text-decoration:none}
.mega__option:hover{background:var(--color-blue-tint)}
.mega__icon{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-blue-tint);color:var(--color-blue)}
.mega__option:hover .mega__icon{background:var(--color-white)}
.mega__title{display:block;color:var(--color-blue);font:600 16px/24px var(--font-heading)}
.mega__desc{display:block;color:var(--color-text-secondary);font:400 14px/22px var(--font-body)}
/* Menu Layanan bertingkat, membuka ke samping (PERTANYAAN N-27). Tanpa animasi: hanya jeda 0,2 detik sebelum submenu menutup,
   supaya kursor yang bergerak miring ke submenu tidak kehilangan menunya. */
.mega--menu{width:280px}
@media (min-width:1024px) and (max-width:1279px){.mega--menu{left:-120px}}   /* tiga tingkat harus muat di layar 1024 px */
.menu__list{margin:0;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);box-shadow:0 12px 32px rgb(16 24 32 / .12);list-style:none}
.menu__item{position:relative}
.menu__link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--radius-sm);color:var(--color-dark);font:600 15px/22px var(--font-heading);text-decoration:none}
.menu__link .icon{flex:none;width:16px;height:16px;color:var(--color-text-muted)}
.menu__item:hover > .menu__link,.menu__item:focus-within > .menu__link{background:var(--color-blue-tint);color:var(--color-blue)}
.menu__sub{position:absolute;top:-7px;left:100%;width:250px;margin-left:2px;visibility:hidden;transition:visibility 0s linear .2s}
.menu__sub .menu__sub{width:220px}
.has-sub:hover > .menu__sub,.has-sub:focus-within > .menu__sub{visibility:visible;transition-delay:0s}
.menu__item--all{margin-top:6px;padding-top:6px;border-top:1px solid var(--color-border)}
.menu__item--all .menu__link{justify-content:flex-start;color:var(--color-blue)}
.menu__item--all .menu__link .icon{color:var(--color-blue)}
.mobile-menu__deep a{padding-left:36px;color:var(--color-text-secondary);font:400 15px/22px var(--font-body)}
.mobile-menu__group{padding:12px 0 2px 16px;color:var(--color-text-secondary);font:600 12px/18px var(--font-heading);letter-spacing:.04em;text-transform:uppercase}
.mega__all{display:flex;align-items:center;gap:8px;margin-top:4px;padding:12px;border-top:1px solid var(--color-border);color:var(--color-blue);font:600 15px/20px var(--font-heading);text-decoration:none}
.mega__all .icon{width:16px;height:16px}

/* ---------- Panel menu mobile (dialog penuh satu layar) ---------- */
.mobile-menu{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--color-white);color:var(--color-dark)}
.mobile-menu::backdrop{background:var(--color-white)}
.mobile-menu__head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.mobile-menu__list > li{border-bottom:1px solid var(--color-border)}
.mobile-menu__link,.mobile-menu summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;color:var(--color-dark);font:600 19px/27px var(--font-heading);text-decoration:none;cursor:pointer}
.mobile-menu__link:hover,.mobile-menu summary:hover{color:var(--color-blue)}
.mobile-menu__link[aria-current="page"]{color:var(--color-blue)}
.mobile-menu summary{list-style:none}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu details[open] summary .icon{transform:rotate(180deg)}
.mobile-menu__sub{padding-bottom:12px}
.mobile-menu__sub a{display:block;padding:10px 0 10px 16px;text-decoration:none}
.mobile-menu__sub .mega__title{font-size:16px}
.mobile-menu__foot{display:flex;flex-direction:column;gap:24px;padding-block:24px 32px}
.mobile-menu .lang{display:inline-flex}

/* ---------- Bagian ---------- */
.section{padding-block:var(--section-y)}
.section--tint{background:var(--color-blue-tint)}
.section--blue{background:var(--color-blue);color:var(--color-white)}
.section--dark{background:var(--color-dark);color:var(--color-white)}
.section__head{margin-bottom:32px}
.section__head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
@media (min-width:1024px){.section__head{margin-bottom:48px}}

/* Hero */
.hero{position:relative;display:flex;align-items:center;min-height:72svh;margin-top:calc(-1 * var(--header-h));padding-top:calc(var(--header-h) + 32px);padding-bottom:48px;background:var(--color-dark);color:var(--color-white)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:rgb(16 24 32 / .55)}  /* lapisan SKB Dark 45 sampai 55 persen (Design Doc 9). Dengan foto contoh:
   55 persen = kontras teks putih terburuk 4,68:1; 50 persen hanya 4,05:1. Hitung ulang bila foto diganti. */
.hero__content{position:relative}
/* H1 hero: skala Design Doc 4, 34/42 di ponsel dan 52/60 di desktop */
.hero h1{max-width:960px;font-size:34px;line-height:42px}
.hero__lead{max-width:720px;margin-top:16px;color:var(--color-white)}
.hero .btn{margin-top:32px}
@media (min-width:768px){
  .hero{padding-bottom:72px}
  .hero h1{font-size:52px;line-height:60px}
  .hero__lead{margin-top:24px;font-size:18px;line-height:30px}
}
@media (min-width:1024px){.hero{min-height:min(100svh,880px);padding-bottom:64px}}   /* teks di tengah tegak, sedikit di atas titik tengah (N-56) */

/* Kartu layanan */
.cards{display:grid;gap:24px}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards--4{grid-template-columns:repeat(4,1fr)}}
.card{display:block;height:100%;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);color:var(--color-dark);text-decoration:none}
.card .icon{width:28px;height:28px;margin-bottom:20px;color:var(--color-blue)}
.card p{margin-top:8px;color:var(--color-text-secondary)}
a.card:hover{border-color:var(--color-blue);color:var(--color-dark)}
a.card:hover :is(h2,h3){color:var(--color-blue)}
.card .link-arrow{margin-top:12px;color:var(--color-blue)}
.card .link-arrow .icon{width:20px;height:20px;margin:0}

/* Cara kerja */
.steps{display:grid;gap:32px;counter-reset:step}
@media (min-width:768px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,1fr);gap:24px}.steps--3{grid-template-columns:repeat(3,1fr);row-gap:40px}}
.steps li{counter-increment:step;padding:24px;border:1px solid var(--color-border);border-top:4px solid var(--color-blue);border-radius:var(--radius-md);background:var(--color-white)}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:12px;color:var(--color-blue);font:700 40px/44px var(--font-heading)}
.steps p{margin-top:8px;color:var(--color-text-secondary)}

/* Mengapa + angka */
.why{display:grid;gap:40px}
@media (min-width:1024px){.why{grid-template-columns:7fr 5fr;gap:24px;align-items:start}}
.why__points{display:grid;gap:24px}
.why__points p{margin-top:4px;color:var(--color-text-secondary)}
/* Dua kolom: dua butir = satu baris, tiga atau empat butir = dua baris, tanpa mengubah CSS atau tata letak bagian.
   ponytail: angka 56 px muat sampai sekitar 5 karakter per kolom di desktop; angka lebih panjang perlu ukuran lebih kecil. */
.stats{padding:32px 24px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white)}
@media (min-width:1280px){.stats{margin-left:72px;padding:40px}}
.stats__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}
.stats__list div{display:flex;flex-direction:column-reverse;justify-content:flex-end}     /* angka di atas, label di bawah; urutan baca tetap label lalu angka */
.stats dt{margin-top:4px;color:var(--color-text-secondary);font-size:14px;line-height:22px}
.stats dd{color:var(--color-blue);font:600 32px/36px var(--font-heading);letter-spacing:-.01em}
@media (min-width:768px){.stats dd{font-size:40px;line-height:44px}}
/* kolom kanan sempit di 1024 sampai 1279 px: angka 56 px meluap dari kolomnya */
@media (min-width:1024px) and (max-width:1279px){.stats dd{font-size:36px;line-height:40px}}

/* Galeri proyek */
.projects{display:grid;gap:32px 24px}
@media (min-width:768px){.projects{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.projects{grid-template-columns:repeat(3,1fr)}}
.js .projects--paged:not(.is-all) .project:nth-child(n+13){display:none}
.project__open{display:block;border-radius:var(--radius-md);background:var(--color-placeholder);cursor:zoom-in}   /* latar netral bila foto gagal dimuat */
.project__open img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md)}
.project:hover figcaption{background:var(--color-blue)}
.project figure{position:relative;height:100%}
.project figcaption{position:absolute;inset:auto 0 0;padding:14px 16px;border-radius:0 0 var(--radius-md) var(--radius-md);background:rgb(16 24 32 / .82);color:var(--color-footer-text);font-size:14px;line-height:22px;pointer-events:none}
.project figcaption strong{display:block;color:var(--color-white);font:600 16px/24px var(--font-heading)}
.projects__more{margin-top:40px;text-align:center}

/* Jangkauan */
.reach__statement{max-width:720px;margin-top:16px;font:600 19px/27px var(--font-heading)}
@media (min-width:768px){.reach__statement{font-size:22px;line-height:30px}}
.reach{display:grid;gap:32px;align-items:center}
.reach__map{width:100%;height:auto}
.reach__legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;padding:0;list-style:none;font-size:14px;color:var(--color-text-secondary)}
.reach__legend li{display:flex;align-items:center;gap:8px}
.reach__dot{width:12px;height:12px;border-radius:50%}
.reach__dot--area{background:var(--color-blue)}
.reach__dot--office{background:var(--color-red)}
@media (min-width:1024px){.reach{grid-template-columns:1fr 1.6fr;gap:64px}}

/* FAQ: <details> asli, buka-tutup seketika */
.faq{max-width:840px;border-top:1px solid var(--color-border)}
.faq details{border-bottom:1px solid var(--color-border)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 0;font:600 17px/26px var(--font-heading);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-blue)}
.faq summary .icon{margin-top:1px;color:var(--color-blue)}
.faq .icon--minus,.faq details[open] .icon--plus{display:none}
.faq details[open] .icon--minus{display:block}
.faq__answer{max-width:720px;padding:0 48px 24px 0;color:var(--color-text-secondary)}
@media (min-width:768px){.faq summary{font-size:19px;line-height:27px}}

/* Ajakan kontak */
.cta__text{max-width:840px;font:600 22px/30px var(--font-heading)}
@media (min-width:768px){.cta__text{font-size:30px;line-height:40px}}
.cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:32px}
.cta__email{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--color-white);font-weight:600}
.cta__email:hover{color:var(--color-blue-tint)}

/* Kepala halaman dalam */
.page-head{padding-block:48px 0}
.page-head--photo{position:relative;padding-block:56px;background:var(--color-dark);color:var(--color-white)}
.page-head__media{position:absolute;inset:0}
.page-head__media img{width:100%;height:100%;object-fit:cover}
.page-head__media::after{content:"";position:absolute;inset:0;background:rgb(16 24 32 / .72)}
.page-head--photo .container{position:relative}
.page-head.page-head--photo p{color:var(--color-white)}
.page-head.page-head--photo .crumb a{color:var(--color-white)}
.page-head.page-head--photo + .section{padding-top:var(--section-y)}
@media (min-width:1024px){.page-head--photo{padding-block:96px 80px}}
.page-head p{max-width:720px;margin-top:16px;color:var(--color-text-secondary);font-size:18px;line-height:30px}
@media (min-width:1024px){.page-head{padding-top:80px}}
.page-head + .section{padding-top:40px}
@media (min-width:1024px){.page-head + .section{padding-top:56px}}

/* ---------- Halaman dalam lain ---------- */
.h3{font-size:19px;line-height:27px}
@media (min-width:768px){.h3{font-size:22px;line-height:30px}}
.nav__link.is-active{border-bottom-color:var(--color-red)}
@media (min-width:1024px){.cards--2{grid-template-columns:repeat(2,1fr)}}
.page-head--solo{padding-bottom:var(--section-y)}
.empty p{color:var(--color-text-secondary);font-size:18px;line-height:30px}
.empty .btn,.empty__actions{margin-top:24px}
.empty__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.prose--lead{margin-top:0;margin-inline:auto}
.prose--lead p{font-size:18px;line-height:30px}
.about{display:grid;gap:40px}
.about .prose{margin-top:0}   /* sejajar dengan kartu Visi */
@media (min-width:1024px){.about{grid-template-columns:7fr 5fr;gap:48px;align-items:start}.about .prose--lead{max-width:none;margin-inline:0}}
.about__side{display:grid;gap:24px}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px}
@media (min-width:768px){.team{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.team{grid-template-columns:repeat(4,1fr)}.team.team--bod{grid-template-columns:repeat(3,1fr)}}   /* kartu pimpinan lebih besar */
.person__photo{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;margin-bottom:16px;border-radius:var(--radius-md);background:var(--color-placeholder);color:var(--color-text-muted)}
.person__photo .icon{width:40%;height:auto;stroke-width:1}
.person h3{font-size:17px;line-height:26px;text-wrap:wrap}   /* nama tidak dipecah seimbang: "Nadila / Salam, S.Ars." terlihat janggal */
.team--bod .person h3{font-size:19px;line-height:27px}
.person p{color:var(--color-text-secondary);font-size:14px;line-height:22px}
.contact{display:grid;gap:24px}
@media (min-width:768px){.contact{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}   /* tiga kolom baru muat mulai sekitar 1024 px */
.contact li{padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.contact a{display:inline-block;padding-block:9px;font-weight:600;overflow-wrap:anywhere}
.contact p{color:var(--color-text-secondary)}

.list{margin-top:8px;padding-left:20px;list-style:disc;color:var(--color-text-secondary)}
.list li + li{margin-top:8px}
/* Struktur organisasi: baris 2, 3, 4 kartu (N-28). Di ponsel semua dua kolom. */
.team--row2,.team--row3,.team--row4{justify-content:center}
.team--row2{grid-template-columns:repeat(2,minmax(0,280px))}
.team--row2 .person h3{font-size:19px;line-height:27px}
.team + .team{margin-top:32px}
@media (min-width:768px){.team--row3{grid-template-columns:repeat(3,minmax(0,260px))}.team--row4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.team--row4{grid-template-columns:repeat(4,minmax(0,260px))}}
.site-footer__address{margin-top:4px}
@media (min-width:1024px){.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.contact-layout .contact{grid-template-columns:1fr}}
.map{display:flex;min-height:360px;margin-top:24px;overflow:hidden;border-radius:var(--radius-md);background:var(--color-blue-tint)}   /* latar tampil selama peta dimuat */
.map iframe{flex:1;width:100%;min-height:360px;border:0}
@media (min-width:1024px){.map{min-height:100%;margin-top:0}}
.articles{display:grid;gap:32px 24px}
@media (min-width:768px){.articles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.articles{grid-template-columns:repeat(3,1fr)}}
.article-card{display:block;color:var(--color-dark);text-decoration:none}
.article-card__cover{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;overflow:hidden;margin-bottom:16px;border-radius:var(--radius-md);background:var(--color-blue-tint)}
.article-card__cover img{width:100%;height:100%;object-fit:cover}
.article-card__cover .article-card__mark{width:auto;height:72%;object-fit:contain}
.article-card__date{display:block;margin-bottom:4px;color:var(--color-text-secondary);font-size:14px;line-height:22px}
.article-card p{display:-webkit-box;overflow:hidden;margin-top:8px;color:var(--color-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.article-card:hover{color:var(--color-dark)}
.article-card:hover :is(h2,h3){color:var(--color-blue)}
.prose--article p{font-size:17px;line-height:28px}
@media (min-width:768px){.prose--article p{font-size:18px;line-height:30px}}

/* ---------- Halaman teks panjang: artikel dan legal (UI/UX 5.7) ----------
   Kolom bacanya dipusatkan, bukan menempel kiri. Sebelumnya .prose dibatasi 36rem
   tetapi rata kiri di dalam container 1200px, sehingga judul melebar penuh
   sementara isinya berkumpul di kiri dan sisi kanan kosong melompong. */
/* Dua tingkat lebar, keduanya dipusatkan pada sumbu yang sama:
   judul boleh melebar sampai 56rem supaya judul sedang muat satu baris,
   sedangkan paragraf tetap 42rem supaya satu baris tidak lebih dari sekitar
   70 karakter. Kolom selebar judul akan terbaca melelahkan untuk teks 18px. */
.legal > .container{max-width:calc(56rem + 2 * var(--gutter))}
.legal .prose{max-width:42rem;margin-inline:auto}
/* Artikel dilebarkan atas permintaan pemilik (N-68): 50rem, sekitar 85 karakter per baris pada 18px. Halaman legal tetap 42rem. */
.legal .prose--article,.legal .prose--article + .updated{max-width:50rem;margin-inline:auto}
@media (min-width:768px){.legal h1{font-size:34px;line-height:44px}}
/* judul dan tanggal dipusatkan: kalau rata kiri, tepinya tidak sejajar dengan
   paragraf yang lebih sempit dan justru terlihat meleset */
.legal h1,.legal__dates{text-align:center}
.legal h1{margin-bottom:12px}
.legal__dates{color:var(--color-text-secondary);font-size:14px;line-height:22px}
.prose{max-width:36rem;margin-top:32px}
.prose h2{margin:40px 0 12px;font-size:19px;line-height:27px}
.prose > h2:first-child{margin-top:0}
.updated{margin-top:32px;color:var(--color-text-muted);font-size:14px;line-height:22px}
.prose p + p,.prose ul + p,.prose p + ul,.prose .table-wrap + p{margin-top:16px}
.prose ul{padding-left:20px;list-style:disc}
.prose li + li{margin-top:8px}
.prose code{font-size:14px}
.table-wrap{overflow-x:auto}                      /* tabel bergulir di dalam wadahnya (Q-709) */
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:22px}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.prose th{font-family:var(--font-heading);font-weight:600}
@media (min-width:768px){.prose h2{font-size:22px;line-height:30px}}

/* ---------- Tombol WhatsApp melayang ---------- */
/* Tanpa JavaScript: dok setinggi 0 yang menempel di bawah viewport selama .page masih terlihat.
   Saat footer masuk, dok tertahan di ujung .page, jadi tombol naik dan tidak pernah menutupi footer. */
.wa-dock{position:sticky;bottom:0;z-index:50;height:0;pointer-events:none}
.wa-float{position:absolute;right:24px;bottom:24px;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--color-whatsapp);color:var(--color-white);text-decoration:none;pointer-events:auto}
.wa-float:hover{color:var(--color-white)}
.wa-float:focus-visible{outline-offset:3px}
.wa-float img{width:28px;height:28px}   /* glyph putih resmi di atas hijau resmi #25D366; berkas tidak diubah */
html:has(dialog[open]) .wa-float{display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-dark);color:var(--color-footer-text);font-size:14px;line-height:22px}
.site-footer__main{display:grid;gap:40px;padding-block:56px 40px}
@media (min-width:768px){.site-footer__main{grid-template-columns:2fr 1fr 1fr;gap:24px;padding-block:72px 56px}}
.site-footer .logo{color:var(--color-white)}
.site-footer__name{margin-top:16px;color:var(--color-white);font:600 16px/24px var(--font-heading)}
.site-footer h2{margin-bottom:8px;color:var(--color-white);font:600 16px/24px var(--font-heading)}
/* tinggi tautan 44 px supaya mudah disentuh di ponsel */
.site-footer a{display:inline-block;padding-block:11px;color:var(--color-footer-text);text-decoration:none}
.site-footer .logo{display:inline-flex;padding:0}
@media (min-width:1024px){.site-footer a{padding-block:5px}.site-footer .logo{padding:0}}
.site-footer a:hover{color:var(--color-white)}
.site-footer__legal{display:flex;flex-direction:column;gap:16px;padding-block:24px;border-top:1px solid rgb(255 255 255 / .16)}
.site-footer__legal ul{display:flex;flex-direction:column}
@media (min-width:768px){
  .site-footer__legal{flex-direction:row;align-items:center;justify-content:space-between}
  .site-footer__legal ul{flex-direction:row;gap:24px}
}

/* ---------- Foto diperbesar ---------- */
.lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgb(16 24 32 / .92);color:var(--color-white)}
.lightbox::backdrop{background:transparent}
.lightbox__stage{display:flex;align-items:center;justify-content:center;height:100%;padding:72px 16px 24px}
@media (min-width:768px){.lightbox__stage{padding:72px 96px 40px}}
.lightbox figure{width:100%;max-width:min(1040px,calc((100dvh - 200px) * 16 / 9))}
.lightbox__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);background:var(--color-dark);box-shadow:0 16px 48px rgb(0 0 0 / .4)}
.lightbox figcaption{margin-top:16px;color:var(--color-white);font-size:14px;line-height:22px}
.lightbox figcaption strong{display:block;font-weight:600}
.lightbox__btn{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgb(16 24 32 / .6);color:var(--color-white);cursor:pointer}
.lightbox__btn:hover{background:var(--color-dark);color:var(--color-footer-text)}
.lightbox__btn--close{top:12px;right:12px}
.lightbox__btn--prev{left:8px;top:50%;margin-top:-24px}
.lightbox__btn--next{right:8px;top:50%;margin-top:-24px}
@media (min-width:768px){
  .lightbox__btn--close{top:16px;right:24px}
  .lightbox__btn--prev{left:24px}
  .lightbox__btn--next{right:24px}
}

/* Halaman per layanan */
.crumb{margin-bottom:8px;font:600 14px/22px var(--font-heading)}
.crumb a{text-decoration:none}
/* Kolom teks layanan memakai hampir seluruh lebar kolomnya; sebelumnya .prose
   dibatasi 36rem sehingga menyisakan 240px kosong sebelum sidebar. Ukuran teks
   ikut naik ke 17px supaya satu baris tetap sekitar 80 karakter. */
.service .prose{max-width:44rem}
@media (min-width:1024px){.service .prose p,.service .prose li{font-size:17px;line-height:28px}}
.service{display:grid;gap:48px}
.service__photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);background:var(--color-placeholder)}
.service__side{padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white)}
.service__side ul{margin:12px 0 24px}
.service__side li a{display:flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}   /* tanpa ikon (N-57) */
@media (min-width:1024px){
  .service{grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
  .service__side{position:sticky;top:calc(var(--header-h) + 24px)}
}

/* Halaman utama: proyek unggulan (foto pertama besar) */
.project__scope{display:none;margin-top:4px;color:var(--color-white)}
@media (min-width:1024px){
  .projects--featured .project:first-child .project__scope{display:block}
  .projects--featured .project:first-child{grid-column:span 2;grid-row:span 2}
  .projects--featured .project:first-child .project__open{height:100%}
  .projects--featured .project:first-child img{height:100%;aspect-ratio:auto}
  .projects--featured .project:first-child figcaption{padding:20px 24px;font-size:16px;line-height:26px}
  .projects--featured .project:first-child figcaption strong{font-size:22px;line-height:30px}
}

/* Putaran 10: kartu berfoto, pita gelap, FAQ dua kolom */
.card--photo{display:flex;flex-direction:column;overflow:hidden;padding:0}
.card__photo{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--color-placeholder)}
.card__body{display:flex;flex:1;flex-direction:column;padding:20px 24px}   /* tanpa ikon kartu (N-55) */
.card--photo .link-arrow{margin-top:auto;padding-top:12px}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero .hero__actions .btn{margin-top:0}
.btn--ghost{border-color:var(--color-white);color:var(--color-white)}
.btn--ghost:hover{background:var(--color-white);color:var(--color-dark)}
.section--dark .why__points p{color:var(--color-footer-text)}
.why__points li{display:flex;gap:16px;align-items:flex-start}   /* centang dikembalikan atas permintaan pemilik (N-62) */
.why__points .icon{flex:none;width:32px;height:32px;padding:6px;border-radius:50%;background:var(--color-blue);color:var(--color-white);stroke-width:2.5}
.section--dark .stats{border-color:rgb(255 255 255 / .16);background:rgb(255 255 255 / .06)}
.section--dark .stats dd{color:var(--color-white)}
.section--dark .stats dt{color:var(--color-footer-text)}
.faq-layout .section__head p{margin:16px 0 24px;color:var(--color-text-secondary)}
@media (min-width:1024px){
  .faq-layout{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start}
  .faq-layout .section__head{position:sticky;top:calc(var(--header-h) + 24px);margin-bottom:0}
}

/* Putaran 12: halaman Layanan tiga kelompok, kolom samping berkelompok, subjudul di halaman SDA */
@media (min-width:1024px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.section__head > p{max-width:720px;margin-top:12px;color:var(--color-text-secondary)}
.service__group{margin-top:16px;color:var(--color-text-secondary);font:600 12px/18px var(--font-heading);letter-spacing:.04em;text-transform:uppercase}
.service__side .service__group + ul{margin:4px 0 0}
.service__side ul:last-of-type{margin-bottom:24px}
.prose h3{margin:24px 0 8px;font-size:17px;line-height:26px}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* Gerak (PERTANYAAN N-51, menggantikan B-3): hero bergantian, muncul saat digulir, kartu terangkat saat disorot.
   Kelas is-sliding, reveal, dan is-in hanya dipasang main.js; tanpa JavaScript semuanya diam dan tampil. */
.hero__media{overflow:hidden}
.hero__media img{position:absolute;inset:0}
.hero__media.is-sliding img{opacity:0;transform:scale(1);transition:opacity 1.2s ease,transform 0s linear 1.2s}   /* skala kembali setelah selesai memudar */
.hero__media.is-sliding img.is-active{opacity:1;transform:scale(1.08);transition:opacity 1.2s ease,transform 8s linear}
@media (max-width:767px){.hero{padding-bottom:64px}}   /* ruang untuk titik foto di bawah tombol */
.hero__controls{position:absolute;bottom:12px;left:50%;z-index:1;display:flex;align-items:center;transform:translateX(-50%)}
.hero__dot{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.hero__dot::before{content:"";width:8px;height:8px;border-radius:4px;background:rgb(255 255 255 / .5);transition:width .3s ease,background-color .3s ease}
.hero__dot:hover::before{background:var(--color-white)}
.hero__dot[aria-current="true"]::before{width:24px;background:var(--color-white)}
.hero__controls :focus-visible{outline:2px solid var(--color-white);outline-offset:-2px;border-radius:6px}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
a.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
a.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgb(16 24 32 / .12)}
.card__photo,.project__open img,.article-card__cover{transition:transform .6s ease}
a.card:hover .card__photo{transform:scale(1.05)}
.article-card:hover .article-card__cover{transform:scale(1.03)}
.project__open{overflow:hidden}
.project__open:hover img{transform:scale(1.04)}
/* Gerak tambahan (PERTANYAAN N-53): teks kepala halaman naik masuk, foto kepala halaman zoom pelan, garis merah tergambar,
   header memudar, panah bergeser, garis langkah terisi berurutan, pita klien berjalan, titik kantor berdenyut. */
@keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes slow-zoom{to{transform:scale(1.1)}}
@keyframes clients-run{to{transform:translateX(-100%)}}
@keyframes office-ping{from{box-shadow:0 0 0 0 rgb(231 15 28 / .5)}to{box-shadow:0 0 0 10px rgb(231 15 28 / 0)}}
.hero__content > *,.page-head .container > *{animation:rise-in .8s cubic-bezier(.2,.7,.2,1) both}
.hero__content > :nth-child(2),.page-head .container > :nth-child(2){animation-delay:.15s}
.hero__content > :nth-child(3),.page-head .container > :nth-child(3){animation-delay:.3s}
.page-head__media{overflow:hidden}
.page-head__media img{animation:slow-zoom 20s ease-in-out infinite alternate}
.site-header{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.js .site-header--overlay .logo{position:relative}
.js .site-header--overlay .logo img{transition:opacity .35s ease}
.js .site-header--overlay .logo__img--dark{display:block;position:absolute;top:50%;left:0;opacity:0;transform:translateY(-50%)}
.js .site-header--overlay.is-top .logo__img--light{display:block;opacity:0}   /* dua logo bertumpuk, berganti dengan memudar */
.js .site-header--overlay.is-top .logo__img--dark{display:block;opacity:1}
.link-arrow .icon{transition:transform .2s ease}
.link-arrow:hover .icon,a.card:hover .link-arrow .icon{transform:translateX(4px)}
.steps li.reveal{position:relative;border-top-color:var(--color-border)}
.steps li.reveal::after{content:"";position:absolute;top:-4px;right:-1px;left:-1px;height:4px;border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--color-blue);transform:scaleX(0);transform-origin:left;transition:transform .6s ease calc(var(--d, 0ms) + .35s)}
.steps li.reveal.is-in::after{transform:none}
.steps li.reveal::before{color:var(--color-border);transition:color .4s ease calc(var(--d, 0ms) + .6s)}
.steps li.reveal.is-in::before{color:var(--color-blue)}
.reach__dot--office{animation:office-ping 2.4s ease-out infinite}
.clients{margin-top:56px;padding-top:40px;border-top:1px solid rgb(255 255 255 / .12)}   /* di dalam bagian Mengapa yang gelap (N-54) */
.clients__label{color:var(--color-footer-text);font:600 13px/20px var(--font-heading);letter-spacing:.08em;text-align:center;text-transform:uppercase}
.clients__track{display:flex;overflow:hidden;margin-top:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.clients__list{display:flex;flex:none;animation:clients-run 45s linear infinite}
.clients__track:hover .clients__list{animation-play-state:paused}
.clients__list li{display:flex;align-items:center;gap:12px;padding-inline:28px;white-space:nowrap;color:var(--color-white);font:600 18px/28px var(--font-heading)}
.clients__list img{width:auto;height:40px}
.clients__name{text-box:trim-both cap alphabetic}   /* kotak teks = tinggi huruf kapital, jadi tengahnya tengah huruf (N-66) */
/* Geser tegak per logo menurut titik berat visual (tools/ukur_logo.swift, setengah selisih ke 0,5): logo berat di bawah naik, berat di atas turun */
.clients__list img[src*="polri"]{transform:translateY(-3px)}
.clients__list img[src*="bawaslu"],.clients__list img[src*="dlh"]{transform:translateY(-1px)}
.clients__list img[src*="diskominfo"]{transform:translateY(3px)}
.clients__list img[src*="diskominfo"]{height:30px}   /* logo tulisan melebar; disamakan bobotnya dengan lambang */
@media (max-width:767px){.clients__list li{gap:8px;padding-inline:18px;font-size:15px;line-height:24px}.clients__list img{height:30px}.clients__list img[src*="diskominfo"]{height:22px}}
@media (prefers-reduced-motion:reduce){
  .hero__media.is-sliding img,.hero__media.is-sliding img.is-active{transform:none;transition:none}
  .hero__dot::before,a.card,.card__photo,.project__open img,.article-card__cover{transition:none}
  a.card:hover,a.card:hover .card__photo,.project__open:hover img,.article-card:hover .article-card__cover{transform:none}
  .hero__content > *,.page-head .container > *,.page-head__media img,.reach__dot--office{animation:none}
  .site-header,.js .site-header--overlay .logo img,.link-arrow .icon{transition:none}
  .link-arrow:hover .icon,a.card:hover .link-arrow .icon{transform:none}
  .clients__list{animation:none}
  .clients__list[aria-hidden]{display:none}
  .clients__track{-webkit-mask-image:none;mask-image:none}
  .clients__list{flex-wrap:wrap;flex:1;justify-content:center;row-gap:16px}
}