/* Portal publik e-SAKIP Kabupaten Banggai.
   Warna laut dalam dan emas (sejalan dengan aplikasi), motif garis kontur teluk. */
:root{
	--laut: #06303a;
	--laut-2: #0a4652;
	--toska: #0e7c86;
	--toska-2: #13a0a7;
	--buih: #86d6d4;
	--emas: #e3a72f;
	--emas-2: #f3c96a;
	--kabut: #eef4f3;
	--kertas: #ffffff;
	--tinta: #10282d;
	--tinta-2: #4a6165;
	--tinta-3: #85999c;
	--garis: #d7e3e1;
	--merah: #c2410c;
	--hijau: #15803d;
	--biru: #1d6fb8;
	--top-h: 72px;
	--lebar: 1200px;
}

/* ---------- dasar ---------- */
body.pt{ margin: 0; font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.6; color: var(--tinta); background: var(--kabut); -webkit-font-smoothing: antialiased; }
body.pt h1, body.pt h2, body.pt h3, body.pt h4{ font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; color: inherit; line-height: 1.2; margin: 0; }
body.pt a{ color: var(--toska); text-decoration: none; }
body.pt a:hover{ color: var(--laut-2); text-decoration: none; }
body.pt :focus-visible{ outline: 3px solid var(--emas); outline-offset: 2px; }
body.pt img{ max-width: 100%; }
.pt-wadah{ width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
#ptUtama{ padding-top: var(--top-h); min-height: 60vh; }
body.pt-beranda #ptUtama{ padding-top: 0; }
.pt-lompat{ position: absolute; left: -999px; top: 8px; z-index: 2000; padding: 8px 14px; border-radius: 8px; background: var(--emas); color: var(--laut) !important; font-weight: 700; }
.pt-lompat:focus{ left: 12px; }

/* ---------- tombol ---------- */
.pt-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font-size: 14.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pt-btn-emas{ background: var(--emas); color: var(--laut) !important; }
.pt-btn-emas:hover{ background: var(--emas-2); }
.pt-btn-kaca{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.32); color: #fff !important; }
.pt-btn-kaca:hover{ background: rgba(255,255,255,.14); }
.pt-btn-toska{ background: var(--toska); color: #fff !important; }
.pt-btn-toska:hover{ background: var(--laut-2); }
.pt-btn-garis{ background: #fff; border-color: var(--garis); color: var(--tinta) !important; }
.pt-btn-garis:hover{ border-color: var(--toska); color: var(--toska) !important; }
.pt-btn-kecil{ height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; }

/* ---------- bilah atas ---------- */
.pt-top{ position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: var(--top-h); background: var(--laut); transition: background .2s ease, box-shadow .2s ease; }
body.pt-beranda .pt-top{ background: transparent; }
body.pt-beranda .pt-top.padat, .pt-top.buka{ background: var(--laut); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.pt-top .pt-wadah{ height: 100%; display: flex; align-items: center; gap: 24px; }
.pt-merek{ display: flex; align-items: center; gap: 11px; color: #fff !important; flex: 0 0 auto; }
.pt-merek img{ width: 40px; height: 40px; object-fit: contain; }
.pt-merek span{ display: flex; flex-direction: column; line-height: 1.15; }
.pt-merek b{ font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.pt-merek small{ font-size: 12px; color: var(--buih); }
.pt-nav{ display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pt-nav > a, .pt-nav-grup > button{ display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.86) !important; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pt-nav > a:hover, .pt-nav-grup > button:hover, .pt-nav-grup.buka > button{ background: rgba(255,255,255,.09); color: #fff !important; }
.pt-nav > a.aktif, .pt-nav-grup.aktif > button{ color: var(--emas-2) !important; }
.pt-nav-grup{ position: relative; }
.pt-nav-grup > button .fa{ font-size: 11px; transition: transform .15s ease; }
.pt-nav-grup.buka > button .fa{ transform: rotate(180deg); }
.pt-turun{ position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -20px rgba(6,48,58,.55); display: none; }
.pt-nav-grup.buka .pt-turun{ display: block; }
.pt-turun a{ display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; color: var(--tinta) !important; }
.pt-turun a:hover{ background: var(--kabut); }
.pt-turun a i{ flex: 0 0 22px; height: 22px; border-radius: 6px; background: var(--toska); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pt-turun a b{ display: block; font-size: 14px; }
.pt-turun a small{ display: block; font-size: 12px; color: var(--tinta-2); line-height: 1.4; }
.pt-masuk{ margin-left: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--emas); color: var(--emas-2) !important; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.pt-masuk:hover{ background: var(--emas); color: var(--laut) !important; }
.pt-burger{ display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 11px; background: transparent; color: #fff; font-size: 18px; cursor: pointer; }

/* ---------- kontur (motif teluk) ---------- */
.pt-kontur{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pt-kontur path{ fill: none; stroke: rgba(134,214,212,.16); stroke-width: 1.2; }
.pt-kontur path.emas{ stroke: rgba(227,167,47,.75); stroke-width: 2; }

/* ---------- beranda: pembuka ---------- */
.pt-hero{ position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, #0d5361 0%, var(--laut) 55%, #041f26 100%); color: #fff; padding: calc(var(--top-h) + 64px) 0 72px; }
.pt-hero .pt-wadah{ position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.pt-hero-periode{ display: inline-flex; gap: 8px; align-items: center; padding: 6px 13px; border-radius: 999px; background: rgba(227,167,47,.14); color: var(--emas-2); font-size: 13px; font-weight: 700; margin-bottom: 22px; }
.pt-hero h1{ font-size: 56px; font-weight: 800; letter-spacing: -.025em; line-height: 1.04; margin-bottom: 20px; }
.pt-hero p.pt-hero-lead{ font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.78); max-width: 34em; margin: 0 0 30px; }
.pt-hero-aksi{ display: flex; flex-wrap: wrap; gap: 12px; }
.pt-hero-kaki{ margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, auto)); justify-content: start; gap: 18px 30px; color: rgba(255,255,255,.7); font-size: 13.5px; }
.pt-hero-kaki span{ min-width: 0; }
@media (max-width: 600px){ .pt-hero-kaki{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; } }
.pt-hero-kaki b{ display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; color: #fff; font-weight: 700; }
.pt-misi{ position: relative; border-radius: 22px; background: rgba(4,31,38,.55); border: 1px solid rgba(134,214,212,.22); padding: 26px 26px 18px; backdrop-filter: blur(4px); }
.pt-misi h2{ font-size: 15px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--buih); margin-bottom: 14px; }
.pt-misi ol{ list-style: none; margin: 0; padding: 0; counter-reset: misi; }
.pt-misi li{ counter-increment: misi; display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(134,214,212,.14); font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92); }
.pt-misi li:first-child{ border-top: 0; }
.pt-misi li::before{ content: counter(misi); width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 800; color: var(--laut); background: var(--buih); }
.pt-misi li:nth-child(1)::before{ background: var(--emas); }

/* ---------- seksi ---------- */
.pt-seksi{ padding: 84px 0; }
.pt-seksi-putih{ background: #fff; }
.pt-kepala-seksi{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; margin-bottom: 36px; }
.pt-kepala-seksi h2{ font-size: 36px; font-weight: 800; letter-spacing: -.02em; color: var(--laut); }
.pt-kepala-seksi p{ margin: 10px 0 0; max-width: 40em; color: var(--tinta-2); }
.pt-tautan-seksi{ font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }

/* ---------- beranda: tujuan dan lintasan target ---------- */
.pt-tujuan{ display: grid; gap: 18px; }
.pt-tj{ display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); border-radius: 18px; background: #fff; border: 1px solid var(--garis); overflow: hidden; }
.pt-tj-kiri{ padding: 22px 24px; background: linear-gradient(180deg, #f6faf9, #eef5f4); border-right: 1px solid var(--garis); }
.pt-tj-kiri span{ display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--laut); color: var(--buih); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.pt-tj-kiri h3{ font-size: 18px; font-weight: 700; color: var(--laut); line-height: 1.35; }
.pt-tj-kanan{ padding: 8px 24px; }
.pt-ind{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 20px; align-items: center; padding: 16px 0; border-top: 1px dashed var(--garis); }
.pt-ind:first-child{ border-top: 0; }
.pt-ind-nama b{ display: block; font-size: 15px; line-height: 1.4; }
.pt-ind-nama small{ color: var(--tinta-3); font-size: 12.5px; }
.pt-lintas{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.pt-lintas::before{ content: ""; position: absolute; left: 10%; right: 10%; top: 13px; height: 2px; background: var(--garis); }
.pt-lintas div{ position: relative; text-align: center; }
.pt-lintas div::before{ content: ""; display: block; width: 12px; height: 12px; margin: 7px auto 8px; border-radius: 50%; background: #fff; border: 2px solid var(--toska); }
.pt-lintas div.kini::before{ width: 18px; height: 18px; margin: 4px auto 5px; background: var(--emas); border-color: var(--emas); box-shadow: 0 0 0 5px rgba(227,167,47,.2); }
.pt-lintas div.lewat::before{ background: var(--toska); }
.pt-lintas b{ display: block; font-size: 14px; font-weight: 700; color: var(--tinta); word-break: break-word; }
.pt-lintas small{ display: block; font-size: 11.5px; color: var(--tinta-3); }
.pt-lintas div.kini b{ color: #a16207; }

/* ---------- beranda: siklus SAKIP ---------- */
.pt-siklus{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: tahap; }
.pt-siklus::before{ content: ""; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--toska) 0 10px, transparent 10px 18px); }
.pt-tahap{ position: relative; padding: 0 18px; text-align: center; color: var(--tinta) !important; }
.pt-tahap-no{ position: relative; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 16px; background: var(--laut); color: var(--emas-2); display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; transition: transform .15s ease, background .15s ease; }
.pt-tahap:hover .pt-tahap-no{ transform: translateY(-3px); background: var(--toska); color: #fff; }
.pt-tahap h3{ font-size: 19px; font-weight: 700; color: var(--laut); margin-bottom: 8px; }
.pt-tahap p{ font-size: 14px; color: var(--tinta-2); margin: 0 0 10px; }
.pt-tahap span{ font-size: 13.5px; font-weight: 700; color: var(--toska); }

/* ---------- beranda: pengumuman dan peraturan ---------- */
.pt-dua{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.pt-papan{ border-radius: 18px; background: #fff; border: 1px solid var(--garis); padding: 24px 26px; }
.pt-papan-kepala{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.pt-papan-kepala h3{ font-size: 21px; font-weight: 700; color: var(--laut); }
.pt-daftar{ list-style: none; margin: 0; padding: 0; }
.pt-daftar li{ border-top: 1px solid var(--garis); }
.pt-daftar li:first-child{ border-top: 0; }
.pt-daftar > li > a, .pt-daftar .pt-daftar-isi{ display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; color: var(--tinta) !important; }
.pt-daftar > li > a:hover b{ color: var(--toska); }
.pt-tgl{ text-align: center; border-radius: 12px; background: var(--kabut); padding: 6px 0; line-height: 1.1; }
.pt-tgl b{ display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; color: var(--laut); }
.pt-tgl small{ font-size: 11.5px; color: var(--tinta-2); }
.pt-daftar b{ font-size: 14.5px; line-height: 1.45; font-weight: 600; }
.pt-daftar small.pt-ket{ display: block; color: var(--tinta-3); font-size: 12.5px; }
.pt-ikon-dok{ width: 44px; height: 44px; border-radius: 12px; background: #fff7e6; color: #a16207; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto; }
.pt-kosong{ padding: 26px 18px; border-radius: 14px; background: var(--kabut); color: var(--tinta-2); font-size: 14px; text-align: center; }
.pt-kosong .fa{ display: block; font-size: 22px; color: var(--tinta-3); margin-bottom: 6px; }

/* ---------- galeri ---------- */
.pt-galeri{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pt-galeri a{ position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--laut); }
.pt-galeri img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; }
.pt-galeri a:hover img{ transform: scale(1.04); opacity: .85; }
.pt-galeri span{ position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(4,31,38,.85)); color: #fff; font-size: 12.5px; line-height: 1.35; }
.pt-lihat{ position: fixed; inset: 0; z-index: 2000; background: rgba(4,31,38,.92); display: none; align-items: center; justify-content: center; padding: 30px; flex-direction: column; gap: 14px; }
.pt-lihat.buka{ display: flex; }
.pt-lihat img{ max-height: 80vh; border-radius: 12px; }
.pt-lihat p{ color: #fff; margin: 0; text-align: center; max-width: 60em; }
.pt-lihat button{ position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; cursor: pointer; }

/* ---------- tautan terkait ---------- */
.pt-terkait{ display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.pt-terkait a{ display: flex; align-items: center; justify-content: center; width: 280px; height: 92px; padding: 14px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--garis); }
.pt-terkait a:hover{ border-color: var(--toska); }
.pt-terkait img{ max-height: 58px; object-fit: contain; }

/* ---------- halaman dalam ---------- */
.pt-halkepala{ position: relative; overflow: hidden; background: var(--laut); color: #fff; padding: 46px 0 40px; }
.pt-halkepala .pt-wadah{ position: relative; }
.pt-remah{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: rgba(255,255,255,.66); margin-bottom: 12px; }
.pt-remah a{ color: var(--buih) !important; }
.pt-remah .fa{ font-size: 11px; }
.pt-halkepala h1{ font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.pt-halkepala p{ margin: 10px 0 0; max-width: 46em; color: rgba(255,255,255,.76); }
.pt-isihal{ padding: 34px 0 72px; }
.pt-kartu{ border-radius: 18px; background: #fff; border: 1px solid var(--garis); padding: 26px 28px; }
.pt-kartu + .pt-kartu{ margin-top: 20px; }
.pt-teks{ max-width: 46em; font-size: 15.5px; line-height: 1.75; }
.pt-teks p{ margin: 0 0 14px; }

/* tabel umum */
.pt-gulir{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.pt-tabel{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.pt-tabel th{ background: var(--laut); color: #fff; font-weight: 700; font-size: 13px; padding: 11px 12px; text-align: left; white-space: nowrap; }
table.pt-tabel th:first-child{ border-radius: 10px 0 0 0; } table.pt-tabel th:last-child{ border-radius: 0 10px 0 0; }
table.pt-tabel td{ padding: 12px; border-bottom: 1px solid var(--garis); vertical-align: top; }
table.pt-tabel tr:hover td{ background: #f8fbfb; }
table.pt-tabel .tengah{ text-align: center; }
.pt-unduh{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; background: var(--kabut); color: var(--laut) !important; font-weight: 700; font-size: 13px; white-space: nowrap; }
.pt-unduh:hover{ background: var(--toska); color: #fff !important; }
.pt-cari{ position: relative; max-width: 360px; }
.pt-cari input{ width: 100%; height: 42px; border: 1px solid var(--garis); border-radius: 11px; padding: 0 14px 0 40px; font: inherit; font-size: 14px; background: #fff; }
.pt-cari input:focus{ outline: 0; border-color: var(--toska); box-shadow: 0 0 0 3px rgba(14,124,134,.15); }
.pt-cari .fa{ position: absolute; left: 14px; top: 13px; color: var(--tinta-3); }
.pt-alatbaris{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 18px; }

/* pengumuman */
.pt-isi-pengumuman{ font-size: 15.5px; line-height: 1.8; }
.pt-isi-pengumuman img{ height: auto; border-radius: 10px; }
.pt-samping h3{ font-size: 17px; color: var(--laut); margin-bottom: 8px; }
.pt-hal{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.pt-hal a, .pt-hal span{ display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--garis); background: #fff; font-weight: 600; font-size: 13.5px; }
.pt-hal span.aktif{ background: var(--laut); border-color: var(--laut); color: #fff; }
.pt-baca{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }

/* kontak */
.pt-kontak{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: stretch; }
.pt-kontak-info{ display: grid; gap: 14px; align-content: start; }
.pt-kontak-item{ display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--garis); }
.pt-kontak-item i{ width: 46px; height: 46px; border-radius: 13px; background: var(--laut); color: var(--emas-2); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.pt-kontak-item b{ display: block; color: var(--laut); }
.pt-kontak-item span{ color: var(--tinta-2); font-size: 14.5px; }
.pt-peta{ border-radius: 18px; overflow: hidden; border: 1px solid var(--garis); min-height: 420px; background: #dfe9e7; }
.pt-peta iframe{ width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* ---------- SAKIP publik ---------- */
.pt-tahapan{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pt-tahapan a{ display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 8px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(134,214,212,.2); color: rgba(255,255,255,.84) !important; font-weight: 600; font-size: 14px; }
.pt-tahapan a i{ width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(134,214,212,.18); color: var(--buih); font-style: normal; font-weight: 800; font-size: 13px; }
.pt-tahapan a:hover{ background: rgba(255,255,255,.13); }
.pt-tahapan a.aktif{ background: var(--emas); border-color: var(--emas); color: var(--laut) !important; }
.pt-tahapan a.aktif i{ background: var(--laut); color: var(--emas-2); }
.pt-tahun{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.7); }
.pt-tahun a{ display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px; color: rgba(255,255,255,.86) !important; font-weight: 700; border: 1px solid transparent; }
.pt-tahun a:hover{ border-color: rgba(134,214,212,.4); }
.pt-tahun a.aktif{ background: #fff; color: var(--laut) !important; }
.pt-catatan{ display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fff7e6; color: #7a4a06; font-size: 13.5px; line-height: 1.5; }
.pt-tabs{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--garis); }
.pt-tabs button{ border: 0; background: transparent; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--tinta-2); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.pt-tabs button.aktif{ color: var(--laut); border-bottom-color: var(--emas); }
.pt-panel{ display: none; } .pt-panel.aktif{ display: block; }

/* tabel data lama dari model: kelas header1..5, isi, nomor dan warna kategori */
#ptPublik table.table{ width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13.5px !important; background: #fff; }
#ptPublik table.table th, #ptPublik table.table td{ border: 0; border-bottom: 1px solid var(--garis); padding: 10px 10px; vertical-align: middle; }
/* kepala tabel menempel utuh (dua baris judul ikut), bukan per sel */
#ptPublik table.table thead{ position: sticky; top: 0; z-index: 2; }
#ptPublik table.table thead th{ font-size: 12.5px !important; font-weight: 700; line-height: 1.35; text-align: center; color: #fff !important; background: var(--laut) !important; border-right: 1px solid rgba(255,255,255,.1) !important; vertical-align: middle !important; }
#ptPublik table.table thead th.header1{ text-align: left; }
/* judul kolom bertahun dipecah sistem menjadi label dan lencana tahun */
#ptPublik .e-th-lbl{ display: block; }
#ptPublik .e-th-thn{ display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; background: var(--emas); color: var(--laut); font-size: 11px; font-weight: 800; line-height: 1.5; }
#ptPublik table.table thead th.headerabu{ background: #64748b !important; }
#ptPublik table.table thead th.headermerah{ background: #b4532a !important; }
#ptPublik table.table thead th.headerhijau{ background: var(--hijau) !important; }
#ptPublik table.table thead th.headerbiru{ background: var(--biru) !important; }
#ptPublik table.table thead th.header3, #ptPublik table.table thead th.header2{ background: var(--laut-2) !important; }
#ptPublik table.table tfoot{ display: none; }
#ptPublik td.nomor{ width: 46px; text-align: center; color: var(--tinta-3); font-weight: 700; background: transparent !important; }
#ptPublik td[id^="tdnmskpd"]{ font-weight: 600; font-size: 13.5px !important; min-width: 220px; }
#ptPublik td.isi, #ptPublik td.isitahun, #ptPublik td.isikosong{ text-align: center; padding: 8px !important; }
#ptPublik td.isi{ cursor: pointer; }
#ptPublik td.isi:hover{ background: #eaf5f4 !important; }
#ptPublik td.isi .fa-search{ display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px; background: var(--kabut); color: var(--toska); }
#ptPublik td.isi:hover .fa-search{ background: var(--toska); color: #fff; }
#ptPublik td.isikosong{ color: var(--tinta-3); }
#ptPublik td.header3, #ptPublik td.header4{ background: var(--kabut) !important; color: var(--laut) !important; font-weight: 700; font-size: 12px; text-align: center; white-space: nowrap; }
#ptPublik td.header4{ background: #fff3d6 !important; }
#ptPublik td.header5{ background: var(--kabut) !important; color: var(--laut); font-weight: 700; font-size: 12px; }
#ptPublik td[style*="background:green"]{ background: var(--toska) !important; border-radius: 0; font-weight: 700; }
#ptPublik .badge{ display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; font-weight: 800; color: #fff; }
#ptPublik .badge.abu{ background: #64748b; } #ptPublik .badge.merah{ background: #b4532a; } #ptPublik .badge.hijau{ background: var(--hijau); }
#ptPublik .badge.biru{ background: var(--biru); } #ptPublik .badge.birumuda{ background: var(--toska); }
#ptPublik .pt-kat{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 8px; color: #fff; font-weight: 800; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
#ptPublik td.pt-eva small{ color: var(--tinta-2); margin-left: 6px; }
#ptPublik .pt-kosong-sel, .pt-kosong-sel{ color: var(--tinta-3); font-size: 12.5px; }
.pt-legenda{ display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 13px; color: var(--tinta-2); }
.pt-legenda span{ display: inline-flex; align-items: center; gap: 7px; }
.pt-legenda i{ width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.pt-batas{ max-height: 70vh; overflow: auto; border-radius: 14px; border: 1px solid var(--garis); }
.pt-tutup-akses{ text-align: center; padding: 40px 20px; }
.pt-tutup-akses .fa{ font-size: 34px; color: var(--toska); margin-bottom: 12px; }

/* ---------- dialog laporan ---------- */
#modal-dialog-view .modal-dialog{ max-width: min(1180px, calc(100vw - 24px)); width: auto; margin: 24px auto; }
#modal-dialog-view .modal-content{ border: 0; border-radius: 18px; overflow: hidden; }
#modal-dialog-view .modal-header{ display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--laut); color: #fff; border: 0; }
#modal-dialog-view .modal-title{ flex: 1; min-width: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }
#modal-dialog-view .modal-title small{ display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--buih); margin-top: 3px; }
#modal-dialog-view .pt-dlg-alat{ display: flex; flex-wrap: wrap; gap: 6px; }
#modal-dialog-view .pt-dlg-alat a, #modal-dialog-view .pt-dlg-alat button{ display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff !important; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
#modal-dialog-view .pt-dlg-alat a:hover, #modal-dialog-view .pt-dlg-alat button:hover{ background: var(--emas); border-color: var(--emas); color: var(--laut) !important; }
#modal-dialog-view .pt-dlg-tutup{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: rgba(255,255,255,.08); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
#modal-dialog-view .pt-dlg-tutup:hover{ background: var(--emas); border-color: var(--emas); color: var(--laut); }
#modal-dialog-view .modal-body{ padding: 0; }
#isimodal{ padding: 20px 22px; max-height: calc(100vh - 160px); overflow: auto; font-size: 13.5px; }
#isimodal table{ max-width: 100%; }
/* bingkai bagan cascading di dialog */
.pt-dlg-bingkai{ display: block; width: 100%; height: calc(100vh - 210px); min-height: 420px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; }
#isimodal table td, #isimodal table th{ padding: 6px 8px; }
.pt-memuat{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 70px 20px; color: var(--tinta-2); }
.pt-memuat span{ width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--garis); border-top-color: var(--toska); animation: ptPutar .8s linear infinite; }
@keyframes ptPutar{ to{ transform: rotate(360deg); } }
.pt-dlg-kosong{ padding: 40px 20px; text-align: center; color: var(--tinta-2); }
.pt-rinci-sas{ margin: 18px 0 8px; font-weight: 700; color: var(--laut); font-size: 14.5px; }
.pt-rinci-sas:first-child{ margin-top: 0; }
.pt-capaian{ display: inline-block; min-width: 64px; padding: 3px 8px; border-radius: 7px; font-weight: 800; text-align: center; }
.pt-capaian.c-rendah{ background: #fde8dc; color: #9a3412; } .pt-capaian.c-tepat{ background: #dcfce7; color: #166534; }
.pt-capaian.c-lebih{ background: #dbeafe; color: #1e40af; } .pt-capaian.c-na{ background: #eef2f3; color: #475569; }
.pt-analisis{ margin: 6px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--kabut); line-height: 1.6; }

/* ---------- kaki ---------- */
.pt-kaki{ position: relative; overflow: hidden; background: #041f26; color: rgba(255,255,255,.76); padding: 60px 0 0; font-size: 14px; }
.pt-kaki .pt-wadah{ position: relative; }
.pt-kaki-grid{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-bottom: 40px; }
.pt-kaki h4{ font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.pt-kaki ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pt-kaki a{ color: rgba(255,255,255,.76) !important; }
.pt-kaki a:hover{ color: var(--emas-2) !important; }
.pt-kaki-merek{ display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.pt-kaki-merek img{ width: 46px; height: 46px; object-fit: contain; }
.pt-kaki-merek b{ display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; color: #fff; }
.pt-kaki address{ font-style: normal; line-height: 1.7; }
.pt-kaki-bawah{ border-top: 1px solid rgba(134,214,212,.14); padding: 18px 0; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.55); }
.pt-keatas{ position: fixed; right: 18px; bottom: 18px; z-index: 1020; width: 46px; height: 46px; border-radius: 13px; border: 0; background: var(--emas); color: var(--laut); font-size: 18px; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); display: none; }
.pt-keatas.tampil{ display: block; }

/* ---------- layar sedang dan sempit ---------- */
@media (max-width: 1080px){
	.pt-hero h1{ font-size: 46px; }
	.pt-ind{ grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 991px){
	.pt-burger{ display: inline-flex; align-items: center; justify-content: center; }
	.pt-nav{ position: fixed; top: var(--top-h); left: 0; right: 0; bottom: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 18px 30px; background: var(--laut); overflow-y: auto; }
	.pt-top.buka .pt-nav{ display: flex; }
	.pt-nav > a, .pt-nav-grup > button{ height: 48px; width: 100%; justify-content: space-between; font-size: 15.5px; }
	.pt-turun{ position: static; display: none; min-width: 0; margin: 4px 0 8px; box-shadow: none; }
	.pt-masuk{ margin: 12px 0 0; height: 48px; justify-content: center; }
	.pt-hero .pt-wadah{ grid-template-columns: 1fr; gap: 36px; }
	.pt-tj{ grid-template-columns: 1fr; }
	.pt-tj-kiri{ border-right: 0; border-bottom: 1px solid var(--garis); }
	.pt-siklus{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; }
	.pt-siklus::before{ display: none; }
	.pt-dua, .pt-kontak, .pt-baca{ grid-template-columns: 1fr; }
	.pt-galeri{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pt-kaki-grid{ grid-template-columns: 1fr 1fr; }
	.pt-kaki-grid > div:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
	:root{ --top-h: 64px; }
	.pt-wadah{ padding: 0 16px; }
	.pt-merek b{ font-size: 18px; }
	.pt-hero{ padding: calc(var(--top-h) + 36px) 0 50px; }
	.pt-hero h1{ font-size: 36px; }
	.pt-hero p.pt-hero-lead{ font-size: 15.5px; }
	.pt-hero-aksi .pt-btn{ flex: 1 1 100%; }
	.pt-misi{ padding: 20px 18px 12px; }
	.pt-seksi{ padding: 56px 0; }
	.pt-kepala-seksi h2{ font-size: 28px; }
	.pt-halkepala h1{ font-size: 30px; }
	.pt-tj-kanan{ padding: 4px 16px; }
	.pt-lintas b{ font-size: 12.5px; }
	.pt-siklus{ grid-template-columns: 1fr; }
	.pt-papan, .pt-kartu{ padding: 20px 18px; }
	.pt-kaki-grid{ grid-template-columns: 1fr; }
	#isimodal{ padding: 14px; }
	#modal-dialog-view .modal-dialog{ margin: 10px auto; }
}
@media (prefers-reduced-motion: reduce){
	*{ transition: none !important; animation: none !important; }
}
@media print{
	.pt-top, .pt-kaki, .pt-keatas, .pt-halkepala .pt-tahapan, .pt-tahun{ display: none !important; }
	#ptUtama{ padding-top: 0; }
}

/* halaman unduhan akun perangkat daerah (tampilan lama) */
.pt-unduhan .form-control{ height: 42px; border-radius: 10px; border-color: var(--garis); }
.pt-unduhan label.form-control{ background: var(--kabut) !important; color: var(--laut) !important; border: 0; font-weight: 700; }
.pt-unduhan [class*="col-"]{ margin-bottom: 10px; }
.e-aksi{ display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; margin: 0 4px 6px 0; border-radius: 10px; border: 1px solid var(--garis); background: #fff; color: var(--tinta); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.e-aksi:hover{ border-color: var(--toska); color: var(--toska); }
.e-aksi-pdf{ color: #b91c1c; } .e-aksi-excel{ color: var(--hijau); }
.modal-backdrop.show{ opacity: .62; background: #041f26; }
#ptPublik table.table thead th.header3{ min-width: 78px; }
/* tabel bertumpuk jadi kartu di layar sempit */
@media (max-width: 600px){
	table.pt-tumpuk thead{ display: none; }
	table.pt-tumpuk, table.pt-tumpuk tbody, table.pt-tumpuk tr, table.pt-tumpuk td{ display: block; width: 100%; }
	table.pt-tumpuk tr{ position: relative; padding: 12px 12px 12px 48px; border-bottom: 1px solid var(--garis); }
	table.pt-tumpuk td{ border: 0; padding: 2px 0; text-align: left !important; }
	table.pt-tumpuk td.pt-tp-no{ position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--kabut); color: var(--laut); font-weight: 700; font-size: 12px; line-height: 26px; text-align: center !important; padding: 0; }
	table.pt-tumpuk td.pt-tp-judul{ margin-bottom: 4px; }
	table.pt-tumpuk td[data-label]{ display: inline-block; width: auto; margin-right: 14px; font-size: 13px; color: var(--tinta-2); }
	table.pt-tumpuk td[data-label]::before{ content: attr(data-label) ": "; font-weight: 600; }
	table.pt-tumpuk td.pt-tp-aksi{ margin-top: 8px; }
	table.pt-tumpuk tr:hover td{ background: transparent; }
	.pt-gulir > table.pt-tumpuk{ min-width: 0; }
}
/* tentang: teks dan ilustrasi siklus SAKIP */
.pt-tentang{ display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.pt-tentang .pt-teks{ max-width: none; }
.pt-tentang-il{ margin: 0; display: flex; align-items: center; }
.pt-il{ display: block; width: 100%; height: auto; max-height: 520px; border-radius: 22px; box-shadow: 0 18px 40px -24px rgba(6,48,58,.55); }
.pt-il-kontur path{ fill: none; stroke: #86d6d4; stroke-opacity: .13; stroke-width: 1.2; }
.pt-il-kontur path.emas{ stroke: #e3a72f; stroke-opacity: .55; stroke-width: 1.6; }
.pt-il-label{ font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; fill: #fff; }
.pt-il-pusat{ font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; fill: #fff; letter-spacing: .5px; }
.pt-il-kecil{ font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; fill: #86d6d4; }
.pt-il-kaki{ font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; fill: rgba(255,255,255,.7); }
@media (max-width: 991px){ .pt-tentang{ grid-template-columns: minmax(0, 1fr); } .pt-tentang-il{ max-width: 460px; width: 100%; margin: 0 auto; } }