/*
Theme Name: UKMKU AZZAM
Theme URI: https://ukmku.biz.id/
Description: Tema anak ListingHive bergaya AZZAM — latar terang, aksen navy/indigo + gradasi halus, kartu membulat, tipografi Plus Jakarta Sans.
Author: AZZAM Indonesia Digital
Template: listinghive
Version: 1.0.0
License: GNU General Public License v3 or later
Text Domain: ukmku-azzam
*/

/* ============================================================
   1. TOKEN WARNA & DASAR
   ============================================================ */
:root {
  --az-navy: #0e2350;
  --az-navy-2: #16326e;
  --az-indigo: #2a3f8f;
  --az-accent: #4361ee;
  --az-violet: #7c3aed;
  --az-bg: #f5f8fd;
  --az-card: #ffffff;
  --az-text: #0f172a;
  --az-muted: #5b6b85;
  --az-border: #e3eaf7;
  --az-radius: 18px;
  --az-radius-sm: 12px;
  --az-shadow: 0 10px 30px rgba(14, 35, 80, .07);
  --az-shadow-hover: 0 18px 40px rgba(14, 35, 80, .14);
  --az-grad: linear-gradient(135deg, var(--az-navy) 0%, var(--az-indigo) 55%, var(--az-violet) 130%);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--az-bg) !important;
  color: var(--az-text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--az-indigo); }
a:hover { color: var(--az-accent); }

h1, h2, h3, h4, .site-title a { color: var(--az-navy); font-weight: 800; letter-spacing: -.02em; }

.container, .hp-container { max-width: 1180px; }

/* ============================================================
   2. KEPALA SITUS & NAVIGASI
   ============================================================ */
.site-header {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--az-border);
  box-shadow: 0 1px 0 rgba(14, 35, 80, .03);
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header .site-title, .site-header .site-title a { font-weight: 800; }
.site-header .site-title a { color: var(--az-navy); }
.site-header .site-description { color: var(--az-muted); font-size: .82rem; }

.navbar .menu > li > a, .main-navigation a {
  color: var(--az-navy);
  font-weight: 600;
  border-radius: 10px;
  padding: .45rem .7rem;
}
.navbar .menu > li > a:hover, .main-navigation a:hover {
  background: rgba(67, 97, 238, .08);
  color: var(--az-indigo);
  text-decoration: none;
}
.navbar .menu > .current-menu-item > a, .navbar .menu > .current_page_item > a {
  color: var(--az-accent);
  background: rgba(67, 97, 238, .10);
}

/* tombol utama (Masuk / Pasang Usaha) */
.hp-button, .wp-block-button__link, button.hp-form__button, .button-primary {
  border-radius: var(--az-radius-sm) !important;
  font-weight: 700 !important;
  border: 0 !important;
}
.site-header .hp-button, .hp-button--primary, button.hp-form__button[type="submit"] {
  background: var(--az-grad) !important;
  color: #fff !important;
  padding: .58rem 1.05rem !important;
  box-shadow: 0 8px 20px rgba(42, 63, 143, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.site-header .hp-button:hover, .hp-button--primary:hover, button.hp-form__button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(42, 63, 143, .32);
  color: #fff !important;
}

/* ============================================================
   3. HERO (beranda & arsip kategori)
   ============================================================ */
.az-hero {
  position: relative;
  background: var(--az-grad);
  color: #fff;
  padding: 3.6rem 0 4.6rem;
  overflow: hidden;
}
.az-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -55% 55%;
  height: 420px;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .18), transparent 62%);
  pointer-events: none;
}
.az-hero__inner { position: relative; z-index: 2; }
.az-hero h1 {
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  margin: 0 0 .6rem;
}
.az-hero p { color: rgba(255, 255, 255, .88); font-size: 1.03rem; max-width: 46rem; }
.az-hero__badge {
  display: inline-block;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.az-hero .hp-form--listing-search {
  background: #fff;
  border-radius: var(--az-radius);
  padding: .7rem .8rem;
  box-shadow: 0 20px 45px rgba(6, 18, 45, .28);
  margin-top: 1.6rem;
}
.az-hero .hp-form--listing-search .hp-field,
.az-hero .hp-form--listing-search select,
.az-hero .hp-form--listing-search input { color: var(--az-text); }

.az-hero--kecil { padding: 2.6rem 0 3.4rem; }
.az-hero--kecil h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* ============================================================
   4. SEKSI & JUDUL
   ============================================================ */
.az-section { padding: 2.8rem 0 .4rem; }
.az-section__head { margin-bottom: 1.3rem; }
.az-section__head h2 {
  font-size: 1.42rem;
  margin: 0 0 .25rem;
  position: relative;
  padding-bottom: .6rem;
}
.az-section__head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 4px;
  border-radius: 4px;
  background: var(--az-grad);
}
.az-section__head p { color: var(--az-muted); margin: .5rem 0 0; }

/* ============================================================
   5. KARTU USAHA
   ============================================================ */
.hp-listings { margin: 0 -.6rem; }
.hp-listings .hp-row { display: flex; flex-wrap: wrap; }
.hp-listing.hp-listing--view-block {
  background: var(--az-card);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hp-listing.hp-listing--view-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--az-shadow-hover);
  border-color: rgba(67, 97, 238, .35);
}
.hp-listing__image { position: relative; overflow: hidden; background: #eef2fb; }
.hp-listing__image img { transition: transform .35s ease; }
.hp-listing.hp-listing--view-block:hover .hp-listing__image img { transform: scale(1.05); }

/* kartu tanpa foto → latar bermotif (bukan kotak kosong) */
.hp-listing__image:empty::after {
  content: attr(data-azzam-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .92);
  background: var(--az-grad);
}

.hp-listing__content { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.hp-listing__category, .hp-listing__categories a {
  display: inline-block;
  background: rgba(67, 97, 238, .10);
  color: var(--az-indigo) !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .22rem .6rem;
  border-radius: 999px;
  text-decoration: none;
}
.hp-listing__title, .hp-listing__title a {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--az-navy) !important;
  line-height: 1.3;
  text-decoration: none;
}
.hp-listing__title a:hover { color: var(--az-accent) !important; }
.hp-listing__details, .hp-listing__date, .hp-listing__content p {
  color: var(--az-muted);
  font-size: .88rem;
  line-height: 1.5;
}
.hp-listing__footer { margin-top: auto; border-top: 1px solid var(--az-border); padding-top: .7rem; }
.hp-listing__actions .hp-button {
  background: rgba(67, 97, 238, .10) !important;
  color: var(--az-indigo) !important;
  font-size: .82rem !important;
  padding: .45rem .85rem !important;
  box-shadow: none;
}
.hp-listing__actions .hp-button:hover { background: var(--az-indigo) !important; color: #fff !important; }

/* ============================================================
   6. KARTU KATEGORI
   ============================================================ */
.hp-listing-categories .hp-listing-category, .hp-listing-category--view-block {
  background: var(--az-card);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 1.1rem 1.15rem;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  height: 100%;
}
.hp-listing-category:hover, .hp-listing-category--view-block:hover {
  transform: translateY(-3px);
  box-shadow: var(--az-shadow-hover);
  border-color: rgba(67, 97, 238, .35);
}
.hp-listing-category__name, .hp-listing-category__name a {
  font-weight: 800;
  color: var(--az-navy) !important;
  font-size: 1rem;
  text-decoration: none;
}
.hp-listing-category__count, .hp-listing-category__item-count {
  color: var(--az-muted);
  font-size: .82rem;
  font-weight: 600;
}

/* ============================================================
   7. BILAH SARING & TOPBAR
   ============================================================ */
.hp-widget--listing-filter, .widget--sidebar {
  background: var(--az-card);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 1.1rem 1.15rem;
}
.hp-form__footer button, .hp-button--listing-filter {
  background: var(--az-grad) !important;
  color: #fff !important;
  width: 100%;
  padding: .6rem 1rem !important;
}
.hp-page__topbar { color: var(--az-muted); font-size: .88rem; }
.hp-result-count { font-weight: 600; color: var(--az-muted); }
.hp-form--listing-sort select { border-radius: var(--az-radius-sm); border-color: var(--az-border); }

/* ============================================================
   8. WILAYAH & AJAKAN
   ============================================================ */
.az-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.az-chips a {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--az-border);
  color: var(--az-navy) !important;
  font-size: .86rem;
  font-weight: 600;
  padding: .45rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(14, 35, 80, .04);
}
.az-chips a:hover {
  background: var(--az-grad);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(42, 63, 143, .25);
}

.az-cta {
  margin: 3rem 0 1rem;
  background: var(--az-grad);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  color: #fff;
  box-shadow: 0 20px 45px rgba(14, 35, 80, .22);
}
.az-cta h2 { color: #fff; margin: 0 0 .5rem; font-size: 1.4rem; }
.az-cta p { color: rgba(255, 255, 255, .9); margin: 0 0 1.1rem; }
.az-cta .hp-button, .az-cta a.az-cta__tombol {
  display: inline-block;
  background: #fff !important;
  color: var(--az-navy) !important;
  font-weight: 800;
  padding: .7rem 1.3rem;
  border-radius: var(--az-radius-sm);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(6, 18, 45, .22);
}
.az-cta a.az-cta__tombol:hover { transform: translateY(-1px); }

/* ============================================================
   9. KAKI SITUS
   ============================================================ */
.site-footer {
  background: var(--az-navy) !important;
  color: rgba(255, 255, 255, .82);
  margin-top: 3rem;
  padding: 2.2rem 0 1.6rem;
}
.site-footer a { color: rgba(255, 255, 255, .92) !important; font-weight: 600; }
.site-footer a:hover { color: #fff !important; }
.site-footer .menu { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; }
.site-footer .menu li { margin: 0; }

/* ============================================================
   10. RAPIAN UMUM
   ============================================================ */
.hp-block, .hp-page { background: transparent; }
.entry-content img, .hp-listing__image img { border-radius: var(--az-radius-sm); }
.hp-field input, .hp-field select, .hp-field textarea {
  border-radius: var(--az-radius-sm) !important;
  border-color: var(--az-border) !important;
  padding: .6rem .75rem;
}
.hp-field input:focus, .hp-field select:focus, .hp-field textarea:focus {
  border-color: var(--az-accent) !important;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, .14) !important;
  outline: none;
}
.hp-pagination a, .hp-pagination span {
  border-radius: 10px;
  border: 1px solid var(--az-border);
  padding: .35rem .7rem;
  margin-right: .25rem;
  color: var(--az-navy);
}
.hp-pagination .page-numbers.current { background: var(--az-grad); color: #fff; border-color: transparent; }

@media (max-width: 800px) {
  .az-hero { padding: 2.6rem 0 3.2rem; }
  .az-section { padding: 2rem 0 .3rem; }
  .az-cta { padding: 1.6rem 1.2rem; }
}
/* ============================================================
   11. RAPIAN: form pencarian di hero, kartu kategori & foto kosong
   (dipasang 23-Sep-2026 setelah pemeriksaan tampilan)
   ============================================================ */

/* a. Form pencarian di dalam hero: jadikan satu baris rapi, tombol tidak melewati batas */
.az-hero .hp-form--listing-search {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: nowrap;
}
.az-hero .hp-form--listing-search .hp-form__fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.az-hero .hp-form--listing-search .hp-form__field--search { flex: 1 1 auto; min-width: 0; }
.az-hero .hp-form--listing-search .hp-field--search,
.az-hero .hp-form--listing-search select {
  width: 100%;
  border: 1px solid var(--az-border) !important;
  background: #fff;
}
.az-hero .hp-form--listing-search .hp-form__footer { flex: 0 0 auto; margin: 0; }
.az-hero .hp-form--listing-search .hp-form__button,
.az-hero .hp-form--listing-search button[type="submit"] {
  white-space: nowrap;
  padding: .62rem 1.5rem !important;
  background: var(--az-grad) !important;
  color: #fff !important;
  border-radius: var(--az-radius-sm) !important;
  box-shadow: 0 8px 20px rgba(42, 63, 143, .25);
}
@media (max-width: 700px) {
  .az-hero .hp-form--listing-search { flex-wrap: wrap; }
  .az-hero .hp-form--listing-search .hp-form__footer,
  .az-hero .hp-form--listing-search .hp-form__button { width: 100%; }
}

/* b. Kartu kategori: sembunyikan kotak gambar kosong, buat kartu ringkas & informatif */
.hp-listing-category__image { display: none !important; }
.hp-listing-category, .hp-listing-category--view-block {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 1.3rem !important;
}
.hp-listing-category__header { display: flex; align-items: center; justify-content: space-between; }
.hp-listing-category__name { font-size: 1.05rem; margin: 0; }
.hp-listing-category__name::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: .5rem;
  border-radius: 3px;
  background: var(--az-grad);
  vertical-align: middle;
}

/* c. Kartu usaha tanpa foto: ganti gambar bawaan (ikon abu-abu) dengan latar bergradasi */
.hp-listing__image:has(img[src*="placeholders/"]) {
  background: var(--az-grad);
  min-height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hp-listing__image:has(img[src*="placeholders/"]) img { display: none; }
.hp-listing__image:has(img[src*="placeholders/"])::before {
  content: "UKMKU";
  color: rgba(255, 255, 255, .92);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .22em;
}
/* cadangan untuk peramban lama yang belum mengenal :has() — gambar bawaan disembunyikan saja */
@supports not (selector(:has(*))) {
  .hp-listing__image img[src*="placeholders/"] { opacity: 0; }
  .hp-listing__image { background: var(--az-grad); min-height: 172px; }
}
/* ============================================================
   12. RAPIAN KEDUA (23-Sep-2026) — paksa tata letak
   Form pencarian: satu baris, tombol tidak melewati batas hero.
   Kartu kategori: nama di atas, jumlah di bawah, semuanya di dalam kartu.
   ============================================================ */

/* --- Form pencarian di hero --- */
.az-hero .hp-form--listing-search {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: .5rem;
  box-sizing: border-box;
  max-width: 100%;
  padding: .6rem .65rem !important;
}
.az-hero .hp-form--listing-search .hp-form__fields {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin: 0 !important;
  width: auto !important;
}
.az-hero .hp-form--listing-search .hp-field--hidden,
.az-hero .hp-form--listing-search select.hp-field--hidden { display: none !important; }
.az-hero .hp-form--listing-search .hp-form__field--search {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
}
.az-hero .hp-form--listing-search input.hp-field--search {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: .58rem .75rem !important;
}
.az-hero .hp-form--listing-search .hp-form__footer {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.az-hero .hp-form--listing-search button,
.az-hero .hp-form--listing-search .hp-form__button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: .6rem 1.35rem !important;
  margin: 0 !important;
  background: var(--az-grad) !important;
  color: #fff !important;
  border-radius: var(--az-radius-sm) !important;
}
@media (max-width: 700px) {
  .az-hero .hp-form--listing-search { flex-wrap: wrap !important; }
  .az-hero .hp-form--listing-search .hp-form__footer,
  .az-hero .hp-form--listing-search button { width: 100% !important; }
}

/* --- Kartu kategori: susun ulang agar rapi di dalam kartu --- */
.hp-listing-category,
.hp-listing-category--view-block {
  display: flex !important;
  flex-direction: column !important;
  gap: .2rem !important;
  padding: 1.2rem 1.25rem !important;
  background: var(--az-card) !important;
  border: 1px solid var(--az-border) !important;
  border-radius: var(--az-radius) !important;
  box-shadow: var(--az-shadow) !important;
}
.hp-listing-category__image { display: none !important; }
.hp-listing-category__header { order: 2 !important; display: block !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.hp-listing-category__content { order: 1 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.hp-listing-category__name { margin: 0 0 .15rem !important; font-size: 1.02rem !important; }
.hp-listing-category__name a {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--az-navy) !important;
}
.hp-listing-category__count,
.hp-listing-category__item-count {
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--az-muted) !important;
  background: transparent !important;
  padding: 0 !important;
}
.hp-listing-category:hover { border-color: rgba(67, 97, 238, .35) !important; }
/* ============================================================
   13. RAPIAN KETIGA (23-Sep-2026) — lebar form pencarian
   ============================================================ */
.az-hero .hp-form--listing-search {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}
.az-hero .hp-form--listing-search *,
.az-hero .hp-form--listing-search .hp-field {
  box-sizing: border-box;
  min-width: 0 !important;
}
.az-hero .hp-form--listing-search .hp-form__fields { width: 100% !important; overflow: hidden; }
.az-hero .hp-form--listing-search input.hp-field--search { flex: 1 1 auto !important; width: auto !important; }
.az-hero__inner { padding-right: .5rem; padding-left: .5rem; }

/* Halaman hasil pencarian & daftar usaha */
.az-cari-header { background: var(--az-bg); padding: 1.6rem 0 0; }
.az-cari-header h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.az-cari-header p { color: var(--az-muted); margin: 0 0 1rem; }
.page .hp-form--listing-search, .page span[id^=more-] + .hp-form--listing-search { margin-top: 0 !important; }
/* ============================================================
   14. KARTU HASIL PENCARIAN (template search.php)
   ============================================================ */
.az-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 900px) { .az-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .az-grid { grid-template-columns: 1fr; } }

.az-kartu {
  background: var(--az-card);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.az-kartu:hover {
  transform: translateY(-4px);
  box-shadow: var(--az-shadow-hover);
  border-color: rgba(67, 97, 238, .35);
}
.az-kartu__gambar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background: var(--az-grad);
  text-decoration: none;
}
.az-kartu__gambar span {
  color: rgba(255, 255, 255, .92);
  font-weight: 800;
  letter-spacing: .22em;
  font-size: 1rem;
}
.az-kartu__isi { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.az-kartu__kategori {
  align-self: flex-start;
  background: rgba(67, 97, 238, .10);
  color: var(--az-indigo);
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 999px;
}
.az-kartu__judul { margin: .15rem 0 0; font-size: 1.05rem; line-height: 1.3; }
.az-kartu__judul a { color: var(--az-navy) !important; text-decoration: none; font-weight: 800; }
.az-kartu__judul a:hover { color: var(--az-accent) !important; }
.az-kartu__wilayah, .az-kartu__jam { margin: 0; color: var(--az-muted); font-size: .86rem; }
.az-kartu__wilayah::before { content: "📍 "; }
.az-kartu__jam::before { content: "🕒 "; }
.az-kartu__kaki {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--az-border);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.az-kartu__wa, .az-kartu__detail, a.az-tombol {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  padding: .45rem .85rem;
  border-radius: var(--az-radius-sm);
  text-decoration: none;
}
.az-kartu__wa, a.az-tombol {
  background: var(--az-grad);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(42, 63, 143, .22);
}
.az-kartu__wa:hover, a.az-tombol:hover { color: #fff !important; transform: translateY(-1px); }
.az-kartu__detail { background: rgba(67, 97, 238, .10); color: var(--az-indigo) !important; }
.az-kartu__detail:hover { background: var(--az-indigo); color: #fff !important; }
/* ============================================================
   15. KOTAK PENCARIAN VERSI SENDIRI (.az-cari)
   Menggantikan blok HivePress di hero karena tata letaknya bentrok.
   ============================================================ */
.az-cari {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem auto;
  gap: .55rem;
  align-items: center;
  background: #fff;
  border-radius: var(--az-radius);
  padding: .65rem;
  box-shadow: 0 20px 45px rgba(6, 18, 45, .28);
  margin-top: 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.az-cari__medan, .az-cari__pilih { min-width: 0; }
.az-cari input[type="search"],
.az-cari select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-sm);
  padding: .68rem .8rem;
  font-size: .95rem;
  color: var(--az-text);
  background: #fff;
  font-family: inherit;
}
.az-cari input[type="search"]:focus,
.az-cari select:focus {
  border-color: var(--az-accent);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, .14);
  outline: none;
}
.az-cari__tombol {
  border: 0;
  cursor: pointer;
  background: var(--az-grad);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  padding: .7rem 1.5rem;
  border-radius: var(--az-radius-sm);
  font-family: inherit;
  box-shadow: 0 8px 20px rgba(42, 63, 143, .25);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.az-cari__tombol:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(42, 63, 143, .32); }

@media (max-width: 820px) {
  .az-cari { grid-template-columns: 1fr 1fr; }
  .az-cari__medan { grid-column: 1 / -1; }
  .az-cari__tombol { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .az-cari { grid-template-columns: 1fr; }
}
/* ============================================================
   16. Kotak pencarian bawaan HivePress di halaman arsip/kategori
   (dipakai HivePress di templatnya sendiri) — pastikan tidak meluber.
   ============================================================ */
.hp-form--listing-search {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.hp-form--listing-search .hp-form__fields {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.hp-form--listing-search .hp-form__field,
.hp-form--listing-search .hp-form__field--search { min-width: 0 !important; }
.hp-form--listing-search input.hp-field--search {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.hp-form--listing-search .hp-form__footer { flex: 0 0 auto !important; }
.hp-form--listing-search button.hp-form__button {
  white-space: nowrap !important;
  background: var(--az-grad) !important;
  color: #fff !important;
  border-radius: var(--az-radius-sm) !important;
}
.tax-hp_listing_category .hp-form--listing-search { margin-top: 0 !important; }
/* ============================================================
   17. AKAR MASALAH "tombol terpotong" (23-Sep-2026)
   Hiasan latar hero (.az-hero::after dengan inset -10%) melebar melewati sisi kanan
   halaman → halaman jadi lebih lebar dari layar → sisi kanan tampak terpotong
   (tombol "Cari" ikut terlihat terpotong padahal tata letaknya benar).
   Perbaikan: potong hiasan di dalam hero + kunci gulir mendatar halaman.
   ============================================================ */
.az-hero { overflow: hidden; }
.az-hero::after { right: 0 !important; }
body.azzam-ukmku { overflow-x: hidden; }
.site, .site-content, .hp-page, .hp-page__content { max-width: 100%; }

/* Tata letak kotak pencarian dengan flex (lebih bandel daripada grid) */
.az-cari {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: .55rem;
  overflow: hidden;
}
.az-cari__medan { flex: 1 1 auto !important; min-width: 0 !important; }
.az-cari__pilih { flex: 0 1 12rem !important; min-width: 7rem !important; }
.az-cari__tombol { flex: 0 0 auto !important; }
@media (max-width: 820px) {
  .az-cari { flex-wrap: wrap !important; }
  .az-cari__medan, .az-cari__tombol { flex: 1 1 100% !important; }
}
/* ============================================================
   18. VERSI FINAL kotak pencarian + hero penuh lebar (23-Sep-2026)
   Susunan: baris 1 = kata kunci (selebar kotak), baris 2 = kategori + tombol.
   Dengan begini tidak ada elemen yang bisa melewati batas kotak.
   ============================================================ */
.az-cari {
  display: block !important;
  background: #fff;
  border-radius: var(--az-radius);
  padding: .7rem;
  box-shadow: 0 20px 45px rgba(6, 18, 45, .28);
  margin-top: 1.5rem;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible;
}
.az-cari__medan { display: block !important; width: 100% !important; }
.az-cari__medan input[type="search"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-sm);
  padding: .7rem .85rem;
  font-size: .95rem;
  font-family: inherit;
  color: var(--az-text);
}
.az-cari__bawah {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: .55rem;
  margin-top: .55rem;
  align-items: stretch;
}
.az-cari__bawah select {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-sm);
  padding: .68rem .8rem;
  font-size: .95rem;
  font-family: inherit;
  color: var(--az-text);
  background: #fff;
}
.az-cari__tombol {
  flex: 0 0 auto !important;
  border: 0;
  cursor: pointer;
  background: var(--az-grad);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  font-family: inherit;
  padding: .68rem 1.6rem;
  border-radius: var(--az-radius-sm);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(42, 63, 143, .25);
}
.az-cari__tombol:hover { transform: translateY(-1px); }
.az-cari input:focus, .az-cari select:focus {
  border-color: var(--az-accent) !important;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, .14);
  outline: none;
}

/* Hero penuh lebar (lepas dari wadah bawaan tema) + isi dibatasi 1080px */
.az-hero {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}
.az-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.1rem;
  box-sizing: border-box;
}
.az-cari, .az-hero .hp-form--listing-search { max-width: 640px; }

@media (max-width: 600px) {
  .az-cari__bawah { flex-wrap: wrap; }
  .az-cari__tombol { flex: 1 1 100% !important; }
}

/* 19. Pastikan warna tombol Cari memakai gradasi AZZAM (bukan warna bawaan tema induk) */
.az-cari__tombol, .az-cari button[type="submit"] {
  background: linear-gradient(135deg, #0e2350 0%, #2a3f8f 55%, #7c3aed 130%) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ============================================================
   20. Halaman detail usaha (23-Sep-2026)
   - tombol WhatsApp menonjol (data itu yang dicari pengunjung)
   - kolom kanan yang kosong (atribut HivePress belum diisi) disembunyikan
   ============================================================ */
.single-hp_listing .hp-page__sidebar { display: none !important; }
.single-hp_listing .hp-page__content,
.single-hp_listing .hp-col-sm-8 { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }

.single-hp_listing .hp-page__content a[href^="https://wa.me"],
.single-hp_listing .hp-page__content a[href^="http://wa.me"] {
  display: inline-block;
  background: linear-gradient(135deg, #0e2350 0%, #2a3f8f 55%, #7c3aed 130%);
  color: #fff !important;
  font-weight: 800;
  font-size: 1rem;
  padding: .8rem 1.6rem;
  border-radius: 12px;
  text-decoration: none;
  margin: .35rem 0 .5rem;
  box-shadow: 0 10px 24px rgba(42, 63, 143, .28);
}
.single-hp_listing .hp-page__content a[href^="https://wa.me"]::before { content: "💬 "; }
.single-hp_listing .hp-page__content a[href*="instagram.com"] {
  display: inline-block;
  background: rgba(67, 97, 238, .12);
  color: var(--az-indigo) !important;
  font-weight: 700;
  padding: .55rem 1.1rem;
  border-radius: 12px;
  text-decoration: none;
  margin: .2rem 0 .4rem .4rem;
}
.single-hp_listing h2 { font-size: 1.28rem !important; margin-top: 1.6rem !important; }

/* 21. Stabilkan tombol WhatsApp di halaman detail (jangan melayang/menumpuk teks) */
.single-hp_listing .hp-page__content a[href*="wa.me"],
.single-hp_listing .hp-page__content a[href*="instagram.com"] {
  position: static !important;
  float: none !important;
  vertical-align: middle !important;
  transform: none !important;
  margin: .35rem .4rem .35rem 0 !important;
}
.single-hp_listing .hp-page__content p:has(a[href*="wa.me"]) { display: block; }

/* 22. Tombol WhatsApp: blok penuh, tidak menumpuk teks di sekitarnya */
.single-hp_listing .hp-page__content a[href*="wa.me"] {
  display: block !important;
  width: fit-content !important;
  clear: both !important;
  margin: .5rem 0 !important;
  position: static !important;
  text-indent: 0 !important;
}
.single-hp_listing .hp-page__content a[href*="instagram.com"] {
  display: block !important;
  width: fit-content !important;
  clear: both !important;
  margin: .2rem 0 !important;
}

/* 23. Tombol "Cari" — paksa gradasi AZZAM (spesifisitas lebih tinggi dari tema induk) */
body.azzam-ukmku form.az-cari button.az-cari__tombol,
body.azzam-ukmku form.az-cari button.az-cari__tombol:hover,
body.azzam-ukmku form.az-cari button.az-cari__tombol:focus {
  background-color: #2a3f8f !important;
  background-image: linear-gradient(135deg, #0e2350 0%, #2a3f8f 55%, #7c3aed 130%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(42, 63, 143, .28) !important;
}