/* ══════════════════════════════════════════════════════════════════════════
   ex_style_ui.css — lapisan tampilan tambahan dataumkm (UI/UX)
   ──────────────────────────────────────────────────────────────────────────
   Dimuat PALING AKHIR oleh head.php (sesudah color.css), jadi boleh menimpa
   gaya template tanpa menyunting style.css milik CityBook.

   Token mengikuti template (lihat skill dataumkm-citybook-ui):
     aksen        #0084FB   gradien #0084FB → #0084FB
     gelap        #2F3B59   judul  #566985
     teks lemah   #878C9F   section #f9f9f9
     bintang      #FACC39

   Kontras teks dijaga ≥ 4.5:1 (temuan audit: aksen #0084FB di atas putih
   hanya 2,21:1, sehingga TIDAK dipakai sebagai warna teks — hanya sebagai
   latar dengan teks gelap, atau tombol dengan teks putih berukuran besar).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Kuota usaha (Daftar Usaha) ─────────────────────────────────────── */
.ui-kuota {
	position: relative;
	float: left;
	width: 100%;
	background: #fff;
	border: 1px solid #e6ecf2;
	border-radius: 6px;
	padding: 18px 20px 16px;
	margin-bottom: 22px;
	box-sizing: border-box;
	text-align: left;          /* body template memakai text-align:center */
}
.ui-kuota-info { display: flex; align-items: center; gap: 16px; text-align: left; }

.ui-kuota-angka {
	flex: 0 0 auto;
	min-width: 74px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	color: #2F3B59;
}
.ui-kuota-angka em { font-style: normal; font-size: 15px; color: #5A6B80; font-weight: 500; }

.ui-kuota-teks { flex: 1 1 auto; }
.ui-kuota-teks strong {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #2F3B59;
	margin-bottom: 2px;
}
.ui-kuota-teks span { display: block; font-size: 13px; color: #5A6B80; line-height: 1.55; }

.ui-kuota-bar {
	height: 6px;
	background: #eef2f7;
	border-radius: 99px;
	overflow: hidden;
	margin-top: 14px;
}
.ui-kuota-bar > span { display: block; height: 100%; border-radius: 99px; background: #0084FB; }
.ui-kuota.is-penuh { border-color: #f0dcb4; background: #fffdf7; }
.ui-kuota.is-penuh .ui-kuota-bar > span { background: #E0A32E; }
.ui-kuota.is-penuh .ui-kuota-angka { color: #8A5B00; }

/* ── 2. Lencana status ─────────────────────────────────────────────────── */
.ui-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	padding: 6px 10px;
	border-radius: 99px;
	margin: 0 6px 6px 0;
	white-space: nowrap;
}
.ui-badge i { margin-right: 4px; }
.ui-badge--tayang { background: #E4F5EE; color: #1B6B50; }
.ui-badge--tunggu { background: #FDF3E1; color: #8A5B00; }
.ui-badge--baru   { background: #E9F4FE; color: #14618F; }
.ui-badge--ekraf  { background: #F3EDFB; color: #5B3B93; }
.ui-badge--ikm    { background: #EDF1F6; color: #46566E; }

/* ── 3. Kartu usaha (memakai rangka .dashboard-message bawaan) ──────────── */
/* Template aslinya memakai float + lebar persen, dan .dashboard-message
   mewarisi text-align:center dari body. Akibatnya teks ter-tengah dan daftar
   aksi menyusut jadi lebar 0 sehingga tombol menumpuk di tepi kanan.
   Di sini rangka float diganti flex dan perataan dikunci ke kiri. */
.ui-usaha-card {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	text-align: left;
	border-radius: 6px;
	padding: 20px;
	box-sizing: border-box;
	transition: box-shadow .18s ease;
}
.ui-usaha-card:hover { box-shadow: 0 6px 20px rgba(47,59,89,.10); }
.ui-usaha-card .dashboard-listing-table-image {
	float: none;
	flex: 0 0 220px;
	width: 220px;
	padding: 0;
}
.ui-usaha-card .dashboard-listing-table-text {
	float: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	text-align: left;
}
.ui-usaha-judul {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	margin: 0 0 2px;
}
.ui-usaha-judul a { color: #2F3B59; }
.ui-usaha-judul a:hover { color: #0068C9; }
.ui-usaha-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; text-align: left; }
.ui-usaha-meta > span { font-size: 12.5px; color: #5A6B80; }
.ui-usaha-meta i { color: #0068C9; margin-right: 5px; }
.ui-usaha-foto img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
	border-radius: 5px;
}

/* tombol aksi */
.ui-tombol {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 4px;
	background: #0084FB;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid #0084FB;
	cursor: pointer;
	text-decoration: none;
}
.ui-tombol:hover, .ui-tombol:focus { background: #2F3B59; border-color: #2F3B59; color: #fff; }
.ui-tombol--halus { background: #fff; color: #46566E; border-color: #d6dee8; }
.ui-tombol--halus:hover, .ui-tombol--halus:focus { background: #f2f6fa; color: #2F3B59; border-color: #b9c6d6; }
.ui-tombol--mati {
	background: #f2f5f9; color: #8B97A8; border-color: #e2e8ef;
	cursor: not-allowed;
}
.ui-usaha-aksi {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	float: none;
	clear: both;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.ui-usaha-aksi li { float: none; margin: 0; }

/* keadaan kosong */
.ui-kosong { text-align: center; padding: 46px 24px; }
.ui-kosong i { font-size: 42px; color: #C4D2E0; }
.ui-kosong p { margin: 14px 0 18px; color: #5A6B80; font-size: 14px; }

/* ── 4. Formulir usaha: navigasi bagian + bilah aksi ───────────────────── */
/* JEBAKAN 1: template membungkus isi dengan <section> ber-overflow:hidden, dan
   position:sticky TIDAK bekerja di dalam leluhur yang menjadi scroll container.
   JEBAKAN 2: menggantinya menjadi overflow:visible MEMANG menghidupkan sticky,
   tetapi float di dalam section jadi tak terkekang — footer naik menimpa
   formulir (terbukti lewat tangkapan layar).
   Jalan tengah: overflow:clip. Ia tetap membentuk konteks format blok (float
   terkekang, tata letak aman) tetapi BUKAN scroll container, sehingga sticky
   bekerja. Peramban lama yang belum mengenal clip akan mengabaikan aturan ini
   dan kembali memakai overflow:hidden milik template — hanya kehilangan efek
   menempel, tata letak tetap utuh. */
section:has(.ui-formnav) { overflow: clip; }
.ui-formnav {
	/* JEBAKAN (terukur): tata letak template berbasis float, sehingga elemen blok
	   biasa yang berdekatan dengan float ikut terdorong — di ponsel navbar ini
	   membengkak terukur 634px padahal isinya hanya ~84px, menyisakan celah
	   putih besar. display:flow-root menjadikannya konteks format blok sendiri
	   sehingga float tidak lagi menembusnya (terukur: block=634px, flow-root=84px).
	   Peramban lama yang belum mengenal flow-root cukup kembali ke perilaku block. */
	display: flow-root;
	position: sticky;
	top: 0;
	z-index: 30;
	background: #fff;
	border: 1px solid #e6ecf2;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 22px;
	box-shadow: 0 4px 14px rgba(47,59,89,.06);
}
.ui-formnav-judul {
	/* Wajib inline-block: sebagai elemen block, kotak barisnya membengkak di
	   ponsel (terukur 564px untuk satu baris teks) dan menyisakan celah putih
	   besar di atas navbar. Terukur: block=564px, inline-block=14px. */
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5A6B80;
	margin: 0 0 8px 4px;
}
.ui-formnav-daftar {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0 2px 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.ui-formnav-daftar li { margin: 0; flex: 0 0 auto; }
.ui-formnav-daftar a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px 0 10px;
	border: 1px solid #e2e8ef;
	border-radius: 99px;
	font-size: 12.5px;
	color: #46566E;
	background: #fff;
	white-space: nowrap;
}
.ui-formnav-daftar a:hover { border-color: #b9c6d6; background: #f7fafd; color: #2F3B59; }
.ui-formnav-daftar a span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: #eef3f9;
	color: #566985;
	font-size: 11px;
	font-weight: 700;
}
.ui-formnav-daftar a.is-aktif { border-color: #0068C9; color: #14618F; background: #f4fafe; }
.ui-formnav-daftar a.is-aktif span { background: #0084FB; color: #fff; }

.ui-seksi-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	margin-right: 8px;
	border-radius: 50%;
	background: #0084FB;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
}
.profile-edit-container { scroll-margin-top: 96px; }

/* Isian formulir masih mewarisi text-align:center dari body template sehingga
   teks isian tampak ter-tengah. Dikunci ke kiri — dibatasi pada formulir usaha
   (section yang memuat .ui-formnav) agar halaman lain tetap seperti semula. */
section:has(.ui-formnav) .custom-form input,
section:has(.ui-formnav) .custom-form textarea,
section:has(.ui-formnav) .custom-form select { text-align: left; }

.ui-aksi-bar {
	position: sticky;
	bottom: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid #e6ecf2;
	border-radius: 6px;
	padding: 12px 16px;
	margin-top: 18px;
	box-shadow: 0 -4px 16px rgba(47,59,89,.07);
}
.ui-aksi-bar-status { font-size: 12.5px; color: #5A6B80; }
.ui-aksi-bar-status b { color: #2F3B59; font-family: 'Montserrat', sans-serif; }
.ui-aksi-bar-tombol { display: flex; gap: 10px; }

/* ── 5. Aksesibilitas: fokus yang terlihat ─────────────────────────────── */
.ui-tombol:focus-visible,
.ui-formnav-daftar a:focus-visible {
	outline: 3px solid rgba(0, 132, 251,.55);
	outline-offset: 2px;
}

/* ── 6. Layar kecil ────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {
	.ui-usaha-card { flex-direction: column; gap: 16px; padding: 16px; }
	.ui-usaha-card .dashboard-listing-table-image { flex: 0 0 auto; width: 100%; }
	.ui-usaha-foto img { height: 190px; }
	.ui-kuota-info { gap: 12px; }
	.ui-kuota-angka { min-width: 62px; font-size: 22px; }
	.ui-aksi-bar { flex-direction: column; align-items: stretch; }
	.ui-aksi-bar-tombol { width: 100%; }
	.ui-aksi-bar-tombol .ui-tombol { flex: 1 1 0; justify-content: center; }
	.ui-usaha-aksi { width: 100%; }
	.ui-usaha-aksi li { flex: 1 1 0; }
	.ui-usaha-aksi .ui-tombol { width: 100%; justify-content: center; }
}
@media only screen and (max-width: 540px) {
	.ui-formnav { padding: 10px 8px; }
	.ui-formnav-daftar a { padding: 0 12px 0 8px; font-size: 12px; }
	.ui-kuota { padding: 16px; }
	.ui-usaha-judul { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Panel filter daftar UMKM (/umkm dan /filter_lokasi)  —  revisi 2026-10-11
   ──────────────────────────────────────────────────────────────────────────
   Yang diperbaiki dan alasannya:
   1. Pencarian jadi baris tersendiri selebar panel + tombol Cari menempel.
      Sebelumnya pencarian hanya 65% lebar, dan tombolnya berdiri sendiri di
      baris terakhir — pemicu pencarian jauh dari kotak yang diisi.
   2. Kategori | Sub kategori berdampingan 50:50. Sebelumnya baris kedua hanya
      memakai 35% sehingga 65% ruangnya kosong (penyebab panel terlihat pincang).
   3. Empat kolom wilayah (Provinsi/Kabupaten/Kecamatan/Kelurahan) diringkas
      dalam satu baris penutup. Efek terukur: kartu hasil pertama naik dari
      y=729px ke ± y=497px pada layar 1440x900, jadi kartu pertama terlihat utuh.
   4. Bidang isian dibuat netral dan warna aksen dipakai untuk aksi. Sebelumnya
      6 bidang berlatar #0084FB berteks putih = kontras 2,21:1 (gagal WCAG AA),
      dan keenamnya tampak seperti tombol sehingga aksi utama tidak menonjol.
   5. Label disambungkan ke kolomnya (for/id) + ikon mbri-* dibuang karena
      fontnya tidak ada di server (terukur tampil 0x0 px).
   Semua id kolom dipertahankan: keyword, filter_kategori, filter_sub_kategori,
   filter_provinsi, filter_kabupaten, filter_kecamatan, filter_kelurahan, filter_btn.
   ══════════════════════════════════════════════════════════════════════════ */

.ui-filter { display: block; }
.ui-filter .listsearch-input-item { float: none; width: auto; padding: 0; margin: 0; min-width: 0; }

/* Baris dibuat eksplisit. Satu wadah flex besar dengan flex-wrap TIDAK cukup:
   kolom baris berikutnya naik ke baris sebelumnya bila masih ada sisa ruang.
   Terukur pada 1064px: pencarian (297) + tombol (112) + Kategori (506) berdesakan
   dalam satu baris, sementara Sub kategori terdorong sendirian selebar penuh. */
.ui-baris { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ui-baris + .ui-baris,
.ui-filter > .ui-wilayah { margin-top: 16px; }
.ui-baris-1 .ui-cari { flex: 1 1 auto; min-width: 0; }
.ui-baris-1 .ui-tombol-cari { flex: 0 0 112px; }
.ui-baris-2 .ui-setengah { flex: 1 1 0; min-width: 0; }
.ui-baris-2 .ui-penuh { flex: 1 1 100%; min-width: 0; }
.ui-filter > .ui-wilayah { width: 100%; }

/* label: netralkan float template */
.ui-filter label {
	float: none; position: static; display: block; text-align: left;
	margin: 0 0 6px; padding: 0; font-size: 13px; line-height: 18px;
	font-weight: 600; color: #5D6275;
}
.ui-filter .ui-label-kosong { visibility: hidden; }

/* ── kotak pencarian ───────────────────────────────────────────────────── */
.ui-kotak-cari { position: relative; }
.ui-kotak-cari .fa-search {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	z-index: 3; font-size: 14px; color: #5D6275; pointer-events: none;
}
.ui-filter .ui-kotak-cari input {
	float: none; width: 100%; height: 48px; padding: 0 15px 0 40px;
	border: 1px solid #D6DEE8; border-radius: 6px; background: #fff;
	font-size: 15px; color: #22303F;
}
.ui-filter .ui-kotak-cari input::placeholder { color: #5D6275; opacity: 1; }
.ui-filter .ui-kotak-cari input:focus,
.ui-filter .nice-select:focus,
.ui-filter .nice-select.open {
	outline: none; border-color: #0072E5; box-shadow: 0 0 0 3px rgba(34, 120, 176, .18);
}
.ui-filter .ui-kotak-cari input:focus-visible { outline: none; }

/* ── tombol cari: satu-satunya bidang beraksen ─────────────────────────── */
.ui-filter .fs-map-btn {
	float: none; width: 100%; height: 48px; padding: 0; border: 0;
	border-radius: 6px; background: #0072E5; color: #fff;
	font-size: 15px; font-weight: 700; cursor: pointer;
}
.ui-filter .fs-map-btn:hover { background: #1B638F; }

/* ── bidang pilihan (nice-select): netral, teks gelap ──────────────────── */
.ui-filter .nice-select {
	float: none; clear: none; width: 100%; height: 48px; line-height: 46px;
	padding: 0 36px 0 15px; border: 1px solid #D6DEE8; border-radius: 6px;
	background: #fff; color: #22303F; font-size: 15px;
}
.ui-filter .nice-select:after {
	border-bottom: 2px solid #5D6275; border-right: 2px solid #5D6275;
	height: 7px; width: 7px; margin-top: -5px; right: 18px;
}
.ui-filter .nice-select .list {
	float: none; width: 100%; padding: 6px 0; margin-top: 4px;
	border: 1px solid #E6ECF2; border-radius: 6px;
	box-shadow: 0 10px 26px rgba(34, 48, 63, .14);
}
.ui-filter .nice-select .option { padding: 0 15px; line-height: 38px; min-height: 38px; font-size: 14px; color: #22303F; }
.ui-filter .nice-select .list li:hover,
.ui-filter .nice-select .list li.focus { background: #EAF3FB; color: #0B2536; }
.ui-filter .nice-select .list li.selected { background: #D6E9F8; color: #0B2536; font-weight: 600; }

/* ── ringkasan wilayah ─────────────────────────────────────────────────── */
.ui-wilayah > summary {
	list-style: none; cursor: pointer; display: flex; align-items: center;
	justify-content: space-between; gap: 12px;
	height: 48px; padding: 0 15px; border: 1px solid #D6DEE8; border-radius: 6px;
	background: #fff; font-size: 13px; color: #5D6275;
}
.ui-wilayah > summary::-webkit-details-marker { display: none; }
.ui-wilayah > summary::marker { content: ""; }
.ui-wilayah > summary:hover { border-color: #A9C6DC; }
.ui-wilayah > summary:focus-visible { outline: 2px solid #0072E5; outline-offset: 2px; }
.ui-wilayah-teks { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ui-wilayah-teks b {
	font-size: 15px; font-weight: 600; color: #22303F;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-wilayah-aksi { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: #0072E5; white-space: nowrap; }
.ui-wilayah-aksi .fa { margin-left: 4px; transition: transform .2s ease; }
.ui-wilayah[open] .ui-wilayah-aksi .fa { transform: rotate(180deg); }
.ui-wilayah.ada-isi > summary { border-color: #0072E5; background: #F5FAFE; }
.ui-wilayah-isi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0 0; }
.ui-wilayah-isi .ui-setengah { flex: none; width: auto; min-width: 0; }

/* layar sempit: semua kolom menumpuk selebar panel */
@media only screen and (max-width: 768px) {
	.ui-baris { gap: 14px; }
	.ui-baris + .ui-baris,
	.ui-filter > .ui-wilayah { margin-top: 14px; }
	.ui-baris-1 .ui-tombol-cari,
	.ui-baris-2 .ui-setengah { flex: 1 1 100%; }
	.ui-wilayah-isi { grid-template-columns: 1fr; padding-top: 14px; }
}

/* ── rapatkan ruang mati di atas hasil ──────────────────────────────────────
   Template memakai padding 50px atas+bawah pada panel filter dan 50px lagi di
   atas daftar hasil → 100px ruang kosong sebelum kartu pertama. Dua penanda
   (ui-halaman-filter / ui-hasil-filter) membatasi perubahan hanya pada halaman
   ini, tidak menyentuh halaman lain yang memakai kelas sama. */
.ui-halaman-filter { padding-top: 32px; padding-bottom: 24px; }
.ui-hasil-filter { padding-top: 24px; }

/* ══════════════════════════════════════════════════════════════════════════
   Halaman profil pemilik usaha (publik) — /pemilik/{id}[/{slug}]
   Kulit mengikuti template CityBook "author-single": pita judul beraksen +
   avatar bulat, lalu blok Tentang / Profil Usaha / Pelatihan / Sertifikat di
   kolom kiri dan widget kontak di kolom kanan.

   Pita memakai aksen gelap #0072E5 (putih di atasnya 4,79:1) karena aksen
   dasar #0084FB dengan teks putih hanya 2,21:1 dan gagal WCAG AA.
   ══════════════════════════════════════════════════════════════════════════ */
.ui-profil-head { padding: 42px 0 34px; background: #0072E5; }
.ui-profil-head .section-title h2,
.ui-profil-head .section-title h2 span { color: #fff; }
.ui-profil-head .section-title h2 { margin: 0 0 6px; }
.ui-profil-head .user-profile-avatar { margin: 16px auto 0; }
.ui-profil-meta {
	list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap;
	gap: 8px 20px; justify-content: center; color: #EAF3FB; font-size: 13.5px;
}
.ui-profil-meta li .fa { margin-right: 6px; }
.ui-profil-blok { padding: 22px 24px; text-align: left; }
.ui-profil-blok h3, .ui-profil-blok p, .ui-profil-blok b, .ui-profil-blok span { text-align: left; }
.ui-kosong { color: #5D6275; }
.ui-kosong a { color: #0072E5; font-weight: 600; }

/* kotak profil usaha: memakai gaya kartu template apa adanya. Pembungkus
   .card-listing wajib ada — gaya kartu terikat pada leluhur itu. */
.ui-profil-usaha { display: flex; flex-direction: column; gap: 16px; }
.ui-profil-usaha .listing-item { width: 100%; }

/* pelatihan yang diikuti — memakai div, bukan ul/li: gaya daftar template
   memaksa li berlebar 0px di dalam .list-single-main-item (terukur). */
.ui-pencapaian { display: block; width: 100%; }
.ui-pencapaian-baris {
	display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid #E6ECF2;
	width: 100%; float: none; text-align: left;
}
.ui-pencapaian-baris:first-child { border-top: 0; padding-top: 0; }
.ui-pencapaian-ikon {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	background: #EAF3FB; color: #0072E5; display: flex; align-items: center;
	justify-content: center; font-size: 16px;
}
.ui-pencapaian-isi { flex: 1 1 auto; min-width: 0; text-align: left; }
.ui-pencapaian-isi b { display: block; font-size: 15px; color: #22303F; }
.ui-pencapaian-meta { display: block; font-size: 13px; color: #5D6275; margin-top: 2px; }
.ui-pencapaian-isi p { margin: 6px 0 0; font-size: 13.5px; color: #5D6275; }
.ui-pencapaian-berkas { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #0072E5; }

/* sertifikat */
.ui-sertifikat {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
	width: 100%; float: none; text-align: left;
}
.ui-sertifikat-kartu {
	border: 1px solid #E6ECF2; border-radius: 8px; padding: 16px; background: #fff;
	display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.ui-sertifikat-kartu.ui-tanpa-berkas { border-style: dashed; background: #FBFCFE; }
.ui-sertifikat-ikon {
	width: 40px; height: 40px; border-radius: 8px; background: #EAF3FB; color: #0072E5;
	display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 6px;
}
.ui-sertifikat-kartu b { font-size: 14.5px; color: #22303F; }
.ui-sertifikat-nomor { font-size: 12px; color: #5D6275; }
.ui-sertifikat-tanpa { font-size: 12px; color: #5A6B80; margin-top: 6px; }
.ui-tombol-kecil {
	align-self: flex-start; margin-top: 8px; padding: 6px 12px; border-radius: 6px;
	background: #0072E5; color: #fff; font-size: 12.5px; font-weight: 600;
}
.ui-tombol-kecil:hover { background: #1B638F; color: #fff; }

.ui-profil-wa { margin-top: 10px; }
.ui-profil-kelola { display: flex; flex-direction: column; gap: 8px; }
.ui-profil-kelola .btn { width: 100%; text-align: center; }
.ui-profil-kembali { margin: 20px 0 0; font-size: 14px; }
.ui-profil-kembali a { color: #0072E5; font-weight: 600; }

@media only screen and (max-width: 768px) {
	.ui-profil-head { padding: 26px 0 22px; }
	.ui-profil-head .section-title h2 { font-size: 22px; }
	.ui-profil-blok { padding: 18px 16px; }
	.ui-sertifikat { grid-template-columns: 1fr; }
	.ui-pencapaian-baris { gap: 10px; }
	.ui-sert-baris { flex-direction: column; align-items: stretch; }
	.ui-sert-baris-aksi { justify-content: flex-start; flex-wrap: wrap; }
	.ui-sert-keterangan { padding: 0 16px 14px; }
	.ui-sert-galeri.ui-sert-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media only screen and (max-width: 540px) {
	/* spesifisitas dinaikkan: aturan dasar .ui-sert-galeri ada SETELAH blok media
	   query ini, jadi tanpa ini aturan dasar (3 kolom) yang menang. */
	.ui-sert-galeri.ui-sert-galeri { grid-template-columns: 1fr; }
}

/* ── Dashboard: Sertifikat & Pelatihan (2026-10-11) ────────────────────── */
.ui-sert-keterangan { padding: 0 24px 18px; text-align: left; }
.ui-sert-keterangan p { margin: 0 0 10px; color: #4A5568; }
.ui-sert-keterangan ul { margin: 0; padding-left: 20px; list-style: disc; }
.ui-sert-keterangan li { margin-bottom: 4px; color: #4A5568; }
.ui-wajib { color: #C0392B; font-weight: 700; }
.ui-opsional { color: #7A8699; font-weight: 400; font-size: 12px; }

.ui-sert-aksi { display: flex; align-items: center; gap: 14px; padding: 4px 0 18px; flex-wrap: wrap; }

/* Tombol utama buatan sendiri. Catatan: template punya `.custom-form button
   { background: none }` (spesifisitas 0,1,1) — karena itu aturan ini ditulis
   `.custom-form .ui-tombol-utama` (0,2,0) supaya menang. */
.custom-form .ui-tombol-utama, .ui-tombol-utama {
	display: inline-flex; align-items: center; gap: 8px;
	background: #0072E5; background-color: #0072E5; color: #fff; border: 0; border-radius: 6px;
	padding: 12px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: background .15s ease;
}
.custom-form .ui-tombol-utama:hover, .ui-tombol-utama:hover { background: #1B6390; background-color: #1B6390; }

/* Isian berkas & keterangan supaya seragam dengan isian lain di halaman ini. */
#form_sertifikat input[type="file"] {
	width: 100%; border: 1px solid #E1E8EF; border-radius: 6px; padding: 10px 12px;
	background: #fff; color: #5D6275; font-size: 13px;
}
#form_sertifikat textarea { height: 96px; min-height: 0; resize: vertical; }
.ui-bantuan { font-size: 12px; color: #7A8699; margin: 6px 0 0; }
.ui-wajib-catatan {
	display: flex; align-items: flex-start; gap: 8px;
	border: 1px solid #F3D9A6; background: #FDF8EE; color: #7A5B14;
	border-radius: 6px; padding: 9px 11px; font-size: 12.5px; line-height: 1.5;
	margin: 10px 0 0; text-align: left;
}
.ui-wajib-catatan i { color: #B8860B; margin-top: 2px; }
.ui-tombol-sibuk { opacity: .7; cursor: progress; }
.ui-sert-pesan { font-size: 13px; font-weight: 600; }
.ui-sert-pesan-ok { color: #1E7A46; }
.ui-sert-pesan-gagal { color: #C0392B; }

.ui-sert-grup { margin-bottom: 18px; }
.ui-sert-grup-judul {
	font-size: 14px; font-weight: 700; color: #0B2239; margin: 0 0 8px;
	text-transform: none; letter-spacing: 0;
}
.ui-sert-grup-judul i { color: #0072E5; margin-right: 6px; }
.ui-sert-baris {
	display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
	border: 1px solid #E6ECF2; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px;
	background: #fff; width: 100%; float: none; text-align: left;
}
.ui-sert-baris-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-sert-baris-isi b { color: #0B2239; font-size: 14px; }
.ui-sert-meta { color: #5D6275; font-size: 12px; }
.ui-sert-ket { color: #5D6275; font-size: 12.5px; }
.ui-sert-baris-aksi { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ui-tanpa-berkas-kecil { font-size: 12px; color: #8A94A6; white-space: nowrap; }
.ui-tombol-hapus {
	font-size: 12px; font-weight: 600; color: #C0392B;
	border: 1px solid #F0CBCB; background: #FDF3F3; border-radius: 6px;
	padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.ui-tombol-hapus:hover { background: #F9E4E4; }
.ui-sert-catatan { padding: 0 0 20px; color: #5D6275; font-size: 12.5px; text-align: left; }
.ui-sert-catatan i { color: #0072E5; margin-right: 5px; }

/* ── Galeri sertifikat (dipakai dashboard & profil publik) ─────────────── */
.ui-sert-galeri {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
	width: 100%; float: none; text-align: left; margin-top: 4px;
}
.ui-sert-kartu {
	display: flex; flex-direction: column;
	border: 1px solid #E6ECF2; border-radius: 10px; background: #fff;
	overflow: hidden; width: 100%; float: none; text-align: left;
}
.ui-sert-kartu-gambar {
	position: relative; width: 100%; aspect-ratio: 4 / 3; background: #F2F6FA;
	border-bottom: 1px solid #E6ECF2; overflow: hidden;
}
.ui-sert-kartu-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-sert-kartu-gambar a { display: block; width: 100%; height: 100%; }
.ui-sert-tanpa-gambar {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; width: 100%; height: 100%; color: #93A1B0; font-size: 12px;
}
.ui-sert-tanpa-gambar i { font-size: 24px; }
.ui-sert-kartu-isi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 8px; }
.ui-sert-kartu-isi b { color: #0B2239; font-size: 14px; line-height: 1.35; }
.ui-sert-kartu-aksi {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 0 14px 14px; margin-top: auto;
}

/* Pratinjau gambar yang dipilih (form sertifikat) */
.ui-berkas-pratinjau {
	display: flex; align-items: center; gap: 12px; margin: 4px 0 18px;
	border: 1px solid #CBE0F0; background: #F2F8FD; border-radius: 8px; padding: 10px 12px;
}
/* display:flex di atas mengalahkan atribut [hidden] bawaan peramban -> wajib ditulis */
.ui-berkas-pratinjau[hidden] { display: none; }
.ui-berkas-pratinjau img {
	width: 88px; height: 66px; object-fit: cover; border-radius: 6px;
	border: 1px solid #CBE0F0; background: #fff;
}
.ui-berkas-pratinjau-nama { font-size: 12.5px; color: #0072E5; font-weight: 600; word-break: break-all; }

/* Pemberitahuan batas sertifikat & catatan modul pelatihan */
.ui-sert-penuh, .ui-catatan-modul {
	display: flex; align-items: flex-start; gap: 10px;
	border-radius: 8px; padding: 12px 14px; margin: 0 0 18px;
	font-size: 13px; line-height: 1.55; text-align: left;
}
.ui-sert-penuh { border: 1px solid #F3D9A6; background: #FDF8EE; color: #7A5B14; }
.ui-sert-penuh i { color: #B8860B; margin-top: 2px; }
.ui-catatan-modul { border: 1px solid #CBE0F0; background: #F4F9FD; color: #2C5A7C; }
.ui-catatan-modul i { color: #0072E5; margin-top: 2px; }

/* Pratinjau besar gambar sertifikat — dipakai dashboard & profil publik */
.ui-pratinjau-lapis {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999;
	background: rgba(8, 20, 32, .9);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 24px; text-align: center;
}
.ui-pratinjau-gambar {
	max-width: 92vw; max-height: 82vh; border-radius: 8px; background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.ui-pratinjau-ket { color: #EAF1F8; font-size: 13.5px; margin-top: 14px; max-width: 90vw; line-height: 1.5; }
.ui-pratinjau-tutup {
	position: fixed; top: 16px; right: 18px; width: 44px; height: 44px;
	border: 0; border-radius: 50%; background: #fff; color: #0B2239;
	font-size: 22px; line-height: 1; cursor: pointer;
}
.ui-pratinjau-tutup:hover { background: #E4EEF7; }
a.ui-pratinjau-pemicu { cursor: zoom-in; }

/* Pemilih usaha di halaman Sertifikat Usaha */
.ui-pilih-usaha { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 24px 20px; }
.ui-pilih-usaha-butir {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid #DAE4EE; background: #fff; color: #33475B;
	border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600;
	text-align: left; transition: border-color .15s ease, color .15s ease;
}
.ui-pilih-usaha-butir:hover { border-color: #0072E5; color: #0072E5; }
.ui-pilih-usaha-butir i { color: #7A8699; }
.ui-pilih-usaha-aktif,
.ui-pilih-usaha-aktif:hover { background: #0072E5; border-color: #0072E5; color: #fff; }
.ui-pilih-usaha-aktif i { color: #fff; }
.ui-pilih-usaha-nama { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kode KBLI pada halaman profil usaha (2026-10-11) */
.kbli-keterangan{font-size:13px;color:#5A6B80;margin:4px 0 8px;line-height:1.6}
.kbli-profil-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.kbli-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:4px;
  background:#f2f4f7;color:#3c4450;font-size:12.5px;line-height:1.4;border:1px solid #e4e7ec}
.kbli-chip b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:#2b6cb0}
.kbli-chip-utama{background:#eaf2ff;border-color:#c7dcff}
@media(max-width:768px){.kbli-chip{font-size:12px;padding:5px 9px}}

/* Petunjuk di atas peta saat belum ada pencarian (titik usaha belum dimuat). */
.ui-petunjuk-peta {
	position: absolute; z-index: 5; left: 50%; top: 14px; transform: translateX(-50%);
	max-width: calc(100% - 32px); padding: 9px 16px; border-radius: 22px;
	background: rgba(34, 120, 176, .93); color: #fff; font-size: 13px; line-height: 1.35;
	text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none;
}
.ui-petunjuk-peta i { margin-right: 6px; }
@media only screen and (max-width: 767px) { .ui-petunjuk-peta { font-size: 12px; padding: 7px 12px; top: 10px; } }


/* ══════════════════════════════════════════════════════════════════════════════
   PALET BIRU–PUTIH (permintaan pengguna 2026-10-12)
   Satu hue (biru logo) + putih + abu-slate; tanpa hue kedua di rangka tampilan.
   Tiga tingkat biru menurut peran, semuanya terukur:
     --biru-merek  ikon, tab, garis, aksen dekoratif   kontras 3,69:1 (>=3 aman)
     --biru-tombol tombol berteks putih                kontras 4,63:1 (lulus AA)
     --biru-teks   tautan & teks biru kecil            kontras 5,49:1 (lulus AA)
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
	--biru-merek: #0084FB;
	--biru-tombol: #0072E5;
	--biru-teks: #0068C9;
	--biru-lembut: #E8F3FF;
	--teks-utama: #0F172A;
	--garis-netral: #E6EDF3;
}

/* Lencana/keping kecil memakai latar biru lembut agar aksen merek konsisten. */
.ui-bantuan, .ui-wajib-catatan { border-left-color: var(--biru-merek); }
.ui-sert-kartu:hover, .ui-pemilik-kartu:hover { border-color: var(--biru-merek); }

/* Garis fokus seragam di seluruh aplikasi (tampilan bersih + aksesibel). */
:focus-visible { outline: 3px solid rgba(0, 132, 251, .45); outline-offset: 2px; }


/* ═══ Beranda: kerapian kartu (permintaan pengguna 2026-10-12) ═══════════════════
   Deskripsi usaha di kartu dipotong 3 baris supaya beranda tidak dikuasai satu kartu;
   tautan Selengkapnya disediakan di bawahnya. Kurung siku pada lencana kategori
   dihasilkan CSS template (::before/::after) dan dihilangkan agar tampak rapi. */
.elipsis, .listing-item .elipsis {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selengkapnya {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--biru-teks, #0068C9);
	text-decoration: none;
}
.ui-selengkapnya:hover { text-decoration: underline; }
.listing-geodir-category::before,
.listing-geodir-category::after { content: none !important; }


/* ══════════════════════════════════════════════════════════════════════════════
   GELOMBANG 2 — minimalisme beranda (permintaan pengguna 2026-10-12)
   1) keseragaman lencana/radius/bayangan  2) ritme ruang  3) tipografi
   4) pemadatan bagian Kemitraan (pricing-wrap)
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1. Lencana kategori: satu warna rata (biru lembut + teks biru tua). */
.listing-geodir-category,
.geodir-category-content .listing-geodir-category {
	background: var(--biru-lembut, #E8F3FF) !important;
	background-image: none !important;
	color: var(--biru-teks, #0068C9) !important;
	border: 0;
	border-radius: 999px;
	padding: 4px 12px;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .1px;
}

/* 2. Ritme ruang: jarak antar-bagian seragam (hero dikecualikan). */
section:not(.hero-section) { padding: 64px 0; }
.gray-section { padding: 64px 0; }

/* 3. Konsistensi kartu: satu radius, satu tingkat bayangan. */
.listing-item, .listing-item-container, .card-item, .pricing-item,
.box-widget-item, .ui-sert-kartu, .ui-profil-blok {
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}
.listing-item:hover, .card-item:hover, .pricing-item:hover {
	box-shadow: 0 6px 20px rgba(15, 23, 42, .10);
}

/* 4. Tipografi: paragraf lebih lapang, judul kartu satu ukuran. */
.listing-item p, .card-item p, .box-widget p, .pricing-item p { line-height: 1.65; }
.listing-item h3 a, .card-item h3 a { font-size: 17px; line-height: 1.35; }

/* 6. Peta diberi napas: sudut membulat. Tombol zoom (+) dan (−) DIBIARKAN karena
   berguna; hanya tombol layar penuh bawaan yang disembunyikan. */
#map-main-filter, .map-container, .map-main-wrap {
	border-radius: 12px;
	overflow: hidden;
}
.leaflet-control-fullscreen { display: none !important; }




/* --- KBLI di kolom kanan profil usaha (di bawah peta, dalam Info Usaha) --- */
.box-widget .kbli-info-usaha{padding:14px 18px 4px;border-top:1px solid rgba(0,0,0,.07);}
.box-widget .kbli-info-usaha h4{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#5a6b7c;}
.box-widget .kbli-info-usaha .kbli-chip{font-size:12px;}

/* ═════════════════════════════════════════════════════════════════════════
   KOTAK KONTAK SIDEBAR (Info Usaha / Profil Pemilik / Kontak)
   Arahan pemilik 13 Okt 2026: alamat usaha di kotak kanan halaman profil usaha
   TERPOTONG ("Jl.josep Sinaga, Kel. Parapat, Kec. Girsang Sipangan Bolon, ...").
   Penyebabnya tiga aturan di style.css baris 3175-3190:
     max-width:200px  ·  display:-webkit-box  ·  -webkit-line-clamp:1
   Ketiganya diganti: label dan isi disusun dua kolom dengan flex supaya alamat
   panjang membungkus ke beberapa baris UTUH, bukan dipotong.
   ═════════════════════════════════════════════════════════════════════════ */
.list-author-widget-contacts li{
  display:flex; align-items:flex-start; gap:8px; float:none; width:100%; margin-bottom:15px;
}
.list-author-widget-contacts.list-item-widget-contacts li{ padding-bottom:15px; }
.list-author-widget-contacts li:last-child{ margin-bottom:0; }
.list-author-widget-contacts li span{
  float:none; flex:0 0 84px; min-width:84px; font-weight:500; text-align:left;
}
.list-author-widget-contacts li a{
  float:none; margin-left:0; flex:1 1 auto; min-width:0; max-width:none; display:block; height:auto;
  overflow:visible; white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  -webkit-line-clamp:none; -webkit-box-orient:initial; text-overflow:clip;
  color:#5A6B80; font-size:13.5px; line-height:1.55;
}
@media (max-width:767px){
  .list-author-widget-contacts li{ gap:6px; }
  .list-author-widget-contacts li span{ flex:0 0 76px; min-width:76px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   JENJANG A — perbaikan menyeluruh (arahan pemilik 13 Okt 2026)
   Dasar: WCAG 2.2 AA (1.4.3 kontras · 2.4.7 fokus terlihat · 2.5.8 sasaran
   minimal 24px) dan ISO/IEC 25010 sub-karakteristik operability.
   ═════════════════════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .nice-select:focus-visible{
  outline:3px solid #0068C9 !important; outline-offset:2px !important;
}
.dark-header a:focus-visible, .dark-footer a:focus-visible,
.gradient-bg a:focus-visible, .color-bg a:focus-visible{ outline-color:#FFFFFF !important; }

.ui-selengkapnya, .geodir-category-location a.map-item, .listing-rating span,
.pagination-wrap a, .footer-social a, .list-post-counter, .header-search-button,
.show-search-button, .nav-button, .coming-soon-social li a{
  display:inline-flex; align-items:center; justify-content:center; min-height:24px; min-width:24px;
}
.footer-social a, .pagination-wrap a, .header-search-button, .show-search-button, .nav-button{
  min-height:44px; min-width:44px;
}
.logo-holder a, .footer-logo a{ display:inline-flex; align-items:center; min-height:44px; }
.slick-prev, .slick-next, .slider-container-wrap button, .list-carousel button{
  min-width:44px; min-height:44px;
}
.widget-posts-img{ display:inline-flex; align-items:center; min-height:44px; }

.load-more-button, .load-more-button.button{ background:#0072E5 !important; color:#fff !important; }
.load-more-button:hover, .load-more-button.button:hover{ background:#0060C4 !important; }
.listing-rating span{ color:#5A6B80; }

/* ═════════════════════════════════════════════════════════════════════════
   REVISI KUILT HEADER & FOOTER (permintaan pemilik 13 Okt 2026)
   ═════════════════════════════════════════════════════════════════════════ */

/* 1 & 2. Logo header dikecilkan 50% dari tampilan sebelumnya (terukur 315x100).
      Tinggi dipatok 50px; lebar mengikuti rasio (158px). */
header.main-header .logo-holder img{ height:50px; width:auto; max-width:100%; }

/* Fitur pencarian di header dihapus: sisanya (bila masih muncul dari berkas lain)
   disembunyikan supaya tidak ada sisa tampilan. */
header.main-header .header-search,
header.main-header .show-search-button{ display:none !important; }

/* 3. Header tetap menempel di atas saat halaman digulir, latar pekat supaya
      konten tidak tampak menembus, dan konten diberi ruang setinggi header. */
header.main-header{
  position:fixed !important; top:0; left:0; width:100%; z-index:1000;
  background:#2F3B59; box-shadow:0 2px 12px rgba(9,26,48,.18);
}
header.main-header .header-inner{ height:76px; }
/* #main TIDAK diberi padding: template sudah menyediakan #wrapper{padding-top:80px}
   tepat setinggi bar header. Menambah padding di sini menghasilkan ruang ganda
   (80+76=156px) yang menampilkan latar navy body = "bar kosong" di bawah header. */
@media (max-width:767px){
  header.main-header .logo-holder img{ height:38px; }
  header.main-header .header-inner{ height:64px; }
  /* (padding #main di ponsel juga dibuang - alasan sama seperti di atas) */
}

/* 5. Tautan footer dipindah ke kolom bekas "Linimasa Twitter" dan disusun
      vertikal: satu tautan per baris, tanpa titik pemisah. */
footer .footer-menu-vertikal ul{ display:block; }
footer .footer-menu-vertikal li{
  display:block; float:none; width:100%; margin:0 0 10px 0; text-align:left;
}
footer .footer-menu-vertikal li:before{ content:none !important; display:none !important; }
footer .footer-menu-vertikal li a{
  display:inline-block; padding:2px 0; color:#cfd8e6; font-size:13.5px;
  /* Huruf besar di awal kata saja (permintaan pemilik 14 Okt 2026).
     Template memaksa HURUF BESAR SEMUA lewat `.footer-menu li a{text-transform:uppercase}`
     padahal teks aslinya (termasuk judul halaman statis dari t_halaman_statis) sudah
     berhuruf besar di awal kata - jadi cukup dibatalkan di sini. */
  text-transform:none; letter-spacing:normal;
}
footer .footer-menu-vertikal li a:hover{ color:#fff; }

/* Judul h1: salinan rupa dari h2/h3 template */
.section-title h1{
	float:left;
	width:100%;
	text-align:center;
	color:#566985;
	font-size:34px;
	font-weight:700;
}
.listsearch-header h1{
	float:left;
	text-align:left;
	font-size:22px;
	font-weight:700;
	color:#5D6275;
}
.error-wrap h1{
	font-size:134px;
	color:#fff;
	font-weight:900;
	font-family: 'Montserrat', sans-serif;
	letter-spacing:10px;
}

/* ═════════════════════════════════════════════════════════════════════════
   KONTRAS SISA (butir 3) — hanya elemen yang TERBUKTI gagal saat diukur
   di peramban pada latar putih/abu. Token terang (#CCC dll.) sengaja TIDAK
   disentuh: dipakai sebagai teks di latar gelap dan sudah lulus di sana.
   ═════════════════════════════════════════════════════════════════════════ */
.section-title p { color:#5A6B80; }                 /* 3,14 -> 5,46 */
.list-single-header-cat .sub-kategori-bantuan,
p.sub-kategori-bantuan { color:#5A6B80; }           /* 3,25 -> 5,46 */
.box-widget-content ul li a,
.list-single-main-item .box-widget-content a { color:#5A6B80; }  /* 3,30 -> 5,46 */
/* KOREKSI (14 Okt 2026): .list-widget-social li a DIBUANG dari daftar di atas -
   wadahnya BIRU (color.css: background:#0072E5), jadi menggelapkan teksnya membuat
   ikon sosmed hilang (keluhan pemilik). Untuk wadah biru, isinya WAJIB PUTIH. */
.list-widget-social li a,
.list-widget-social li a i { color:#fff; }
.list-widget-social li a:hover,
.list-widget-social li a:hover i { color:#fff; }

/* Judul h1 khusus pembaca layar (tidak mengubah tampilan) */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Rupa h1 lanjutan (detail, pemilik, mitra, login, registrasi) */
.list-single-header-item h1{
	float:left;
	width:100%;
	text-align:left;
	color:#fff;
	font-size:46px;
	font-weight:700;
	padding-bottom:15px;
}
.list-single-header-inside .list-single-header-item h1{
	color: #334e6f;
	font-size:36px;
}
.list-single-header-item h1 span , .list-single-header-item h1 a{
	font-size:13px;
	font-weight:400;
}
.list-single-header-item h1 a{
	font-weight:600;
	color:#5ECFB1;
}
.hero-section .intro-item h2  , .parallax-section .section-title h2  , .soon-title , .list-single-header-item h1 , .list-single-header-inside .list-single-header-item h1{
	font-size:34px;
}
.main-register h1{
	float:left;
	width:100%;
	text-align:left;
	font-size:20px;
	padding:20px 30px;
	margin-bottom:20px;
 	font-weight:600;
	color:#666;
	border-bottom:1px solid #eee;
}
.main-register h1 span{
	font-weight: 800;
    font-size: 18px;
    color: #566985;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.section-title h1{
	float:left;
	width:100%;
	text-align:center;
	color:#566985;
	font-size:34px;
	font-weight:700;
}
.parallax-section .section-title h1{
	font-size:44px;
}
.parallax-section .section-title h1  , .parallax-section .section-title p{
	color:#fff;
}
.parallax-section .section-title.left-align , .parallax-section .section-title.left-align h1{
	text-align:left;
}
.error-wrap h1{
	font-size:134px;
	color:#fff;
	font-weight:900;
	font-family: 'Montserrat', sans-serif;
	letter-spacing:10px;
}
.error-wrap h1{
	font-size:94px;
}

/* Rupa h2 pengganti h3 (judul bagian & kaki halaman) */
.list-single-main-item-title  h2{
	color: #334e6f;
	text-align: left;
    font-size: 18px;
    font-weight: 600;
}
.list-single-main-item-title  h2 a{
	color: #334e6f;
}
.footer-widget h2{
	font-size:17px;
	float:left;
	text-align:left;
	width:100%;
	margin-bottom:30px;
	color:rgba(255,255,255,0.71);
	font-weight:900;
	border-bottom:1px solid rgba(255,255,255,0.11);
	padding-bottom:25px;
}
.about-wrap .list-single-main-item-title  h2{
	font-size:24px;
}
.about-wrap .list-single-main-item-title h2{
		padding-top:30px;
	}

/* ═════════════════════════════════════════════════════════════════════════
   PERBAIKAN HEADER (permintaan pemilik 14 Okt 2026)
   1. Isi header disamakan dengan lebar wadah halaman (1424px, terpusat) supaya
      ujung kiri/kanan tidak "makan tempat" dan logo sejajar konten di bawahnya.
   2. Logo dipusatkan VERTIKAL di dalam bar (dulu menempel di atas).
   ═════════════════════════════════════════════════════════════════════════ */
header.main-header .header-inner{
  display:flex; align-items:center;
  max-width:1424px; margin:0 auto; width:100%;
  padding-left:15px; padding-right:15px; box-sizing:border-box;
}
header.main-header .logo-holder{
  display:flex; align-items:center; align-self:center;
  float:none; height:auto; margin:0; padding:0; top:auto;
}
header.main-header .logo-holder img{ display:block; height:50px; width:auto; }
@media (max-width:767px){
  header.main-header .header-inner{ padding-left:12px; padding-right:12px; }
}

/* PERBAIKAN KONTRAS SISA (terukur di peramban produksi, 14 Okt 2026)
   Semua di bawah ini adalah elemen yang GAGAL AA saat diukur - bukan sisiran token
   massal (pelajaran: token terang dipakai sebagai teks di latar gelap). */
/* 1. Tanggal berita di kaki halaman gelap: #0068C9 di #2C3B5A = 2,03:1 (gagal) */
footer.main-footer .footer-widget .widget-posts-date{ color:#9FC7F0; }
footer.main-footer .footer-widget .widget-posts-date i{ color:#9FC7F0; }
/* 2. Label menu gulir halaman detail ("Details"): #888DA0 di putih = 3,30:1 */
.scroll-nav-wrapper .scroll-nav li a:not(.act-scrlink){ color:#5A6B80; }
/* 3. Nama pengulas di kartu putih: #5ECFB1 = 1,9:1 (gagal) -> teal AA #0E7490 */
.reviews-comments-item h4 a, .reviews-comments-item h4{ color:#0E7490; }

/* ═════════════════════════════════════════════════════════════════════════
   URUTAN ISI BAR HEADER (perbaikan fatal 14 Okt 2026)
   Sebab: .header-inner dijadikan flex, sehingga `float:right` bawaan template
   DIABAIKAN dan yang berlaku urutan DOM. Padahal DAFTAR (`a.add-list`) adalah
   ANAK KEDUA (tepat setelah logo), jadi ia menumpuk di kiri.
   Perbaikan: tetapkan urutan eksplisit -> logo | menu | Login | DAFTAR, dan
   dorong kelompok kanan dengan margin-left:auto pada menu.
   ═════════════════════════════════════════════════════════════════════════ */
header.main-header .header-inner > .logo-holder{ order:1; margin-right:0; }
header.main-header .header-inner > .nav-holder{ order:2; margin-left:auto; }
header.main-header .header-inner > .show-reg-form{ order:3; }
header.main-header .header-inner > .header-user-menu{ order:3; }
header.main-header .header-inner > .add-list{ order:4; }
header.main-header .header-inner > .nav-button-wrap{ order:5; }
/* di ponsel: logo | (hamburger) | Login/DAFTAR tetap di kanan */
@media (max-width:1064px){
  header.main-header .header-inner > .nav-holder{ order:6; margin-left:auto; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PERATAAN VERTIKAL: menu, Login, dan DAFTAR harus SEBARIS (perbaikan 14 Okt 2026)
   Sebab: template menggeser ketiganya dengan `position:relative; top:` bernilai
   TETAP - menu 18px, Login 34px, DAFTAR 20px - yang dirancang untuk header lama
   yang lebih tinggi. Setelah bar header dirapikan, offset tetap itu membuat
   Login 28px dan DAFTAR 14px lebih rendah daripada menu (terukur: pusat menu
   43,5 | Login 72 | DAFTAR 58 | logo 38).
   Perbaikan: nolkan offset itu dan serahkan perataan ke flex `align-items:center`,
   dengan daftar menu dijadikan flex juga supaya kotaknya setinggi isinya
   (sebelumnya tingginya 0 karena `float`, sehingga tidak bisa dipusatkan).
   ═════════════════════════════════════════════════════════════════════════ */
header.main-header .header-inner > .nav-holder{
  top:0; float:none; height:auto;
}
header.main-header .nav-holder > nav{
  display:flex; align-items:center; height:auto; float:none; position:static;
}

header.main-header .nav-holder > nav > ul{
  display:flex; align-items:center; float:none; height:auto; margin:0;
}
header.main-header .nav-holder > nav > ul > li{
  float:none; height:auto; display:flex; align-items:center;
}
header.main-header .header-inner > .show-reg-form{ top:0; float:none; }
header.main-header .header-inner > .add-list{ top:0; float:none; }
header.main-header .header-inner > .header-user-menu{ top:0; float:none; }

/* ═════════════════════════════════════════════════════════════════════════
   ATURAN WARNA: WADAH BERLATAR BIRU MEREK -> ISINYA PUTIH (ikon & teks)
   (permintaan pemilik 14 Okt 2026; contoh: ikon medsos di halaman kontak yang
   gelap di atas kotak biru sehingga tidak terlihat).
   Ditemukan lewat penyisiran 10 halaman + 3 wadah biru beranda: satu-satunya
   pelanggar tersisa adalah <span> "UMKM" (#0068C9) di dalam
   .images-collage-title pada section.color-bg beranda - biru di atas biru.
   PENGECUALIAN yang dipertahankan: pil putih berisi teks hitam
   (.color-bg-link dan section.color-bg .header-sec-link a) - keduanya punya
   latar sendiri, jadi memang bukan kasus ini.
   ═════════════════════════════════════════════════════════════════════════ */
section.color-bg h1, section.color-bg h2, section.color-bg h3,
section.color-bg h4, section.color-bg h5, section.color-bg h6,
section.color-bg p, section.color-bg span, section.color-bg li,
section.color-bg i, section.color-bg .num, section.color-bg .inline-facts,
section.color-bg .images-collage-title, section.color-bg .images-collage-title span {
  color:#fff;
}
section.color-bg a.color-bg-link,
section.color-bg a.color-bg-link:hover,
section.color-bg .header-sec-link a { color:#000; }
section.color-bg a.color-bg-link:hover { color:#fff; }

/* ═════════════════════════════════════════════════════════════════════════
   HALAMAN KATALOG MITRA (/mitra) — rangka template listing6.html
   ("Listings Without Map"), keputusan pemilik 14 Okt 2026.
   Hampir seluruh penampilan dipikul komponen template:
   .parallax-section (kepala gambar) · .gray-bg.no-pading.no-top-padding +
   .col-list-wrap.center-col-list-wrap (kisi kartu 3 kolom) · .listsearch-maiwrap
   (panel putih) · .list-main-wrap.card-listing + .listing-item (kartu) ·
   .gradient-bg + .join-wrap (pita ajakan).
   Di bawah ini hanya penyesuaian yang benar-benar perlu.
   ═════════════════════════════════════════════════════════════════════════ */
/* Judul "Hasil untuk : ..." sebagai h2 (satu h1 per halaman). Rupanya disalin
   dari .listsearch-header h3 bawaan template supaya tak berubah. */
.listsearch-header .ui-mitra-hasil{
  float:left; text-align:left; margin:0; font-family:'Montserrat',sans-serif;
  font-size:22px; font-weight:700; color:#5D6275;
}
.listsearch-header .ui-mitra-hasil span{ color:#0068C9; }

/* ── Bidang filter (di dalam .listsearch-input-wrap template) ── */
.ui-mitra-form .listsearch-input-item{ padding:0 8px; margin-bottom:14px; }
.ui-mitra-form .listsearch-input-item:first-child{ padding-left:0; }
.ui-mitra-form label{
  display:block; text-align:left; font-size:13px; font-weight:500;
  color:#5A6B80; margin-bottom:6px;
}
.ui-mitra-form input[type=text],
.ui-mitra-form select{
  width:100%; height:46px; box-sizing:border-box; padding:0 12px;
  border:1px solid #DDE5EE; border-radius:9px; background:#fff;
  font-size:13px; color:#2F3B59;
}
.ui-mitra-form .ui-kotak-cari{ position:relative; }
.ui-mitra-form .ui-kotak-cari > i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#8A94A6;
}
.ui-mitra-form .ui-kotak-cari input{ padding-left:38px; }
/* Template punya .custom-form button{float:left;margin-top:30px;background:none}
   yang mematikan latar tombol: dinaikkan spesifisitasnya di sini. */
.ui-mitra-form .ui-mitra-aksi{ clear:both; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ui-mitra-form .button,
.ui-mitra-form .btn{
  float:none; margin:0; padding:12px 24px; border:none; border-radius:9px;
  background:#0072E5; color:#fff; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.ui-mitra-form .button:hover{ background:#0068C9; color:#fff; }
.ui-mitra-form .btn.flat-btn{ background:#fff; color:#2F3B59; border:1px solid #DDE5EE; }
.ui-mitra-form .btn.flat-btn:hover{ background:#F1F5FA; color:#2F3B59; }

/* ── Ringkasan jenis mitra (gaya lencana resmi aplikasi: biru lembut + teks biru) ── */
.ui-mitra-ringkas{
  clear:both; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  border-top:1px solid #EEF2F7; padding-top:16px; text-align:left;
}
.ui-mitra-ringkas > span{ font-size:13px; color:#5A6B80; }
.ui-mitra-ringkas > span i{ color:#0072E5; margin-right:5px; }
.ui-mitra-ringkas > span b{ color:#2F3B59; font-weight:700; }
.ui-mitra-ringkas .ui-mitra-daftar a{ color:#0068C9; font-weight:600; }

/* ── Kartu mitra ── */
/* Template memakai .card-listing .geodir-category-img img{object-fit:cover} sehingga
   logo kecil ditarik penuh. Bidang logo mitra dibuat 'contain' agar utuh. */
.card-listing .ui-mitra-logo{ height:172px !important; background:#F4F7FB; }
.card-listing .ui-mitra-logo img{
  width:100%; height:100%; object-fit:contain !important; padding:24px;
  position:relative; z-index:2; flex:none;
}
.ui-mitra-logo .overlay{ opacity:.03; }
.ui-mitra-logo-ikon{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  color:#C6D4E6; font-size:74px; position:relative; z-index:2;
}
.ui-mitra-avatar{
  display:flex; align-items:center; justify-content:center; background:#0072E5;
  border:6px solid rgba(255,255,255,.4); border-radius:100%; color:#fff; font-size:22px;
}
.card-listing .geodir-category-content{ text-align:left; padding-bottom:22px; }
.card-listing .geodir-category-content p{ color:#5A6B80; }
.card-listing .card-btn{ float:right; margin-top:0; padding:11px 22px; font-size:12px; }
.card-listing .geodir-category-location{ float:left; }

/* ── Keadaan kosong / pencarian tanpa hasil ── */
.ui-mitra-kosong{
  background:#fff; border:1px dashed #CFD9E6; border-radius:14px;
  padding:54px 24px; text-align:center; clear:both;
}
.ui-mitra-kosong > i{ font-size:46px; color:#9FB2C9; }
.ui-mitra-kosong h3{ font-size:19px; margin:16px 0 8px; color:#2F3B59; }
.ui-mitra-kosong p{ max-width:560px; margin:0 auto 20px; color:#5A6B80; }
.ui-mitra-kosong .button{
  display:inline-flex; align-items:center; gap:6px; padding:12px 24px;
  border-radius:9px; background:#0072E5; color:#fff; font-size:13px; font-weight:600;
  border:none; text-decoration:none;
}
.ui-mitra-kosong .button:hover{ background:#0068C9; color:#fff; }

/* ── Pita ajakan (.gradient-bg + .join-wrap template) ── */
.join-wrap-btn{ color:#2F3B59; font-size:12px; font-weight:700; }
.join-wrap-btn:hover{ background:#2F3B59; color:#fff; }

@media (max-width:767px){
  .listsearch-header .ui-mitra-hasil{ float:none; font-size:19px; }
  .ui-mitra-form .listsearch-input-item{ width:100%; padding:0; }
  .card-listing .ui-mitra-logo{ height:150px !important; }
  .card-listing .card-btn{ float:none; margin-top:14px; display:inline-block; }
}

/* Ruang kosong besar di bawah kartu berasal dari .center-col-list-wrap bawaan
   template yang dipatok min-height (577px terukur) - di halaman listing6 versi
   template, ruang itu terisi oleh banyak kartu. Untuk katalog mitra (dan saat
   jumlah mitra masih sedikit) tingginya diserahkan ke isi. */
section.gray-bg.no-pading.no-top-padding > .col-list-wrap.center-col-list-wrap{ min-height:0; }

/* ── Perbaikan ikon kaca pembesar pada kotak cari ──
   Sebelumnya ikon diposisikan absolut terhadap kotak input sehingga jatuh
   menumpuk label "Cari mitra" (terlihat di tangkapan layar pemilik). Kini
   kotak itu flex: ikon & input sebaris, ikon otomatis di tengah tinggi kotak. */
.ui-mitra-form .ui-kotak-cari{
  display:flex; align-items:center; height:46px; box-sizing:border-box;
  border:1px solid #DDE5EE; border-radius:9px; background:#fff;
}
.ui-mitra-form .ui-kotak-cari > i{ position:static; padding-left:14px; color:#8A94A6; line-height:1; font-size:14px; align-self:center; }
.ui-mitra-form .ui-kotak-cari input{
  border:none; height:44px; padding-left:10px; padding-right:12px; flex:1 1 auto; background:transparent;
}
/* ── Kotak statistik jenis mitra (warna berbeda per jenis, ikon & angka putih) ── */
.ui-mitra-statistik{ margin:26px 0 6px; }
.ui-mitra-statistik .statistic-item-wrap{ width:33.3333%; padding:0 8px; }
.ui-mitra-statistik .statistic-item-wrap:first-child{ padding-left:0; }
.ui-mitra-statistik .statistic-item-wrap:last-child{ padding-right:0; }
.ui-mitra-statistik .statistic-item{ border-radius:14px; padding:22px 26px 18px; position:relative; overflow:hidden; }
.ui-stat-pemerintah{ background:#0072E5; }   /* biru merek - putih 4,63:1 (AA) */
.ui-stat-perusahaan{ background:#15803D; }   /* hijau tua  - putih 5,3:1  (AA) */
.ui-stat-organisasi{ background:#0E7490; }   /* teal tua   - putih 5,0:1  (AA) */
.ui-mitra-statistik .statistic-item i{ font-size:80px; opacity:.9; }
.ui-mitra-statistik .statistic-item-numder{ font-size:34px; font-weight:800; line-height:1.1; }
.ui-mitra-statistik .statistic-item h5{ font-size:14px; font-weight:600; letter-spacing:.2px; }
.ui-mitra-daftar-buka{
  clear:both; margin-top:14px; padding-top:14px; border-top:1px solid #EEF2F7;
  font-size:13px; color:#2F3B59; text-align:left;
}
.ui-mitra-daftar-buka i{ color:#15803D; margin-right:5px; }
.ui-mitra-daftar-buka a{ color:#0068C9; font-weight:600; }
@media (max-width:767px){
  .ui-mitra-statistik .statistic-item-wrap{ width:100%; padding:0; margin-bottom:12px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   KARTU USAHA SERAGAM (tinggi & lebar sama walau isinya sedikit)
   Permintaan pemilik 14 Okt 2026, berlaku di SEMUA halaman berkartu
   (.card-listing): beranda (UMKM Terbaru), /umkm, /berita, /mitra, profil pemilik.
   Sebab ketidaksamaan (terukur di produksi): deskripsi kartu memakai `float:left`
   bawaan template, sehingga pada deskripsi PENDEK tautan "Selengkapnya" naik ke
   sampingnya dan kartu jadi 30px lebih pendek (464,3px vs 494,3px).
   Perbaikan: float dimatikan, deskripsi dipatok 3 baris, dan baris ulasan +
   lokasi dijaga setinggi 2 baris - jadi semua kartu berakhir sama.
   ═════════════════════════════════════════════════════════════════════════ */
.listing-item .geodir-category-content .elipsis,
.card-listing .geodir-category-content .elipsis{
  float:none !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3 !important;
  overflow:hidden;
  line-height:1.5;
  /* Lebar WAJIB dipatok: tanpa `float` (dimatikan di atas) lebar kotak ini
     terukur 0px di template ini (uji: width:100% -> 404px, teks kembali tampil),
     karena ruangnya dipengaruhi float leluhur. */
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
  height:63px;              /* 3 baris x 21px */
  margin:0 0 10px 0 !important;
}
.listing-item .geodir-category-content .ui-selengkapnya{
  float:none !important;
  display:block;
  margin:0 0 16px 0;
}
.listing-item .geodir-category-content h3 a.judul_elipsis,
.listing-item.list-layout .geodir-category-content h3 a.judul_elipsis,
.card-listing .geodir-category-content h3 a.judul_elipsis{
  /* Judul SELALU 1 baris. Di tata letak daftar (ponsel) klip bawaan template
     tidak berlaku (terukur judul 3 baris = 71,8px vs 23,9px) sehingga tinggi
     kartu berbeda-beda; di sini display -webkit-box dipaksa juga untuk list-layout. */
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:1 !important;
  overflow:hidden !important;
  width:100% !important;
  max-height:26px;
}
.listing-item .geodir-category-content .geodir-category-options{ min-height:106px; }
.listing-item .geodir-category-content .geodir-category-location{ min-height:47px; }
/* Kartu mengisi tinggi barisnya pada kisi (bukan carousel) */
.card-listing .listing-item{ display:block; }
/* Di ponsel pun tinggi baris ulasan & lokasi TETAP dipatok: itulah yang membuat
   kartu seragam pada tampilan daftar (list-layout) di /umkm. */
@media (max-width:767px){
  .listing-item .geodir-category-content .geodir-category-options{ min-height:106px; }
  .listing-item .geodir-category-content .geodir-category-location{ min-height:47px; }
}

/* Medan cari mitra: input-nya terukur 9px lebih tinggi daripada kotaknya
   (template memberi margin bawah pada input, sehingga di dalam baris flex ia
   terdorong ke atas dan teks tampak rata-atas). Margin dinolkan supaya benar
   di tengah kotak. Placeholder dihapus (permintaan pemilik 14 Okt 2026). */
.ui-mitra-form .ui-kotak-cari input{ margin:0 !important; align-self:center; }
.ui-mitra-form .ui-kotak-cari{ align-items:center; }
.ui-mitra-form select, .ui-mitra-form input[type=text]{ margin-bottom:0 !important; }

/* Ikon kaca pembesar: tadinya dipatok 'top' oleh template sehingga terukur
   7px di atas titik tengah kotak (ikon 612 vs kotak 619). Digeser ke tengah. */
.ui-mitra-form .ui-kotak-cari i{
  position:absolute; top:50% !important; transform:translateY(-50%); line-height:1;
}
.ui-mitra-form .ui-kotak-cari{ position:relative; }