/* =====================================================================
   Pingo Autoworks — website publik & portal pelanggan (Fase 8)
   Memakai token dari pingo.css (--pg-aksen, font Plus Jakarta Sans).
   Arah visual: grafit bengkel + kertas terang; aksen warna merek hanya
   untuk tindakan. Elemen khas: input bergaya pelat nomor & alur kerja.
   ===================================================================== */

.situs {
  --st-grafit: #1B1D21;
  --st-grafit-2: #24282E;
  --st-baja: #8A9099;
  --st-kertas: #FFFFFF;
  --st-semen: #EEF0EE;
  --st-garis: #DDE0DC;
  --st-teks: #17191C;
  --st-teks-lemah: #5E636B;
  --st-lebar-baca: 68ch;
  background: var(--st-kertas);
  color: var(--st-teks);
  font-size: 1rem;
  --bs-body-font-size: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.situs main { flex: 1; }
.situs h1, .situs h2, .situs h3 { color: inherit; }
.situs a { text-underline-offset: .2em; }
.situs :focus-visible { outline: 3px solid color-mix(in srgb, var(--pg-aksen) 70%, #fff); outline-offset: 2px; }
.lewati-ke-isi { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: .5rem 1rem; }
.lewati-ke-isi:focus { left: 1rem; top: 1rem; }
.kolom-jebakan { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Kepala situs ---------- */
.situs-kepala { background: var(--st-kertas); border-bottom: 1px solid var(--st-garis); position: sticky; top: 0; z-index: 1030; }
.situs-kepala .navbar { padding: .65rem 0; }
.situs-merek { display: inline-flex; align-items: center; gap: .6rem; color: var(--st-teks); text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.situs-merek:hover { color: var(--st-teks); }
.situs-logo { width: 36px; height: 36px; border-radius: 9px; background: var(--pg-aksen); color: #fff; display: inline-grid; place-items: center; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.situs-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.situs-toggler { border: 1px solid var(--st-garis); padding: .35rem .6rem; font-size: 1.25rem; color: var(--st-teks); }
.situs-toggler:focus { box-shadow: none; }
.situs-nav { margin-left: auto; gap: .15rem; }
.situs-nav .nav-link { color: var(--st-teks-lemah); font-weight: 600; font-size: .92rem; padding: .5rem .7rem !important; border-radius: 8px; }
.situs-nav .nav-link:hover { color: var(--st-teks); background: var(--st-semen); }
.situs-nav .nav-link.aktif { color: var(--st-teks); box-shadow: inset 0 -2px 0 var(--pg-aksen); border-radius: 0; }
.situs-aksi { display: flex; gap: .5rem; align-items: center; margin-left: 1rem; }
@media (max-width: 991.98px) {
  .situs-nav { margin: .75rem 0 .25rem; }
  .situs-nav .nav-link.aktif { box-shadow: inset 3px 0 0 var(--pg-aksen); }
  .situs-aksi { margin: .5rem 0 .75rem; }
}
.situs-flash .alert { margin-bottom: .5rem; }

/* ---------- Beranda: hero ---------- */
.beranda-hero { background: var(--st-grafit); color: #F3F4F5; padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden; }
.beranda-hero::before {
  /* garis lantai bengkel samar, bukan gradien dekoratif */
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(255,255,255,.045) calc(12.5% - 1px) 12.5%);
  pointer-events: none;
}
.beranda-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; position: relative; }
@media (min-width: 992px) { .beranda-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); align-items: center; gap: 4rem; } }
.beranda-hero-nama { color: var(--st-baja); font-weight: 600; margin-bottom: .75rem; font-size: .95rem; }
.beranda-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; max-width: 16ch; margin-bottom: 1.1rem; color: #fff; }
.beranda-hero-sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #C3C7CD; max-width: 52ch; line-height: 1.6; margin-bottom: 1.75rem; }
.beranda-hero-aksi { display: flex; gap: .75rem; flex-wrap: wrap; }
.beranda-hero-aksi .btn-lg { padding: .75rem 1.3rem; font-size: 1rem; }
.btn-hero-garis { border: 1px solid rgba(255,255,255,.28); color: #fff; background: transparent; }
.btn-hero-garis:hover, .btn-hero-garis:focus { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.beranda-hero-jam { color: var(--st-baja); margin: 1.5rem 0 0; font-size: .9rem; }

/* Kartu cek status di hero: dua kolom, nomor polisi bergaya pelat */
.beranda-cek { background: var(--st-grafit-2); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1.5rem; }
.beranda-cek h2 { font-size: 1.15rem; margin-bottom: .35rem; color: #fff; }
.beranda-cek p { color: #AEB3BA; font-size: .9rem; margin-bottom: 1.1rem; }
.beranda-cek .form-label { color: #D5D8DC; }
.beranda-cek .form-control { background: #fff; }
.input-plat {
  background: #111 !important; color: #fff !important; border: 2px solid #fff !important; outline: 1px solid #111;
  font-weight: 700; font-size: 1.25rem; letter-spacing: .14em; text-align: center; text-transform: uppercase;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; border-radius: 6px !important;
}
.input-plat::placeholder { color: #8b8f95; letter-spacing: .14em; }
.situs-formulir .input-plat { border-color: #111 !important; outline: none; }

/* ---------- Bagian beranda ---------- */
.beranda-bagian { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.beranda-judul { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.025em; margin-bottom: .6rem; }
.beranda-sub { color: var(--st-teks-lemah); max-width: 60ch; margin-bottom: 2rem; font-size: 1.02rem; }
.beranda-kepala-bagian { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.beranda-kepala-bagian a { font-weight: 600; color: var(--pg-aksen-gelap); }
.beranda-gelap { background: var(--st-grafit); color: #F3F4F5; }
.beranda-gelap .beranda-kepala-bagian a { color: #fff; }

/* Alur kerja: urutan nyata dari booking sampai serah terima */
.alur-kerja { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; counter-reset: alur; border-top: 2px solid var(--st-teks); }
@media (min-width: 768px) { .alur-kerja { grid-template-columns: repeat(5, 1fr); } }
.alur-kerja li { counter-increment: alur; padding: 1.1rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--st-garis); }
@media (min-width: 768px) { .alur-kerja li { border-bottom: 0; padding-right: 1.5rem; } }
.alur-kerja li::before { content: counter(alur); display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--st-teks); color: #fff; font-weight: 700; font-size: .85rem; margin-bottom: .75rem; }
.alur-kerja li:last-child::before { background: var(--pg-aksen); }
.alur-kerja h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.alur-kerja p { color: var(--st-teks-lemah); font-size: .92rem; margin: 0; line-height: 1.55; }

/* Layanan: daftar bergaris, bukan kartu seragam */
.beranda-layanan { background: var(--st-semen); }
.daftar-layanan { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--st-garis); }
@media (min-width: 768px) { .daftar-layanan { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.daftar-layanan li { border-bottom: 1px solid var(--st-garis); }
.daftar-layanan a { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 0; color: inherit; text-decoration: none; }
.daftar-layanan a:hover strong { color: var(--pg-aksen-gelap); text-decoration: underline; }
.daftar-layanan-ikon { width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--st-kertas); border: 1px solid var(--st-garis); display: grid; place-items: center; font-size: 1.2rem; color: var(--pg-aksen); flex-shrink: 0; }
.daftar-layanan-foto { width: 5.5rem; height: 4rem; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.daftar-layanan-teks { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.daftar-layanan-teks strong { font-size: 1.05rem; }
.daftar-layanan-teks span { color: var(--st-teks-lemah); font-size: .92rem; line-height: 1.5; }
.daftar-layanan-durasi { font-size: .82rem !important; }
.daftar-layanan-harga { text-align: right; font-size: .78rem; color: var(--st-teks-lemah); white-space: nowrap; }
.daftar-layanan-harga strong { color: var(--st-teks); font-size: .98rem; }
.daftar-layanan-penuh { background: transparent; }

/* Kabar/promo: gulir horizontal tanpa JS */
.kabar-gulir { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 82%); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
@media (min-width: 768px) { .kabar-gulir { grid-auto-columns: minmax(320px, 46%); } }
@media (min-width: 1200px) { .kabar-gulir { grid-auto-columns: minmax(320px, 32%); } }
.kabar-item { scroll-snap-align: start; border: 1px solid var(--st-garis); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.kabar-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kabar-isi { padding: 1rem 1.1rem 1.2rem; }
.kabar-isi h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.kabar-isi p { color: var(--st-teks-lemah); font-size: .92rem; }

/* Portofolio: foto sebagai isi utama */
.porto-mosaik { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .porto-mosaik { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; } .porto-mosaik .porto-kartu-utama { grid-row: 1 / 3; } }
.porto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.porto-kartu { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--st-grafit-2); min-height: 220px; color: #fff; text-decoration: none; }
.porto-kartu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.porto-kartu:hover img { transform: scale(1.03); }
.porto-kartu-teks { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.1rem 1rem; background: linear-gradient(transparent, rgba(10,11,13,.85)); display: flex; flex-direction: column; gap: .15rem; }
.porto-kartu-teks strong { font-size: 1.08rem; }
.porto-kartu-teks span { color: #C9CDD2; font-size: .88rem; }
.porto-kartu:hover, .porto-kartu:focus { color: #fff; }
.porto-grid .porto-kartu { aspect-ratio: 4 / 3; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .porto-kartu img { transition: none; } .porto-kartu:hover img { transform: none; } }

/* Testimoni */
.testimoni-baris { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .testimoni-baris { grid-template-columns: repeat(3, 1fr); } }
.testimoni { margin: 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--pg-aksen); }
.testimoni blockquote { margin: .5rem 0 .75rem; }
.testimoni blockquote p { font-size: 1.02rem; line-height: 1.6; margin: 0; }
.testimoni figcaption { font-size: .9rem; display: flex; flex-direction: column; }
.testimoni figcaption span { color: var(--st-teks-lemah); }
.bintang-kosong { color: #D5D8DC; }

/* Artikel */
.artikel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.5rem; }
.artikel-kartu-tautan { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; }
.artikel-kartu-gambar { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--st-semen); display: grid; place-items: center; font-size: 2rem; color: var(--st-baja); margin-bottom: .85rem; }
.artikel-kartu-gambar img { width: 100%; height: 100%; object-fit: cover; }
.artikel-kartu-meta { font-size: .8rem; color: var(--st-teks-lemah); margin-bottom: .3rem; }
.artikel-kartu-isi strong { display: block; font-size: 1.08rem; line-height: 1.35; margin-bottom: .35rem; }
.artikel-kartu-tautan:hover strong { color: var(--pg-aksen-gelap); text-decoration: underline; }
.artikel-kartu-ringkas { color: var(--st-teks-lemah); font-size: .92rem; line-height: 1.55; }
.beranda-artikel { border-top: 1px solid var(--st-garis); }

.beranda-ajakan { background: var(--pg-aksen); color: #fff; padding: 2.5rem 0; }
.beranda-ajakan .container-xl { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.beranda-ajakan h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: .25rem; color: #fff; }
.beranda-ajakan p { margin: 0; color: rgba(255,255,255,.85); }
.beranda-ajakan .btn-aksen { background: #fff; color: var(--st-teks); border-color: #fff; }
.beranda-ajakan .btn-aksen:hover { background: var(--st-semen); color: var(--st-teks); }

/* ---------- Halaman dalam ---------- */
.situs-pratinjau { background: #FFF3BF; color: #5C4400; text-align: center; padding: .5rem 1rem; font-weight: 600; font-size: .9rem; }
.situs-judul-halaman { background: var(--st-semen); padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--st-garis); }
.situs-judul-halaman h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.03em; margin: 0; max-width: 24ch; }
.situs-judul-sub { color: var(--st-teks-lemah); font-size: 1.05rem; max-width: 62ch; margin: .75rem 0 0; }
.situs-jejak { list-style: none; padding: 0; margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .25rem; font-size: .85rem; color: var(--st-teks-lemah); }
.situs-jejak li + li::before { content: "/"; margin-right: .3rem; color: var(--st-baja); }
.situs-jejak a { color: var(--st-teks-lemah); }
.situs-bagian { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.situs-bagian-lembut { background: var(--st-semen); }
.situs-kosong { color: var(--st-teks-lemah); padding: 2rem 0; font-size: 1.02rem; }
.situs-catatan { color: var(--st-teks-lemah); font-size: .88rem; }
.situs-gambar-utama { width: 100%; max-height: 520px; object-fit: cover; border-radius: 12px; margin-bottom: 1.75rem; }
.situs-isi > .publik-kartu { margin: 2.5rem auto; }
.situs-isi > .polos-kartu { margin: 3rem auto; }

/* Isi rich-text */
.konten-web { max-width: var(--st-lebar-baca); font-size: 1.05rem; line-height: 1.75; }
.konten-web h2 { font-size: 1.45rem; margin: 2rem 0 .75rem; letter-spacing: -.02em; }
.konten-web h3 { font-size: 1.18rem; margin: 1.6rem 0 .6rem; }
.konten-web h4 { font-size: 1.02rem; margin: 1.4rem 0 .5rem; }
.konten-web p { margin-bottom: 1.05rem; }
.konten-web ul, .konten-web ol { padding-left: 1.3rem; margin-bottom: 1.1rem; }
.konten-web li { margin-bottom: .35rem; }
.konten-web blockquote { border-left: 3px solid var(--pg-aksen); padding: .25rem 0 .25rem 1.1rem; color: var(--st-teks-lemah); margin: 1.25rem 0; }
.konten-web img { max-width: 100%; height: auto; border-radius: 10px; margin: .5rem 0 1rem; }
.konten-web iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; margin: .5rem 0 1rem; }
.konten-web table { width: 100%; border-collapse: collapse; margin-bottom: 1.1rem; font-size: .95rem; }
.konten-web th, .konten-web td { border: 1px solid var(--st-garis); padding: .45rem .6rem; }
.konten-web a { color: var(--pg-aksen-gelap); }
.artikel-baca { max-width: var(--st-lebar-baca); }
.artikel-meta { color: var(--st-teks-lemah); font-size: .9rem; margin-bottom: 1.25rem; }
.video-web iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; margin-bottom: 1.5rem; }

/* Sisi */
.situs-sisi-kartu { border: 1px solid var(--st-garis); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; background: #fff; }
.situs-sisi-label { font-size: .85rem; color: var(--st-teks-lemah); margin-bottom: .1rem; }
.situs-sisi-harga { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; }
.situs-sisi-judul { font-size: 1rem; margin: 1.5rem 0 .6rem; }
.situs-sisi-daftar { list-style: none; padding: 0; margin: 0; }
.situs-sisi-daftar li { border-bottom: 1px solid var(--st-garis); }
.situs-sisi-daftar a { display: block; padding: .6rem 0; color: inherit; text-decoration: none; }
.situs-sisi-daftar a:hover { color: var(--pg-aksen-gelap); }
.situs-fakta { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin-bottom: 1.25rem; font-size: .95rem; }
.situs-fakta dt { color: var(--st-teks-lemah); font-weight: 500; }
.situs-fakta dd { margin: 0; }
.situs-fakta-sebaris { max-width: 34rem; margin: 1.25rem auto; text-align: left; }
.situs-langkah { padding-left: 1.2rem; }
.situs-langkah li { margin-bottom: .5rem; }

/* Galeri portofolio */
.galeri-judul { font-size: 1.15rem; margin: 2rem 0 .9rem; }
.galeri-web { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.galeri-web figure { margin: 0; }
.galeri-web img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; height: auto; }
.galeri-web figcaption { font-size: .85rem; color: var(--st-teks-lemah); padding-top: .3rem; }
.porto-utama { max-height: 600px; }

/* Artikel: saring */
.artikel-saring { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; align-items: center; }
.artikel-kategori { display: flex; gap: .4rem; flex-wrap: wrap; }
.artikel-kategori a { padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--st-garis); color: var(--st-teks); text-decoration: none; font-size: .9rem; }
.artikel-kategori a[aria-current] { background: var(--st-teks); color: #fff; border-color: var(--st-teks); }
.artikel-cari { display: flex; gap: .4rem; min-width: min(100%, 320px); }

/* Katalog */
.katalog-saring { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: end; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .katalog-saring { grid-template-columns: 2fr 1fr auto; } }
.katalog-daftar { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--st-garis); }
.katalog-daftar li { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--st-garis); align-items: center; }
@media (min-width: 768px) { .katalog-daftar li { grid-template-columns: 1fr 9rem 9rem auto; } }
.katalog-nama strong { display: block; }
.katalog-nama span { color: var(--st-teks-lemah); font-size: .85rem; }
.katalog-harga { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.katalog-harga small { font-weight: 400; color: var(--st-teks-lemah); }
.katalog-stok { font-size: .82rem; font-weight: 600; }
.katalog-stok.ada { color: #1B7F3B; }
.katalog-stok.inden { color: #9A6700; }

/* Formulir publik */
.situs-formulir fieldset { margin-bottom: 1.75rem; }
.situs-formulir legend { font-size: 1.05rem; font-weight: 700; margin-bottom: .9rem; padding-bottom: .4rem; border-bottom: 1px solid var(--st-garis); width: 100%; }
.situs-formulir .form-control, .situs-formulir .form-select { padding: .6rem .8rem; font-size: .98rem; }
.terima-kasih { max-width: 38rem; margin: 1rem auto; text-align: center; }
.terima-kasih-ikon { font-size: 3rem; color: #1B7F3B; }
.terima-kasih h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: .5rem 0 1rem; }
.situs-paginasi { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2.5rem; color: var(--st-teks-lemah); }
.situs-alamat p { display: flex; gap: .65rem; margin-bottom: .7rem; }
.situs-alamat .bi { margin-top: .2rem; flex-shrink: 0; }

/* ---------- Kaki situs ---------- */
.situs-kaki { background: var(--st-grafit); color: #B5BAC1; padding: 3rem 0 1.5rem; margin-top: auto; font-size: .93rem; }
.situs-kaki a { color: #E6E8EB; text-decoration: none; }
.situs-kaki a:hover { color: #fff; text-decoration: underline; }
.situs-merek-kaki { color: #fff; }
.situs-merek-kaki:hover { color: #fff; }
.situs-kaki-judul { font-size: .95rem; color: #fff; margin-bottom: .9rem; }
.situs-kaki-daftar { list-style: none; padding: 0; margin: 0; }
.situs-kaki-daftar li { margin-bottom: .45rem; }
.situs-sosial { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; }
.situs-sosial a { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; font-size: 1.05rem; }
.situs-kaki-bawah { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }
.situs-kaki-bawah a { color: #8E949C; }
.situs-alamat-terang { color: var(--st-teks); }

.situs-wa-mengambang { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; background: #1E8E4E; color: #fff; border-radius: 999px; padding: .7rem 1rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.situs-wa-mengambang:hover { color: #fff; background: #187A42; }
.situs-wa-mengambang .bi { font-size: 1.25rem; }
@media (max-width: 575.98px) { .situs-wa-mengambang span { display: none; } .situs-wa-mengambang { padding: .8rem; } }

/* ---------- Portal pelanggan ---------- */
.portal-kepala { background: var(--st-semen); border-bottom: 1px solid var(--st-garis); padding-top: 1.75rem; }
.portal-kepala-baris { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.portal-sapa { color: var(--st-teks-lemah); margin-bottom: .2rem; }
.portal-judul { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em; margin: 0; }
.portal-nav { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.portal-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .85rem; color: var(--st-teks-lemah); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.portal-nav a:hover { color: var(--st-teks); }
.portal-nav a.aktif { color: var(--st-teks); border-bottom-color: var(--pg-aksen); }
.portal-isi { padding: 2rem 0 3rem; }
.portal-sub-judul { font-size: 1.05rem; margin-bottom: .9rem; }
.portal-kosong { color: var(--st-teks-lemah); border: 1px dashed var(--st-garis); border-radius: 10px; padding: 1.25rem; }
.portal-catatan { color: var(--st-teks-lemah); font-size: .88rem; }
.portal-pengantar { max-width: 70ch; color: var(--st-teks-lemah); margin-bottom: 1.5rem; }
.portal-perlu { margin-bottom: 2rem; }
.portal-perlu-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--pg-aksen) 35%, #fff); background: var(--pg-aksen-lembut); border-radius: 12px; color: inherit; text-decoration: none; margin-bottom: .6rem; }
.portal-perlu-item > .bi { font-size: 1.4rem; color: var(--pg-aksen-gelap); }
.portal-perlu-item > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.portal-perlu-item > span:nth-child(2) span { color: var(--st-teks-lemah); font-size: .9rem; }
.portal-servis { display: block; border: 1px solid var(--st-garis); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .75rem; color: inherit; text-decoration: none; }
.portal-servis:hover { border-color: var(--st-baja); }
.portal-servis-atas { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.portal-tahap { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.portal-tahap-besar { grid-template-columns: repeat(5, 1fr); margin: 1rem 0; }
.portal-tahap > span, .portal-tahap > li { font-size: .75rem; color: var(--st-teks-lemah); padding-top: .5rem; border-top: 4px solid var(--st-garis); }
.portal-tahap > .lewat { color: var(--st-teks); border-top-color: var(--pg-aksen); font-weight: 600; }
.portal-baris { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--st-garis); color: inherit; text-decoration: none; }
.portal-baris > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.portal-kartu-sisi { border: 1px solid var(--st-garis); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; background: #fff; }
.portal-sisi-label { font-size: .85rem; color: var(--st-teks-lemah); margin-bottom: .3rem; }
.portal-poin { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.portal-poin small { font-size: .9rem; font-weight: 500; color: var(--st-teks-lemah); }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.portal-kendaraan { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; border: 1px solid var(--st-garis); border-radius: 12px; padding: 1.1rem; color: inherit; text-decoration: none; }
.portal-kendaraan:hover { border-color: var(--st-baja); }
.portal-riwayat { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--st-garis); }
.portal-riwayat li { position: relative; padding: 0 0 1.25rem 1.25rem; }
.portal-riwayat li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--pg-aksen); }
.portal-riwayat a { color: inherit; text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; }
.portal-riwayat p { margin: .25rem 0; }
.portal-item { list-style: none; padding: 0; margin: 0; }
.portal-item li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--st-garis); align-items: center; }
.portal-daftar-kartu { list-style: none; padding: 0; margin: 0; }
.portal-daftar-kartu li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border: 1px solid var(--st-garis); border-radius: 10px; padding: .85rem 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.portal-daftar-polos { list-style: none; padding: 0; margin: 0; }
.portal-tabel { font-size: .93rem; }
.portal-tabel th { font-weight: 600; color: var(--st-teks-lemah); font-size: .82rem; }
.portal-faktur { border: 1px solid var(--st-garis); border-radius: 12px; padding: 1.5rem; background: #fff; }
.portal-faktur-kepala { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--st-garis); padding-bottom: 1rem; }
.portal-proyek { border: 1px solid var(--st-garis); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.portal-proyek-atas { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.portal-proyek-aksi { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.portal-portofolio { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.portal-servis-kepala { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.portal-formulir { max-width: 52rem; }

/* Masuk portal */
.portal-masuk { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 60rem; margin: 0 auto; }
@media (min-width: 992px) { .portal-masuk { grid-template-columns: 1fr 1fr; align-items: start; gap: 3rem; } }
.portal-masuk-tunggal { max-width: 30rem; grid-template-columns: 1fr !important; }
.portal-masuk-kartu { border: 1px solid var(--st-garis); border-radius: 14px; padding: clamp(1.5rem, 4vw, 2.25rem); background: #fff; }
.portal-masuk-kartu h1 { font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: .4rem; }
.portal-masuk-tautan { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; font-size: .92rem; }
.portal-masuk-info h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.portal-masuk-info ul { list-style: none; padding: 0; margin: 0; }
.portal-masuk-info li { display: flex; gap: .8rem; margin-bottom: 1rem; color: var(--st-teks-lemah); }
.portal-masuk-info .bi { color: var(--pg-aksen); font-size: 1.2rem; }

@media print {
  .situs-kepala, .situs-kaki, .portal-kepala, .situs-wa-mengambang, .cetak-sembunyi { display: none !important; }
  .portal-faktur { border: 0; padding: 0; }
}
.situs .form-control:not(.input-plat), .situs .form-select { background-color: #fff; }