/* ==========================================================================
   faaz.css — the merged front-end stylesheet (Option A, 2026-11-03).
   Single source of design CSS: base skin (shared card/modal/lightbox rules),
   one section per block. Loaded site-wide on wp_enqueue_scripts + the editor
   canvas via enqueue_block_assets. Editor-only rules live in faaz-editor.css.
   Section order is the cascade order: skin first, blocks alphabetical.
   ========================================================================== */

/* ---- Lightbox skin (shared by listing / project / unit galleries; DOM emitted by block renders, slideshow by assets/js/gallery-lightbox.js) ---- */

/* Full-screen scrim over the page. Closed = invisible + inert, so its Swiper
   stays unmeasured until the first click opens it (gallery-lightbox.js inits
   Swiper on open). */
.faaz-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  background: rgba(20, 16, 12, 0.92);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 280ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 280ms;
}

.faaz-lightbox[data-faaz-open] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Swiper fills the grid row above the thumbnail strip (the 1fr row gives it a
   definite height — a bare height:100% resolved to 0 in a content-sized
   grid, collapsing the whole slideshow). One photo per slide, contained so
   tall shots never crop. */
.faaz-lightbox .swiper {
  width: 100%;
  height: 100%;
}

.faaz-lightbox .swiper-slide {
  display: grid;
  place-items: center;
}

.faaz-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Thumbnail nav strip under the main image: fixed 64px thumbs (unsized imgs
   used to render at natural size — a 4+2 wall of every photo). */
.faaz-lightbox-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  z-index: 20;
}

.faaz-lightbox-prev,
.faaz-lightbox-next {
  z-index: 20;
}

.faaz-lightbox-close {
  z-index: 30;
}

/* Button skins (shared by every page that hosts the lightbox). */
.faaz-lightbox .faaz-lightbox-close,
.faaz-lightbox .faaz-lightbox-prev,
.faaz-lightbox .faaz-lightbox-next {
  position: absolute;
  border: 0;
  background: rgba(20, 16, 12, 0.55);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.faaz-lightbox .faaz-lightbox-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}

.faaz-lightbox .faaz-lightbox-prev,
.faaz-lightbox .faaz-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 34px;
  line-height: 1;
}

.faaz-lightbox .faaz-lightbox-prev {
  left: 20px;
}
.faaz-lightbox .faaz-lightbox-next {
  right: 20px;
}

.faaz-lightbox-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: none;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
}

.faaz-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faaz-lightbox-thumb[data-faaz-gallery-current] {
  border: 2px solid #c01b1b;
}

@media (prefers-reduced-motion: reduce) {
  .faaz-lightbox {
    transition: none;
  }
}

/* ---- Core gallery -> Swiper portfolio slider (inc/functions/portfolio.php render filter) ---- */
/*
 * Portfolio gallery — front-end Swiper styles.
 *
 * The markup is emitted by the portfolio render filter
 * (inc/functions/portfolio.php), which swaps the faaz-portfolio gallery's
 * front-end output for this Swiper DOM; the filter enqueues this sheet
 * together with faaz-portfolio-slider.js.
 *
 * The live Elementor media carousel (1f8bf193) rebuilt natively on Swiper 11:
 * fixed 380px slides, 350px box (30px bottom padding holds the bullets),
 * 3/2/1 slides per view, 20/10/10px gap, loop, autoplay 5s, 500ms. Bullets:
 * 10px, 4px apart, active = accent (the live swiper-pagination rules).
 */

.faaz-pl {
  width: 100%;
}

.faaz-pl-swiper {
  height: 350px;
  padding-bottom: 30px;
}

/* The Swiper bundle's .swiper-slide { width:100% } loads after the block
   styles — this two-class 380px width is the no-JS fallback; with JS, Swiper
   sets inline widths per breakpoint (1/2/3 fluid slides per view). */
.faaz-pl .swiper-slide {
  width: 380px;
  border-radius: 5px;
  overflow: hidden;
}

.faaz-pl .faaz-pl-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bullets: 5px above the box bottom edge (the live pagination offset). */
.faaz-pl-pager {
  bottom: 5px;
}

.faaz-pl-pager .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}

.faaz-pl-pager .swiper-pagination-bullet-active {
  background-color: #d31010;
}

@media (max-width: 1024px) {
  .faaz-pl-swiper {
    height: 270px;
  }
}

/* ---- Shared skin: cards, modals, lightbox helpers, layout fixes, media queries ---- */
/**
 * faaz-blocks.css — free CSS for the gaps a block attribute cannot express.
 *
 * Rule set (AGENTS.md): structure + spacing + colours + font size + border + shadow
 * come from block attributes and theme.json. This file is only for
 *   1. per-item nav padding/spacing (nav items are not blocks) — lives in the block's own CSS
 *   2. pseudo-elements (Font Awesome glyphs) — lives in the block's own CSS
 *   3. :hover / :focus states (theme.json has no states support for core/button here)
 *   4. partial borders (core's border width applies to all four sides)
 *   5. re-anchoring core's own breakpoints
 * Custom-block CSS lives in blocks/<name>/, not here.
 */

/* ---------- Site base ---------- */

/* The old design's page background is white and its body font is Roboto; style.css
(legacy editorial templates) sets a cream body + Plus Jakarta Sans, which is wider
than Roboto and shifts every nav item. faaz-blocks.css loads after it, so this wins. */
body {
  background-color: #ffffff;
  color: #5a5a5a;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- Sticky header ---------- */

/* No skin here (it lives in assets/css/php-template.css). The main bar
 * (.faaz-mainbar) is pure CSS sticky: position:sticky; top:0; z-index:99.
 * In the classic header.php the bar is a direct child of <body>, so its
 * sticky range is the whole page — the 40px top bar scrolls off and the main
 * bar pins to the top for the rest of the page. The old JS pinning
 * (faaz-sticky-header.js) is unenqueued: it was only needed in the FSE era,
 * when the bar was trapped inside a short header template part. */

/* Landing-strip search pages (body.faaz-search-sticky): on desktop the search +
 * filter strip pins to the top and the header mainbar stops pinning. The strip
 * is a direct child of <body> (full page height), so its sticky range spans the
 * whole page. On mobile the strip pins to the top and the header mainbar goes
 * relative (the header scrolls off, the filter strip stays); tablet keeps the
 * base sticky strip (top 79). Desktop + mobile overrides, tablet base. */
@media (min-width: 1025px) {
  .faaz-search-sticky .faaz-mainbar {
    position: relative; /* keep a stacking context so z-index:99 still wins over the strip */
  }

  .faaz-search-sticky .faaz-landing-strip {
    position: sticky;
    top: 0;
    z-index: 98;
    background-color: #fff;
  }
}

@media (max-width: 767px) {
  .faaz-search-sticky .faaz-mainbar {
    position: relative; /* header scrolls off on mobile; the strip pins instead */
  }

  .faaz-search-sticky .faaz-landing-strip {
    position: sticky;
    top: 0;
    z-index: 98;
    background-color: #fff;
  }
}

/* ---------- Viewport visibility (Elementor hide-on-tablet/mobile equivalent) ---------- */

/* Core block attributes cannot express display:none per viewport (the style
 * engine has no display/visibility feature), so these utility classes are the
 * free-CSS gap. Add via Advanced → Custom Class in the site editor. Matches the
 * old Elementor breakpoints (mobile <= 767, tablet 768-1024, desktop > 1024),
 * the same anchors as theme.json settings.viewport. */

@media (max-width: 767px) {
  .faaz-hide-mobile {
    display: none !important;
  }
}

/* ---------- Container ---------- */

/* No CSS here: the container width is theme.json settings.layout.contentSize
 * (1180px). Every .faaz-inner sits inside a layout:constrained parent, so core
 * prints max-width:var(--wp--style--global--content-size) + margin-inline:auto on
 * it, and at narrower viewports width:100% caps it automatically. */

/* ---------- Header ---------- */

/* Header chrome is plain PHP (header.php, 2026-11-05 classic pivot); its layout
lives in assets/css/php-template.css — including the pinned .custom-logo width
(97px desktop / 74px mobile). No core block markup here. */

/* Mobile: the nav/CTA column (server layout hash of the header part) gets no
 * gap and pushes its content to the right — the mobile menu toggle sits at
 * the far right. */
@media (max-width: 767px) {
  .wp-container-core-group-is-layout-42c21590 {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: end;
    align-items: center;
  }
}

/* ---------- Footer (Elementor template 119) ---------- */

.faaz-footer {
  background-color: #8a0a0a;
  padding: 100px 0;
}

/* Grid, not flex: a flex row lets the constrained children (max-width 1180 +
auto side margins !important) push a column past its share and wrap the row. */
.faaz-footer > .faaz-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
}

@media (max-width: 1024px) {
  .faaz-footer {
    padding: 100px 0;
  }
  .faaz-footer > .faaz-inner {
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .faaz-footer > .faaz-inner {
    padding: 0 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faaz-footer .faaz-footer-social {
    grid-column: 1 / -1;
    margin-top: 50px;
  }
}

.faaz-footer > .faaz-inner .faaz-footer-col {
  min-width: 0;
  padding: 10px;
  margin-bottom: auto;
}

.faaz-footer > .faaz-inner .faaz-footer-col > * {
  max-width: 100%;
  margin-inline: 0 !important;
}

.faaz-footer-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  margin: 0;
}

.faaz-footer-links {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.faaz-footer-links li {
  font-size: 14px;
  line-height: 27px;
}

.faaz-footer-links a {
  color: #dadada;
  transition: color 0.3s;
}

.faaz-footer-links a:hover {
  color: #ffffff;
}

/* Social icons (widget eed3864): 44px boxes, 22px glyph, #DADADA, 10px gap. */
.faaz-footer-social .faaz-social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

.faaz-footer-social .faaz-social-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #dadada;
  fill: #dadada;
  font-size: 22px;
  transition:
    color 0.3s,
    fill 0.3s;
}

.faaz-footer-social .faaz-social-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.faaz-footer-social .faaz-social-link:hover {
  color: #ffffff;
  fill: #ffffff;
}

.faaz-footer-social .faaz-social-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faaz-footer-copy h5 {
  line-height: 1;
}
/* ---------- Hero cover / icons ---------- */

/* Hero cover height + icon sizes: this WP build's client parser drops the
 * cover's minHeight/minHeightUnit and the image's width/height free
 * attributes, so save() never serializes them inline — hand-writing them
 * into the stored markup fails block validation. The custom classes carry
 * the values instead (base height here, responsive overrides below).
 * Free CSS gap: dimensions core cannot express. */

.faaz-hero-cover {
  min-height: 90vh;
  padding: 100px 0;
}

/* Hero panel wrapper (2026-10-20 live update): the white title + search bar
 * in a 60% of the 1180 column (tablet 80%, mobile 100% + 10px sides).
 * Black overlay back 2026-10-21 (user request), the search form inside is
 * 80% of the panel (faaz-hero-search.css). Free CSS: responsive
 * width/padding core cannot serialize. */
.faaz-hero-panel {
  width: 90%;
  max-width: 708px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet portrait band user spec 2026-11-02: 35vh floor + uniform 20px
   * padding. !important: keep the override winning. */
  .faaz-hero-cover {
    min-height: 35vh !important;
    padding: 20px !important;
  }
}

@media (max-width: 767px) {
  /* Mobile hero (user spec 2026-11-02, supersedes same-day 50vh/20px): 48vh floor
   * + uniform 20px padding. */
  .faaz-hero-cover {
    min-height: 48vh !important;
    padding: 20px !important;
  }
  /* Mobile hero: background anchored centre-right, full-width panel with
   * 10px side padding. */
  .faaz-hero-cover .wp-block-cover__image-background {
    object-position: center right;
  }
  .faaz-hero-panel {
    width: 100%;
  }
}

/* "Temukan Properti Idaman Anda" intro paragraph: live is 65% of the 1180
 * column (desktop) / 80% (tablet) / full width (mobile), left-aligned.
 * The paragraph sits in its own constrained group (containing block = the
 * 1180 column, shrinking with the viewport) so the % width resolves like
 * the live e-con inner. margin-left must beat the constrained layout's
 * `margin-inline: auto !important`. */

.faaz-temukan-intro {
  width: 65%;
  margin-left: 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .faaz-temukan-intro {
    width: 80%;
  }
}

@media (max-width: 767px) {
  .faaz-temukan-intro {
    width: 100%;
  }
}

/* Temukan section band: the "Iklan Properti Lainnya" slider is now the last
 * section, so the band's bottom gap = the live Iklan container's padding-bottom
 * (eba6e24): 80px desktop / 50px tablet / 100px mobile. The stored group style
 * carries the 80px desktop value; the breakpoints need !important to beat the
 * inline style (core can't serialize responsive padding in this build). The
 * tablet top padding is the live 8ee06f8 wrapper value (80px at tablet, 100
 * desktop/mobile). */

@media (min-width: 768px) and (max-width: 1024px) {
  .faaz-temukan-group {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }
}

@media (max-width: 767px) {
  .faaz-temukan-group {
    padding-bottom: 100px !important;
  }
}

/* ==========================================================================
   Front page: the sections after the Iklan slider (live reference ids):
   f0bcc01 Layanan Properti (photo band + 3 translucent cards)
   b2e00c5 Keunggulan Cari Properti di Faaz Inc (4 white cards)
   e4eefa5 tentang text band (#F4F4F4, 70% column)
   41a6c79 Panduan & Berita Properti (blog slider + button)
   The stored group/heading styles carry the DESKTOP values; core can't
   serialize responsive type/width/padding in this build, so the media
   rules below re-anchor them (same pattern as faaz-temukan-group).
   ========================================================================== */

/* --- f0bcc01: Layanan Properti ------------------------------------------ */

/* Core's .wp-block-cover carries a hard 430px min-height; the live section
 * is content-driven (403px at 1430), so reset it. */
.faaz-layanan-cover {
  min-height: 0;
}

.faaz-layanan-title {
  font-size: 24px;
}

@media (max-width: 1024px) {
  /* f0bcc01 pt/pb 80, pl/pr 20, cols mt 40 (measured) + padding 0 + gap 10 */
  .faaz-layanan-cover {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .faaz-layanan-title {
    font-size: 23px !important;
  }
  .faaz-layanan-cols {
    margin-top: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767px) {
  /* 1735cbd 22px, cols mt 40; pt/pb back to 100 */
  .faaz-layanan-cover {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
  .faaz-layanan-title {
    font-size: 22px !important;
  }
  .faaz-layanan-cols {
    margin-top: 40px !important;
  }
}

/* --- 822bb74: "Solusi Properti" banner (2026-10-21 live update) -------- */
/* New full-width banner between the Layanan band and the Keunggulan
 * section: centred 1179x500 image, radius 8 + 0 0 10px .18 shadow (both on
 * the image block's own attributes). Free CSS only for what core can't
 * express: the client parser drops free image width/height attrs, so the
 * natural 1179px width needs a cap + centreing; live carries 20px side
 * padding on mobile only. */
.faaz-jbp-img img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* --- Keunggulan card row (faaz/keuang, custom block 2026-11-03) ---------- */

/* Three levels, all emitted by blocks/faaz-keuang/render.php (the PHP render is
 * the single source of markup, so the canvas and the front end cannot diverge):
 *
 *   .faaz-keuang-clip   the block wrapper = full-bleed clipper: 100vw + overflow
 *                       hidden. The block sits at the top level of the page (own
 *                       box, NOT inside the .faaz-keuang heading group, user spec
 *                       2026-11-03), so it is a direct child of the constrained
 *                       post content. Core's rule there is
 *                       .is-layout-constrained > :where(...) = (0,1,0), the same
 *                       weight as .faaz-keuang-clip, and faaz.css prints after
 *                       the global-styles CSS — so plain rules win the tie, no
 *                       !important, and the auto margins are cancelled by
 *                       margin:0.
 *   .faaz-keuang-inner  the 1180px centred box — this is what Swiper's
 *                       width:100% resolves against, so slides are sized from
 *                       1180, never the viewport.
 *   .swiper.faaz-keuang-swiper → .swiper-wrapper → .swiper-slide > card
 *
 * Cards past slidesPerView sit beyond the viewport edge and the clip cuts them.
 * html{overflow-x:clip} in style.css absorbs the 100vw scrollbar excess (clip
 * keeps the sticky header working, hidden would not).
 *
 * The heading + intro paragraph above the row are core blocks OUTSIDE the block;
 * the view script runs only on .faaz-keuang-swiper.
 */
.faaz-keuang-clip {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}
.faaz-keuang-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
/* The selector is (0,3,0): it beats Swiper's .swiper (0,1,0) — margin/padding
 * auto + overflow:hidden — at any print order, so no !important here. Core's
 * constrained child rule never reaches this element (.faaz-keuang-inner carries
 * no layout class), so width/max-width are ours alone. */
.faaz-keuang-inner > .faaz-keuang-swiper.swiper {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 20px 0 0;
  padding: 0 0 10px; /* bottom = the card shadow's room */
  overflow: visible;
}

/* Equal card height + auto row height (scoped to keuang only — never global).
 * autoHeight is OFF (see blocks/faaz-keuang/faaz-keuang.js): the row height is
 * the flex container's own height = the tallest card, so it follows the content
 * as the window changes. Slides stretch to that height, the card fills its slide
 * (flex-grow:1). Swiper's own wrapper rules are (0,1,0)/(0,2,0) and the
 * faaz-swiper stylesheet prints AFTER faaz.css, so the stretch needs three
 * classes to win at any print order. NO height:100% on the slide. */
.swiper.faaz-keuang-swiper .faaz-keuang-cols {
  gap: 0;
  align-items: stretch;
}
.faaz-keuang-swiper.swiper .faaz-keuang-cols .swiper-slide {
  display: flex;
  align-items: stretch;
  height: auto;
  flex-basis: auto; /* Swiper writes the slide width inline; flex-basis must lose */
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 0;
  padding: 0;
}
.faaz-keuang-card {
  box-sizing: border-box;
  flex-grow: 1;
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

/* Card content — the values the editor used to store inline per card. */
.faaz-keuang-img {
  margin: 0 0 20px;
}
/* 2026-11-04 (user spec): fixed icon size — 70x70 desktop, 50x50 tablet, 55x55 mobile
 * (the live percentage widths — 30% / 50% / 25% — are gone). height:auto keeps the
 * source aspect ratio; the square box is the cap. */
.faaz-keuang-img img {
  width: 60px;
  height: auto;
  margin: 0;
}
.faaz-keuang-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: var(--wp--preset--color--primary);
}
.faaz-keuang-text {
  margin: 0;
  font-size: 14px;
  line-height: 27px;
  color: var(--wp--preset--color--secondary);
}

@media (max-width: 1024px) {
  /* live tablet layout: the heading/intro box keeps 20px side gutters (the
   * swiper gets none — its bleed is measured inside the clip), image 50% */
  .faaz-keuang {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .faaz-keuang-img img {
    width: 50px; /* 2026-11-04 (user): 50x50 on tablet */
  }
  /* gutters inside the clipper on tablet AND mobile (user spec 2026-11-03): the
   * swiper has no side padding, so the bleed is measured from the padded content
   * box, the visible cards keep their 20px inset, and overflow:hidden on the clip
   * cuts the row at the far edge only — padding inside is never clipped. */
  .faaz-keuang-clip {
    padding: 0 20px;
  }
  /* tablet: widen the swiper past the 1180 box to the right by 38vw, so Swiper
   * sizes its 3 slides from the wider container and the row runs off the right
   * edge — .faaz-keuang-clip (100vw, overflow hidden) cuts it there. */
  .faaz-keuang-inner > .faaz-keuang-swiper.swiper {
    width: auto;
    max-width: none;
    margin-right: -38vw;
  }
}
@media (max-width: 767px) {
  /* mobile: same, 80vw past the right edge, 2 slides per view */
  .faaz-keuang-inner > .faaz-keuang-swiper.swiper {
    width: auto;
    max-width: none;
    margin-right: -80vw;
  }
}

/* Trailing dummy slide (user spec 2026-11-03, corrected): shown on mobile and
 * tablet so the row keeps scrolling past the last card; hidden at desktop — a
 * display:none slide has zero size for Swiper, so the row ends at the last card
 * there. */
@media (min-width: 1025px) {
  /* !important: Swiper's slide CSS (0,2,0 pair selectors on .swiper-slide) can
   * outweight a single-class hide, so force it off at desktop (user spec
   * 2026-11-03). A display:none slide is zero-size for Swiper, so the row ends
   * at the last card. */
  .swiper-slide.faaz-keuang-dummy {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* live mobile: card title 16px (live 2026-10-20 update); 2026-11-04 (user): image
   * 55x55 on mobile (the live img 25% is gone) */
  .faaz-keuang-img img {
    width: 55px;
  }
  .faaz-keuang-title {
    font-size: 16px;
  }
}

/* --- 41a6c79: Panduan & Berita Properti ---------------------------------- */

/* Slider + button gaps: the pand group's core blockGap-0 rule
 * (.wp-container-core-group-is-layout-* > * + *) would zero the slider's
 * margin, so the gaps live here (this stylesheet loads after it). */
.faaz-panduan .faaz-bs {
  margin-top: 30px;
}
.faaz-bs-btn {
  margin-top: 40px;
}

@media (max-width: 1024px) {
  /* 41a6c79 pl/pr 20, 83beaf9 lh 1.4em */
  .faaz-panduan {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .faaz-panduan-sub {
    line-height: 22.4px !important;
  }
}

/* Core buttons (top CTA, Selengkapnya, …): live shadow + hover transition. */
.wp-block-button .wp-block-button__link {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s;
}
.wp-block-button .wp-block-button__link:hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

/* Landing page search strip: the live Elementor sticky (offset = the main
 * bar height, so it pins flush below the pinned main bar). The current
 * header state's main bar is 79px; desktop + tablet only (the live
 * sticky_on). z-index 10 matches core's sticky container class; the
 * pinned main bar's inline z-index 99 keeps it on top. The live strip
 * padding (15/15 desktop, 10/10 + side 20 tablet, 18 mobile) is here
 * too — stored inline padding would beat the responsive rules. */
.faaz-landing-strip {
  padding: 15px 0;
  /* White paint (user spec 2026-11-05): the strip is sticky @≥768 (top 79px),
   * so it must paint opaque — while it was transparent the scrolling card grid
   * showed through underneath it as the page scrolled past. */
  background-color: var(--wp--preset--color--white);
}

@media (min-width: 768px) {
  .faaz-landing-strip {
    position: sticky;
    top: 79px;
    z-index: 3;
  }

  /* While the hero-search filter modal is open, the sticky strip must paint
     above the pinned main bar (z 99) or its fixed modal stays trapped
     below the bar (the view script toggles the class). */
  .faaz-landing-strip.faaz-hs-modal-open {
    z-index: 100;
  }
}

/* Landing page responsive (live Elementor breakpoints, measured on the
 * saved /dijual/ page): the pale strip + white main gain side padding,
 * the sort column fixes to 190px, and on mobile the heading row stacks
 * with the sort row on top. */
@media (max-width: 1024px) {
  .faaz-landing-strip {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .faaz-landing-main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .faaz-landing-strip {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* PHP landing template (landing.php, 2026-11-03, user request: no wp-block
 * classes): the pattern's core group wrappers replaced by plain divs that
 * carry the SAME faaz-* class names. The layout core supplied is written out
 * explicitly — the 1180 content column, the heading flex row, the fill column.
 * Shared with the block template: on the block page these rules duplicate
 * core's own layout values (same numbers), so both templates render the same
 * and the class stays one definition. */
/* Bottom only (user spec 2026-11-05: landing-main padding-top removed). The
 * tablet side-inset rule (.faaz-landing-main sides 20 @≤1024) sits earlier in
 * the file; a sides:0 shorthand here (same specificity, later) would erase it. */
.faaz-landing-main {
  padding-bottom: 100px;
}

.faaz-landing-strip .faaz-hero-search--full {
  max-width: 1180px;
  /* The strip's constrained group does not carry the bar's margin-top in the
   * block template (measured: bar sits at strip padding edge, 15px, no 20px
   * gap), so the plain-div version zeroes it. Same rule applies on the block
   * page — no visual change. */
  margin-top: 0;
}

.faaz-landing-main .faaz-landing-col {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.faaz-landing-heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 20px;
  /* margin-top removed (user spec 2026-11-05): margin 0 0 40px */
  margin: 0 0 40px;
}

.faaz-landing-hcol {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto; /* content-width column — the block template's inner group does NOT flex-grow (measured: h1 box 369 = text width, not 1180) */
  gap: 20px;
  min-width: 0;
}

/* ===== Perumahan Baru card (live loop template 8913) — shared =====
 * The /perumahan-baru/ archive card and the front-page "Properti Baru"
 * slider card are the same Elementor template, so the values live here
 * (loaded on both surfaces) instead of in one block's stylesheet.
 * Measured 1440/1024/500 on the saved live /perumahan-baru/ page:
 *   card border 1px #c7c7c7, radius 5, bottom pad 20; CTA min 180 (200 @767),
 *   content pad 5/20/10, overlay rgba(0,0,0,.533) -> .333 on hover,
 *   title 16/700 white lh 1.3, lokasi 13/700 #D31010 lh 27;
 *   rows px 20 (15 @767), lh 27, 5px gaps (10 @767; 10 above the rows @1024) —
 *   price 15/500 #1e2132 (5px to the "- max" part), cicilan 12 #5a5a5a,
 *   tipe 12/500 #1e2132 (16px between the parts);
 *   divider #797979 1px with 2px block padding, px 20 (15 @767);
 *   pills in 50% slots (10px side pad, 45% centered @767): 1px #5a5a5a
 *   border, radius 8, white, 12px #1e2132, row px 20 (15 @767), 5px top/bot
 *   pad desktop only. */

/* Grid cards (faaz-perumahan-grid renders .faaz-pb-card as a direct child of
 * .faaz-pg-grid, user spec 2026-11-03): grid items stretch to the row by
 * default, so height:100% makes the card box fill the row — every card in a
 * row the same height. Scoped to the grid children so the same card inside a
 * Swiper slide (.faaz-pb-swiper) is NOT touched: there the row height is set by
 * the flex stretch rule and height:100% against a Swiper wrapper is cyclic. */
.faaz-pg-grid > .faaz-pb-card {
  height: 100%;
}

.faaz-pb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding-bottom: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

/* CTA cover: live elementor-cta (valign bottom, skin cover). */
.faaz-pb-cta {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: 5px 20px 10px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.faaz-pb-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.faaz-pb-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.533);
  transition: background-color 300ms;
}

.faaz-pb-cta:hover .faaz-pb-cta-overlay {
  background: rgba(0, 0, 0, 0.333);
}

.faaz-pb-title {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.faaz-pb-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 10px 15px 0; /* user spec 2026-11-04: sides 20 → 15 */
  font-size: 13px;
  font-weight: 600;
  line-height: 27px;
  color: #5a5a5a;
}

/* 2026-11-04 (user): the location icon carries the shared icon classes
 * faaz-pp-ic + faaz-pp-ic-gold from faaz_properti_card_html, so the old
 * .faaz-pb-loc .fas rule (14px + #d9a31b) is deleted — the shared classes
 * supply the same values. One icon definition for both cards. */

/* Info rows. */
.faaz-pb-price {
  margin: 5px 20px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
  color: #1e2132;
}

.faaz-pb-price-max,
.faaz-pb-tipe-unit {
  margin-left: 5px;
}

.faaz-pb-cicilan {
  margin: 5px 20px 0;
  font-size: 12px;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-pb-tipe {
  margin: 5px 20px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 27px;
  color: #1e2132;
}

/* 16px between the "Tipe Properti …" label and the unit count. */
.faaz-pb-tipe > span:first-child {
  display: inline-block;
  margin-right: 16px;
}

/* Divider: live 6d787375 (#797979, 2px block padding top/bottom). */
.faaz-pb-divider {
  margin: 5px 20px 0;
  padding: 2px 0;
  border-bottom: 1px solid #797979;
}

/* Contact pills: live 46f5476c / 5f0a7a59 — each pill sits in a 50% slot
 * (10px side pad), so the two read as a 40px total gap at 380px cards. */
.faaz-pb-contacts {
  display: flex;
  gap: 20px;
  margin: 5px 20px 0;
  padding: 5px 0;
}

.faaz-pb-pill-slot {
  flex: 0 1 50%;
  min-width: 0;
  padding: 0 10px;
  display: flex;
}

.faaz-pb-pill {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 0;
  border: 1px solid #5a5a5a;
  border-radius: 8px;
  background: #fff;
  color: #1e2132;
  font-size: 12px;
  line-height: 27px;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 1024px) {
  /* Live @1024: 10px above the first row, no vertical pill-row pad. */
  .faaz-pb-price {
    margin-top: 10px;
  }
  .faaz-pb-contacts {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .faaz-pb-cta {
    min-height: 200px;
  }
  .faaz-pb-price,
  .faaz-pb-cicilan,
  .faaz-pb-tipe,
  .faaz-pb-divider,
  .faaz-pb-contacts {
    margin-left: 15px;
    margin-right: 15px;
  }
  .faaz-pb-price,
  .faaz-pb-cicilan,
  .faaz-pb-tipe,
  .faaz-pb-divider,
  .faaz-pb-contacts {
    margin-top: 10px;
  }
  .faaz-pb-contacts {
    padding-top: 0;
    padding-bottom: 0;
  }
  .faaz-pb-pill-slot {
    flex-basis: 45%;
    justify-content: center;
  }
}

/* ===== Front-page slider arrows (mobile) — all three sliders: Properti
 * Baru (.faaz-pb-nav), Properti Pilihan + Iklan Lainnya (.faaz-pp-nav),
 * Blog (.faaz-bs-nav): 30px circles, 18px chevrons. ===== */
@media (max-width: 767px) {
  .faaz-pb-nav.faaz-pb-prev,
  .faaz-pb-nav.faaz-pb-next,
  .faaz-pp-nav.faaz-pp-prev,
  .faaz-pp-nav.faaz-pp-next,
  .faaz-bs-nav.faaz-bs-prev,
  .faaz-bs-nav.faaz-bs-next {
    font-size: 10px;
    width: 30px;
    height: 30px;
  }

  .faaz-pb-nav.faaz-pb-prev svg,
  .faaz-pb-nav.faaz-pb-next svg,
  .faaz-pp-nav.faaz-pp-prev svg,
  .faaz-pp-nav.faaz-pp-next svg,
  .faaz-bs-nav.faaz-bs-prev svg,
  .faaz-bs-nav.faaz-bs-next svg {
    width: 18px;
    height: 18px;
  }
}

/* ===== /perumahan-baru/ archive page chrome (live page 8907) =====
 * Hero: the cover's stored inline padding carries the desktop values
 * (20 top / 180 bottom / 20 sides); core .wp-block-cover forces
 * min-height:430px, which this content-driven cover must not have. */

.faaz-pb-cover {
  min-height: 0;
}

/* Hero dim: dimRatio 50 — this build's client save() never re-emits the
 * has-background-dim-50 level class (editor validation compares against a
 * bare has-background-dim), so the 50% overlay gradient is set here. */
.faaz-pb-cover .wp-block-cover__background.has-background-dim {
  --wp--custom--overlay-gradient: linear-gradient(0deg, #00000080, #00000080);
}

@media (max-width: 1024px) {
  .faaz-pb-cover {
    padding-bottom: 150px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pb-cover {
    padding: 20px 18px 180px !important;
  }
}

/* h1 + search panel column: 120px below the breadcrumb (live 100px margin
 * + 20px section gap; 100px total @1024, 120px mobile). The class (not a
 * stored margin) carries it — it must beat the wrapper group's blockGap
 * rule, and the responsive override must not fight stored inline. */
.faaz-pb-hero-inner {
  margin-top: 120px;
}

@media (max-width: 1024px) {
  .faaz-pb-hero-inner {
    margin-top: 100px;
  }
}

@media (max-width: 767px) {
  .faaz-pb-hero-inner {
    margin-top: 120px;
  }
}

/* Live per-breakpoint h1 (stored inline 30px wins without !important). */
@media (max-width: 1024px) {
  .faaz-pb-h1 {
    font-size: 25px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pb-h1 {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
}

/* Search panel: the live 4a68ee8 ::before (#030303, 50% dim) — a translucent
 * box core cannot express, so the class carries it. Width 60% desktop,
 * 70% tablet, full mobile (stored inline padding 20 = desktop). The bar's
 * 4px inset margin: the panel group's blockGap-0 rule zeroes the form's
 * margin-top, so it is re-asserted here (higher specificity). */
.faaz-pbs-panel {
  width: 60%;
  /* left/right auto only — a `margin` shorthand zeroes the margin-top the
   * hero-inner group's blockGap rule gives the panel. */
  margin-left: auto;
  margin-right: auto;
  background: rgba(3, 3, 3, 0.5);
  /* The FSE panel group stored padding:20 + border-radius:8 inline; the PHP
   * template carries no inline style, so the class declares them. The mobile
   * @767 rule below overrides padding with !important (live mobile 10/20). */
  padding: 20px;
  border-radius: 8px;
}

.faaz-pbs-panel .faaz-ps {
  margin: 4px;
}

@media (max-width: 1024px) {
  .faaz-pbs-panel {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .faaz-pbs-panel {
    width: 100%;
    padding: 10px 20px !important;
  }
}

/* White section: stored inline padding carries desktop (80 top / 100 bottom,
 * no side pad); live adds 20px side padding from tablet down. */
@media (max-width: 1024px) {
  .faaz-pb-section {
    padding: 80px 20px 100px !important;
  }
}

/* Heading row: h2 takes the room left of the 232px sort column (live 928px
 * at 1180); mobile stacks the row with the h2 on top. The faaz/perumahan-
 * title block renders a bare h2 (the server picks the text), so the live
 * values live here — scoped to beat the theme's .wp-site-blocks h2 element
 * rule. Live h2 line-height is 1.3 at tablet/mobile (23.4px on 18px). */
.faaz-pb-section .faaz-pb-h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #353535;
}

.faaz-pb-h2 {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 1024px) {
  .faaz-pb-h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 767px) {
  .faaz-pb-h2 {
    flex: none;
    width: 100%;
  }
}

/* Head row -> grid gap: the live 40px (20px head-row margin + 20px section
 * blockGap). In a flow group those sibling margins collapse to 20px, so the
 * grid's margin is asserted at 40 (scoped — the landing page's
 * faaz/properti-grid shares the class). */
.faaz-pb-section .faaz-pg-grid {
  margin-top: 40px;
}

/* Sort column: 232px stored (flexSize), 190px tablet, full mobile. */
@media (max-width: 1024px) {
  .faaz-pb-sort-col {
    flex-basis: 190px;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .faaz-pb-sort-col {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Pasang Iklan page (11355) — live reference values core can't express.
   The section is a constrained group: its children (the faaz-iklan-wrap
   wrapper, then the box) get the 1180px cap + auto margins from the
   constrained-child rule, so the box's width:% resolves against 1180.
   Box = 55% of the column (70% tablet / 100% mobile); section side
   padding + box padding + h1/intro type are responsive (stored values are
   the desktop ones, the media rules override); the Syarat button drops the
   theme's CTA shadow and carries the live hover shadow (0 0 10px .3). */
.faaz-iklan-box {
  width: 55%;
}

.faaz-iklan-syarat .wp-element-button {
  box-shadow: none;
}

.faaz-iklan-syarat .wp-element-button:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
  .faaz-iklan-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .faaz-iklan-box {
    width: 70%;
    padding-right: 20px !important;
    padding-bottom: 50px !important;
    padding-left: 20px !important;
  }

  .faaz-iklan-title {
    font-size: 23px !important;
  }

  .faaz-iklan-intro {
    font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  .faaz-iklan-box {
    width: 100%;
  }

  .faaz-iklan-title {
    font-size: 19px !important;
  }
}

/* Pasang Iklan Agen Properti page (11369) — same section > wrapper > box
   pattern as the Pasang Iklan page (live 06a25cd/9e5c3a4), live values
   differ in: the tablet box keeps the desktop padding (no 1024 override on
   live), the h1 is 22px mobile, and the intro is 14px mobile only. The
   submit keeps the live 30% button width — Elementor button_width 30
   resolves against the fields wrapper INCLUDING the 10px negative-margin
   gutters, minus the field group's own 10px padding: 0.3 * (W + 10) - 10
   = 0.3W - 7 of the engine's full field width W. */
.faaz-pia-box {
  width: 55%;
}

.faaz-pia-syarat .wp-element-button {
  box-shadow: none;
}

.faaz-pia-syarat .wp-element-button:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

/* The live section labels inherit the body size/colour (16px #5a5a5a),
   not the engine's 14px primary. */
.faaz-pia-form .faaz-fm-section {
  font-size: 16px;
  color: #5a5a5a;
}

.faaz-pia-form .faaz-fm-actions .faaz-fm-submit {
  width: calc(30% - 7px);
}

/* The live radio options are stacked, one per line (28px pitch). */
.faaz-pia-form .faaz-fm-options {
  display: block;
}

.faaz-pia-form .faaz-fm-field--radio .faaz-fm-option {
  display: flex;
  line-height: 28px;
}

@media (max-width: 767px) {
  .faaz-pia-form .faaz-fm-actions .faaz-fm-submit {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .faaz-pia-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .faaz-pia-box {
    width: 70%;
  }

  .faaz-pia-title {
    font-size: 23px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pia-box {
    width: 100%;
    padding-right: 20px !important;
    padding-bottom: 50px !important;
    padding-left: 20px !important;
  }

  .faaz-pia-title {
    font-size: 22px !important;
  }

  .faaz-pia-intro {
    font-size: 14px !important;
  }
}

/* Syarat dan Ketentuan page (11378) — live reference values core can't
   express. Same section > constrained wrapper > box pattern as the
   Pasang Iklan page, so the box's width:70% resolves against the 1180
   column (826px at 1440, centred). The live bullets are 10px blue
   fa-circle glyphs 9px below the item top (8px at the breakpoints),
   5px before the 15px/27px text; items sit 15px apart (7.5+7.5). */
.faaz-syarat-box {
  width: 70%;
}

.faaz-syarat-box .faaz-syarat-logo {
  max-width: 15%;
  margin: 0 auto;
}

/* display:block: an inline img in the line-height:0 figure contributes no
   height to the flex item. The % cap sits on the figure (a % max-width on
   the img itself breaks the figure's height in this layout). */
.faaz-syarat-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.faaz-syarat-title {
  text-align: center;
}

.faaz-syarat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faaz-syarat-list li {
  position: relative;
  padding-left: 18px;
  line-height: 27px;
}

.faaz-syarat-list li::before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  line-height: 1;
  color: var(--wp--preset--color--blue);
  position: absolute;
  left: 0;
  top: 9px;
}

.faaz-syarat-list li + li {
  margin-top: 15px;
}

@media (max-width: 1024px) {
  .faaz-syarat-title {
    font-size: 22px !important;
  }

  .faaz-syarat-box .faaz-syarat-logo {
    max-width: 18%;
  }

  .faaz-syarat-list li::before {
    top: 8px;
  }
}

@media (max-width: 767px) {
  .faaz-syarat-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .faaz-syarat-box {
    width: 100%;
  }

  .faaz-syarat-title {
    font-size: 20px !important;
    margin-bottom: 0 !important;
  }

  .faaz-syarat-h2 {
    font-size: 18px !important;
  }

  .faaz-syarat-box .faaz-syarat-logo {
    max-width: 28%;
  }

  .faaz-syarat-list li::before {
    top: 8px;
  }
}

/* ==========================================================================
   Shared listing card (.faaz-pp-card — front-page sliders, landing grid,
   single-listing similar slider). This vendored FA5 build has no per-icon
   :before rules, so each icon class gets an explicit glyph (code points
   verified against THIS build's cmap, fontTools).
   ========================================================================== */
.faaz-pp-card .fa-map-marker-alt::before {
  content: "\f3c5";
}
.faaz-pp-card .fa-star::before {
  content: "\f005";
}
.faaz-pp-card .fa-tags::before {
  content: "\f02c";
}
.faaz-pp-card .fa-clipboard-list::before {
  content: "\f46d";
}
.faaz-pp-card .fa-bed::before {
  content: "\f236";
}
.faaz-pp-card .fa-bath::before {
  content: "\f2cd";
}
.faaz-pp-card .fa-car::before {
  content: "\f1b9";
}
.faaz-pp-card .fa-expand::before {
  content: "\f065";
}
.faaz-pp-card .fa-expand-arrows-alt::before {
  content: "\f31e";
}

/* ==========================================================================
   Tentang Kami page (page 1678) — live Elementor page 1678, ref
   "Tentang Kami ｜ Faaz Inc (10_19_2026 6:25:26 PM).html" + post-1678.css.
   Live layout: full-bleed section (skyline image, bottom center, contain,
   180deg #D31010→#EB7878 overlay @0.8) whose ONLY content is the h1 pinned
   to its bottom (pt 20 / pb 80 @D; pt 0 / pb 50 @T/M); the text block sits
   BELOW the section on white (pt 80 / pb 100 @D; pt 50 / pb 80 @T;
   pt 50 / pb 100 @M), 60% / 90% / 100% column widths.
   ========================================================================== */

/* Live min-heights 80vh / 40vh@≤1024 / 70vh@≤767 — the client drops
   minHeight from stored cover markup, so the class carries it (hero pattern). */
.faaz-tk-cover {
  min-height: 80vh;
}

@media (max-width: 1024px) {
  .faaz-tk-cover {
    min-height: 40vh !important;
  }
}

@media (max-width: 767px) {
  .faaz-tk-cover {
    min-height: 70vh !important;
  }
}

/* Core cover base is display:flex + align-items:center (content vertically
   centered) with a 1em padding — the live section pins its content to the
   bottom edge with no inset. The @T/M 20px side padding gives the live
   .container inset. */
.faaz-tk-cover {
  align-items: flex-end;
  padding: 0;
}

@media (max-width: 1024px) {
  .faaz-tk-cover {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Skyline: live is background-size contain, bottom center (core cover
   defaults to object-fit cover, center). */
.faaz-tk-cover .wp-block-cover__image-background {
  object-fit: contain;
  object-position: bottom center;
}

/* Live overlay opacity 0.8 over the gradient. */
.faaz-tk-cover .wp-block-cover__gradient-background {
  opacity: 0.8;
}

/* h1: live 30px/1.0/700 white, text-shadow 1px 1px 5px rgba(0,0,0,.3);
   25px @T/M. The preset class is !important in this build, so match it. */
.faaz-tk-cover .faaz-tk-title {
  font-size: 30px !important;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
  .faaz-tk-cover .faaz-tk-title {
    font-size: 25px !important;
  }

  .faaz-tk-cover-group {
    padding-top: 0 !important;
    padding-bottom: 50px !important;
  }
}

/* White text block: stored pt 80 / pb 100; live @T pt 50 / pb 80,
   @M pt 50 / pb 100; ~20px side padding @T/M (the live .container inset). */
@media (max-width: 1024px) {
  .faaz-tk-body {
    padding-top: 50px !important;
    padding-bottom: 80px !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .faaz-tk-body {
    padding-bottom: 100px !important;
  }
}

/* Intro/contact paragraphs: live 60% / 90% / 100% of the column. */
.faaz-tk-intro {
  width: 60%;
}

@media (max-width: 1024px) {
  .faaz-tk-intro {
    width: 90%;
  }
}

@media (max-width: 767px) {
  .faaz-tk-intro {
    width: 100%;
  }
}

/* Jasa list: 14px dot-circle glyph (this build's cmap: \f192 = dot-circle),
   5px glyph→text gap, 10px between items, #1E2132, hover accent. */
.faaz-tk-list {
  padding-left: 0;
  list-style: none;
}

.faaz-tk-list li {
  position: relative;
  padding-left: 22.5px;
}

/* Live item pitch 37px = 27px line + 10px spacing (core list has no
   blockGap support in this build). */
.faaz-tk-list li + li {
  margin-top: 10px;
}

.faaz-tk-list li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f192"; /* fa-dot-circle */
  font-size: 14px;
  line-height: 27px;
  color: #1e2132;
  position: absolute;
  left: 0;
  top: 0;
}

.faaz-tk-list li a {
  text-decoration: none;
}

.faaz-tk-list li a:hover,
.faaz-tk-list li:hover::before {
  color: #d31010;
}

/* ==========================================================================
   /kontak/ page (page 1868) — the live Elementor page rebuilt as Gutenberg
   blocks. Ref "Kontak ｜ Faaz Inc (10_19_2026 7:07:25 PM).html".
   Full-bleed white section (30/100 padding, 1180 box centred): left 60%
   (h1 + intro + bordered form box), right 40% (Call/WhatsApp icon list +
   social), the row vertically centred. T/M: min-height 100vh + 20px sides.
   ========================================================================== */

@media (max-width: 1024px) {
  .faaz-kt {
    min-height: 100vh;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Core columns stack at 781px; the live stacks at 767. Re-anchor the
   768–781 band back to the live 60/40 row (core's own breakpoint). */

/* This build's vertical-flex serialization maps justifyContent:center to
   BOTH the justify-content class AND align-items:center in the container
   rule — stretch the children back to full width (this stylesheet loads
   after the container rule). */
.faaz-kt {
  align-items: stretch;
}

@media (min-width: 768px) and (max-width: 781px) {
  .faaz-kt-cols > .wp-block-column {
    flex-grow: 0;
  }

  .faaz-kt-cols > .wp-block-column:first-child {
    flex-basis: 60% !important;
  }

  .faaz-kt-cols > .wp-block-column:last-child {
    flex-basis: 40% !important;
  }
}

/* The live 100px gutter (50px padding each side) is desktop+tablet only.
   align-items:stretch — this build's vertical-flex hash rule emits
   align-items:flex-start (no justifyContent stored); the children must
   fill the column (this stylesheet loads after the container rule). */
.faaz-kt-left,
.faaz-kt-right {
  align-items: stretch;
}

.faaz-kt-left {
  padding-right: 50px;
}

.faaz-kt-right {
  padding-left: 50px;
}

@media (max-width: 1024px) {
  .faaz-kt-left {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .faaz-kt .faaz-kt-right {
    margin-top: 100px;
    padding-left: 0;
  }
}

.faaz-kt-title {
  font-size: 30px !important;
  font-weight: 600;
  line-height: 1;
}

/* Form box: the 1px mist border + 5px radius are stored block attributes;
   the responsive padding is free CSS (core can't serialize it). */
.faaz-kt-box {
  padding: 30px 30px 50px;
}

@media (max-width: 1024px) {
  .faaz-kt-title {
    font-size: 28px !important;
  }

  .faaz-kt-box {
    padding: 20px 20px 30px;
  }
}

@media (max-width: 767px) {
  .faaz-kt-title {
    font-size: 25px !important;
  }
}

/* Call/WhatsApp icon list: 25px accent glyph, 5px to the text, 8px pitch. */
.faaz-kt-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faaz-kt-contact li {
  display: flex;
  align-items: center;
}

.faaz-kt-contact li + li {
  margin-top: 8px;
}

.faaz-kt-contact a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #1e2132;
  font-size: 16px;
  line-height: 27px;
  text-decoration: none;
}

.faaz-kt-contact a .faaz-kt-ic {
  font-size: 25px;
  color: #d31010;
}

/* Social: 44px circles (36 @tablet), accent glyphs, 10px gap (3 @T, 5 @M). */
.faaz-kt-social {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
}

.faaz-kt-social li {
  margin: 0;
}

.faaz-kt-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.faaz-kt-social .faaz-kt-soc {
  font-size: 22px;
  color: #d31010;
}

.faaz-kt-social a:hover .faaz-kt-soc {
  color: #a50d0d;
}

@media (max-width: 1024px) {
  .faaz-kt-social {
    gap: 3px;
  }

  .faaz-kt-social a {
    width: 36px;
    height: 36px;
  }

  .faaz-kt-social .faaz-kt-soc {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .faaz-kt-social {
    gap: 5px;
  }

  .faaz-kt-social a {
    width: 44px;
    height: 44px;
  }

  .faaz-kt-social .faaz-kt-soc {
    font-size: 22px;
  }
}

/* Glyphs (codepoints verified against THIS vendored build's cmap). */
.faaz-kt-ic::before {
  content: "\f098"; /* fa-phone-square */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

.faaz-kt-ic--wa::before {
  content: "\f40c"; /* fa-whatsapp-square */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.faaz-kt-soc--fb::before {
  content: "\f09a"; /* fa-facebook */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.faaz-kt-soc--ig::before {
  content: "\f16d"; /* fa-instagram */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/*
 * Blog article card (the live Elementor loop template 11924) — SHARED by
 * the front-page "Panduan & Berita Properti" slider (faaz/blog-slider) and
 * the /blog/ archive grid (faaz/blog-grid). One live template, one card.
 *
 * Measured live at 1440 (faaz-computed.js on the reference blog page): card
 * 380 wide, border 1px #e7e7e7 (hairline), radius 5, shadow 0 0 10
 * rgba(0,0,0,.2); CTA 200 (pad 5/20/20, radius 5/5/0/0, overlay
 * rgba(0,0,0,.533) — no hover change on the live blog cards), tags row
 * 16px/1.3 white bottom-anchored; body pad 10/20/20 with 10px row gaps:
 * title 20/1.3 700 #1e2132, excerpt 16px/27 #5a5a5a (2 lines, clipped — no
 * ellipsis, no margin — the 10px gap is the rhythm), divider 1px #000 (2px
 * block padding), meta 13/600 #5a5a5a (gold FA icons in a 14px slot, 0px
 * icon→text, 16px between items).
 */
.faaz-bs-card {
  display: block;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  background: #fff;
  text-decoration: none;
  color: inherit;
}

/* CTA cover: live 3f743905 (valign bottom, pad 5/20/20, overlay .533). */
.faaz-bs-cta {
  position: relative;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  min-height: 200px;
  height: 200px;
  padding: 5px 20px 20px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  color: #fff;
}

.faaz-bs-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.faaz-bs-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.533);
}

/* Tags row on the CTA: live elementor-cta__title (16px/1.3 white). */
.faaz-bs-tags {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

/* Body: live 6bb5f90e (pad 10/20/20, row-gap 10). */
.faaz-bs-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px 20px;
}

/* Post title: live b1b38f3 (20px/1.3, 700 #1e2132). */
.faaz-bs-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #1e2132;
}

/* Excerpt: live dd979f8 — a fixed two-line box of 16px/27 #5a5a5a
 * (clipped, no ellipsis). No margin — the body's 10px flex gap is the
 * live row rhythm (the Elementor widgets carry none). */
.faaz-bs-excerpt {
  overflow: hidden;
  max-height: 54px; /* two 27px lines — clipped, no ellipsis */
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  color: #5a5a5a;
}

/* Divider: live 6efa664b (1px #000 line, 2px block padding). */
.faaz-bs-divider {
  padding: 2px 0;
  border-bottom: 1px solid #000;
}

/* Meta row: live 2d057a84 — 13px/600 #5a5a5a text, gold FA icons in a
 * 14px slot, 5px icon→text (the live text span's 5px left padding),
 * 16px between items (8px margins on each side), 27px line box. */
.faaz-bs-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-bs-meta-item {
  display: flex;
  align-items: center;
}

.faaz-bs-meta-item .faaz-fa {
  width: 14px;
  margin-right: 5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 14px;
  color: #d31010;
}

/* Vendored-build codepoints (glyph names verified via fontTools): the
 * stripped solid.min.css has no per-icon class rules, so the glyphs ride
 * ::before content — same pattern as the other faaz-fa icons. */
.faaz-bs-meta-item .faaz-bs-fa-cal::before {
  content: "\f783"; /* calendar-day */
}

/* The calendar icon is gold (user spec 2026-11-05) — the same gold as the
 * card map-marker/star icons (#d9a31b). Printed after the meta-item red rule
 * at the same specificity, so it wins. */
.faaz-bs-meta-item .faaz-bs-fa-cal {
  color: #d9a31b;
}

.faaz-bs-meta-item .faaz-bs-fa-clip::before {
  content: "\f46d"; /* clipboard-list */
}

/*
 * /blog/ hero strip (faaz/blog-archive pattern) — the live 4d880384: the
 * Blog-Faaz-Inc.jpg background under a white veil (0.3 @D/T, 0.8 @M),
 * pt/pb 80, sides 20 (18 @M), content on the 1180 column: h1 18 (16 @T/M),
 * subtitle 30/28/25 700 lh 1.3 with the gold #D31010 span, intro 16/27
 * secondary at 50/64/100% of the column. The padding lives here (NOT stored
 * inline — a stored value would beat the responsive class rules); core
 * cover's hard min-height:430 is dropped (the strip is content-driven).
 */
.faaz-bl-cover {
  min-height: 0;
  padding: 80px 20px;
}

/* White veil: the dim span carries a direct white colour + opacity, beating
 * core's black 0.5 default (the live strip veils white at 0.3 / 0.8 @M).
 * NOTE: .faaz-bl-cover is the .wp-block-cover element itself — no
 * descendant .wp-block-cover exists inside it. */
.faaz-bl-cover.wp-block-cover .wp-block-cover__background.has-background-dim {
  background-color: #fff;
  opacity: 0.3;
}

.faaz-bl-intro {
  /* width 50/64/100% of the column, LEFT-aligned (live margin: 0 50% 0 0) —
	 * the constrained-child auto margins must be killed on the left. */
  width: 50%;
  margin-left: 0 !important;
}

/* The filter-row + grid wrapper: the live section 34144a86 carries
 * --padding-top:30px (hero → filter row gap) and --padding-bottom:100px
 * (pagination → footer). Padding, not margin — a root-level margin here
 * is zeroed by the global `> * {margin:0}` rules. */
.faaz-bg-wrap {
  padding: 30px 0 100px;
}

@media (max-width: 1024px) {
  .faaz-bl-cover .faaz-bl-title {
    font-size: 16px !important; /* beats the has-18-font-size preset */
  }

  .faaz-bl-cover .faaz-bl-sub {
    font-size: 28px !important; /* beats the inline 30px */
  }

  .faaz-bl-intro {
    width: 64%;
  }

  /* The live boxed column: 20px sides @<=1024 (row/grid 969 at 1024). */
  .faaz-bg-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .faaz-bl-cover {
    padding: 80px 18px;
  }

  .faaz-bl-cover.wp-block-cover .wp-block-cover__background.has-background-dim {
    opacity: 0.8;
  }

  .faaz-bl-cover .faaz-bl-sub {
    font-size: 25px !important;
  }

  .faaz-bl-intro {
    width: 100%;
  }
}

/* ------------------------------------------------------------------------
   Single blog post (templates/single.html) — the comment column that hosts
   the core post-comments-form block, skinned to the live BuddyBoss form
   (ref ~/Downloads/single-blog.html, measured 1440/1024/500). The block's
   own column is .faaz-bl (800px, faaz-blog-detail.css); this group caps the
   form column to the same 800px with the live content-area bottom padding
   (35 + the form's own 20 margin = 55, since the constrained-child margin:
   auto !important zeroes the form's own margins).
   ------------------------------------------------------------------------ */
.faaz-bl-col {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0 55px; /* user spec 2026-11-05: no side padding at any width */
}

.faaz-bl-col .comment-respond {
  position: relative;
  margin: 0;
  padding: 30px;
  background: #fff;
  border: 1px solid #d6d9dd;
  border-radius: 10px;
}

/* The live form's reply title is empty; core's default is hidden. */
.faaz-bl-col .comment-reply-title {
  display: none;
}

.faaz-bl-col #commentform .comment-notes {
  margin: 0 0 27px;
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}
.faaz-bl-col #commentform p {
  margin: 0 0 27px;
}
.faaz-bl-col #commentform .comment-form-comment {
  margin-bottom: 15px;
}
/* The live form's comment textarea carries no visible label. */
.faaz-bl-col #commentform .comment-form-comment label {
  display: none;
}
.faaz-bl-col #commentform label {
  display: block;
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 27px;
  color: #1e2132;
}
.faaz-bl-col #commentform .comment-form-author,
.faaz-bl-col #commentform .comment-form-email,
.faaz-bl-col #commentform .comment-form-url {
  float: left;
  width: calc(33.33% - 13.33px);
  margin-right: 20px;
}
.faaz-bl-col #commentform .comment-form-url {
  margin-right: 0;
}
.faaz-bl-col #commentform .comment-form-author input,
.faaz-bl-col #commentform .comment-form-email input,
.faaz-bl-col #commentform .comment-form-url input {
  box-sizing: border-box;
  width: 100%;
  height: 41px;
  padding: 0 12px;
  font-size: 15px;
  line-height: 21px;
  color: #5a5a5a;
  background: #fff;
  border: 1px solid #d6d9dd;
  border-radius: 6px;
}
.faaz-bl-col #commentform textarea {
  box-sizing: border-box;
  width: 100%;
  height: 120px;
  max-height: 120px;
  padding: 8px 12px;
  font-size: 15px;
  line-height: 27px;
  color: #5a5a5a;
  background: #fff;
  border: 1px solid #d6d9dd;
  border-radius: 6px;
  resize: vertical;
}
.faaz-bl-col #commentform .comment-form-cookies-consent {
  display: flex;
  clear: both;
  margin: 0 0 27px;
}
.faaz-bl-col #commentform .comment-form-cookies-consent label {
  display: inline-block;
  font-size: 16px;
  line-height: 27px;
  margin: 0;
  color: #5a5a5a;
}
.faaz-bl-col #commentform .comment-form-cookies-consent input {
  margin-right: 15px;
}
.faaz-bl-col #commentform .form-submit {
  display: flex;
  align-items: center;
  margin: 0;
}
.faaz-bl-col #commentform .form-submit input[type="submit"] {
  /* .form-submit is a flex row (above) → margin-left:auto pushes the button to
   * the right edge; flex:0 1 auto keeps it shrinkable so it never overflows. */
  margin-left: auto;
  flex: 0 1 auto;
  padding: 0 20px;
  height: 34px;
  font-size: 14px;
  line-height: 34px;
  font-weight: 500;
  color: #fff;
  background: #d31010;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.faaz-bl-col #commentform .form-submit input[type="submit"]:hover {
  background: #a50d0d;
}

@media (max-width: 767px) {
  .faaz-bl-col #commentform .comment-form-author,
  .faaz-bl-col #commentform .comment-form-email,
  .faaz-bl-col #commentform .comment-form-url {
    float: none;
    width: 100%;
    margin-right: 0;
  }
}

/* ==========================================================================
   Jasa Arsitek page (5875) — FSE rebuild of the live Elementor page
   (reference: "Jasa Arsitek Bandung"). Free CSS for what core can't
   express: responsive section paddings, cover dim colours, the chevron
   icon-list glyph + dashed dividers, the process-card FA glyphs, and the
   responsive type.
   ========================================================================== */

/* 1. Title strip — 10px top/bottom, 20px sides @T/M. */
.faaz-js-strip {
  padding: 10px 0;
}
.faaz-js-strip-title {
  font-size: 18px;
  line-height: 1;
}
/* The crumb is the core wp:breadcrumbs block (textColor primary, 13.6px/27px
   via its own attributes) — only the live hover accent stays as free CSS. */
.faaz-js-strip .wp-block-breadcrumbs a:hover {
  color: #d31010;
}
@media (max-width: 1024px) {
  .faaz-js-strip {
    padding: 10px 20px;
  }
}
@media (max-width: 767px) {
  .faaz-js-strip-title {
    font-size: 15px;
  }
}

/* 2. Hero cover — #000118 @ 0.8 veil; pt/pb 180/100/150, sides 0/20/20.
     Core cover is a flex box that centres its inner container and carries a
     430px min-height — force top-anchored content + no min-height. */
.faaz-js-hero {
  padding: 180px 0;
  min-height: 0;
  align-items: flex-start;
}
.faaz-js-hero .wp-block-cover__background.has-background-dim {
  background-color: #000118;
}
.faaz-js-hero-icon img {
  display: block;
  width: 50%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .faaz-js-hero {
    padding: 100px 20px;
  }
  .faaz-js-hero-icon img {
    width: 60%;
  }
}
@media (max-width: 767px) {
  .faaz-js-hero {
    padding: 150px 20px;
  }
  .faaz-js-hero-icon img {
    width: 50%;
  }
  .faaz-js-hero-cols > .wp-block-column + .wp-block-column {
    margin-top: 20px;
  }
}

/* 3. Intro — 80/0, 80/20; two 50/50 columns gap 20, 10px col padding @D. */
.faaz-js-intro {
  padding: 80px 0 87px;
}
.faaz-js-p {
  font-size: 16px;
  line-height: 27px;
}
.faaz-js-intro-cols > .wp-block-column {
  padding: 10px;
}
@media (max-width: 1024px) {
  .faaz-js-intro {
    padding: 80px 20px 87px;
  }
  .faaz-js-intro-cols > .wp-block-column {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .faaz-js-intro {
    padding: 80px 20px 94px;
  }
}

/* 4. Band cover — black @ 0.8 veil; 80/0, 80/20. */
.faaz-js-band {
  padding: 80px 0 87px;
  min-height: 0;
  align-items: flex-start;
}
.faaz-js-band-title {
  font-size: 30px;
  line-height: 1;
  align-self: center;
}
.faaz-js-band-cols > .wp-block-column {
  padding: 10px;
}
.faaz-js-band-text {
  color: #dadada;
}
@media (max-width: 1024px) {
  .faaz-js-band {
    padding: 80px 20px 87px;
  }
  .faaz-js-band-title {
    font-size: 27px;
  }
  .faaz-js-band-cols > .wp-block-column {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .faaz-js-band {
    padding: 80px 20px 94px;
  }
  .faaz-js-band-title {
    font-size: 23px;
    line-height: 1.3;
  }
  .faaz-js-band-cols {
    margin-top: 10px !important;
  }
}

/* 5. Services — 80/0, 80/20; faaz/fa-icon rows with dashed accent
     dividers (18px accent glyphs, 7.5/9px rhythm D/T+M). */
.faaz-js-svc {
  padding: 80px 0;
}
.faaz-js-sec-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.faaz-js-proc-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.faaz-js-svc-row {
  position: relative;
  padding: 0 0 7.5px;
  font-size: 16px;
  flex-wrap: nowrap;
}
.faaz-js-svc-row:last-child {
  padding-bottom: 0;
}
.faaz-js-svc-row p {
  margin: 0;
  line-height: 27px;
  text-transform: capitalize;
}
.faaz-js-svc-row .faaz-fa-icon {
  margin-right: 5px;
  flex: 0 0 auto;
}
.faaz-js-svc-row strong {
  font-weight: 700;
}
.faaz-js-svc-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px dashed #d31010;
}
@media (max-width: 1024px) {
  .faaz-js-svc {
    padding: 80px 20px;
  }
  .faaz-js-sec-title {
    font-size: 25px;
    line-height: 1.3;
  }
  .faaz-js-proc-title {
    font-size: 25px;
    line-height: 1.3;
  }
  .faaz-js-svc-rows {
    gap: 9px;
  }
  .faaz-js-svc-row {
    padding-bottom: 9px;
  }
}
@media (max-width: 767px) {
  .faaz-js-svc {
    padding: 80px 20px;
  }
  .faaz-js-sec-title {
    font-size: 23px;
    line-height: 1.3;
  }
  .faaz-js-proc-title {
    font-size: 23px;
    line-height: 1;
  }
}

/* 6. Process — 80/0, 80/20; centred image 50/70/100%; bordered icon cards
     (accent border r8, 60/50px accent glyphs, centred type). */
.faaz-js-proc {
  padding: 80px 0;
}
.faaz-js-proc-title {
  align-self: center;
}
.faaz-js-proc-img {
  width: 100%;
}
.faaz-js-proc-img img {
  display: block;
  margin: 0 auto;
  max-width: 50%;
}
.faaz-js-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
.faaz-js-card-desc {
  font-size: 15px;
  line-height: 27px;
}
@media (max-width: 1024px) {
  .faaz-js-proc {
    padding: 80px 20px;
  }
  .faaz-js-proc-img img {
    max-width: 70%;
  }
  .faaz-js-card .faaz-fa-icon {
    font-size: 50px !important;
  }
}
@media (max-width: 767px) {
  .faaz-js-proc {
    padding: 80px 20px;
  }
  .faaz-js-proc-img img {
    max-width: 100%;
  }
}

/* 7. Why — 80/0, 80/20; centred intro at 60/86/100% of the column. */
.faaz-js-why {
  padding: 80px 0 87px;
}
.faaz-js-why .faaz-js-sec-title {
  align-self: center;
}
.faaz-js-why .faaz-js-why-intro {
  margin: 0 20%;
}
.faaz-js-why-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 1024px) {
  .faaz-js-why {
    padding: 80px 20px 87px;
  }
  .faaz-js-why .faaz-js-why-intro {
    margin: 0 13%;
  }
  .faaz-js-why-title {
    line-height: 1.3;
  }
}
@media (max-width: 767px) {
  .faaz-js-why {
    padding: 80px 20px 98px;
  }
  .faaz-js-why .faaz-js-why-intro {
    margin: 0;
  }
  .faaz-js-why-title {
    font-size: 23px;
  }
}

/* 8. CTA cover — #020202 @ 0.8 veil; 80/0 D, 80/0 T, 80/20 M. */
.faaz-js-cta {
  padding: 80px 0;
  min-height: 0;
  align-items: flex-start;
}
.faaz-js-cta .wp-block-cover__background.has-background-dim {
  background-color: #020202;
}
.faaz-js-cta .faaz-js-sec-title {
  align-self: center;
}
.faaz-js-cta-text {
  color: #dadada;
  width: 64%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .faaz-js-cta .faaz-js-sec-title {
    line-height: 1;
  }
  .faaz-js-cta-text {
    width: 70%;
  }
}
.faaz-js-cta .faaz-js-cta-btn {
  text-align: center;
  align-self: center;
  /* live 86c659e: button widget margin-top 30 (the 20 blockGap + 10 here). */
  margin-top: 10px;
}
@media (max-width: 767px) {
  .faaz-js-cta {
    padding: 80px 20px;
  }
  .faaz-js-cta .faaz-js-sec-title {
    line-height: 1.3;
  }
  .faaz-js-cta-text {
    width: 100%;
  }
}

/* ==========================================================================
   Jasa Desain Interior page (5995) — FSE rebuild of the live Elementor page
   (reference: "Jasa Desain Interior dan Furniture Custom Bandung"). Free
   CSS for what core can't express: responsive section paddings, the cover
   dim colour, per-breakpoint type + widget margins, the check/chevron
   icon-list rhythm + dashed dividers, the solid accent process dividers,
   and the CTA pill. The 18-photo "Portfolio Kami" carousel is the
   faaz/portfolio-slider block (blocks/faaz-portfolio-slider, own CSS).
   ========================================================================== */

/* 1. Hero cover — #000118 @ 0.7 veil; pt/pb 180/100/150, sides 0/20/20.
   Core cover is a flex box that centres its inner container and carries a
   430px min-height — force top-anchored content + no min-height. */
.faaz-ji-hero {
  padding: 180px 0;
  min-height: 0;
  align-items: flex-start;
}
.faaz-ji-hero .wp-block-cover__background.has-background-dim {
  background-color: #000118;
}
.faaz-ji-hero-title {
  font-size: 45px;
  line-height: 1;
}
.faaz-ji-p {
  font-size: 16px;
  line-height: 27px;
}
/* The live text widget's right margin (50/23/0%) — a single-class rule
   needs !important to beat the flex-child margin reset (0,1,1). The live
   widget box = content + one reserved 27px line (3 lines @D/T, 4 @M). */
.faaz-ji-hero-intro {
  margin-right: 50% !important;
  min-height: 81px;
}
@media (max-width: 1024px) {
  .faaz-ji-hero {
    padding: 100px 20px;
  }
  .faaz-ji-hero-title {
    font-size: 36px;
  }
  .faaz-ji-hero-intro {
    margin-right: 23% !important;
    min-height: 81px;
  }
}
@media (max-width: 767px) {
  .faaz-ji-hero {
    padding: 150px 20px;
  }
  .faaz-ji-hero-intro {
    margin-right: 0 !important;
    min-height: 108px;
  }
}

/* 2. Intro — 80/0/60/0, 80/20 @T/M; 40/60 columns (no gap), the image at
   45/88/36% of the image column. */
.faaz-ji-intro {
  padding: 80px 0 60px;
}
.faaz-ji-intro-title {
  font-size: 30px;
  line-height: 1;
}
.faaz-ji-intro-img img {
  display: block;
  margin: 0 auto;
  max-width: 45%;
}
@media (max-width: 1024px) {
  .faaz-ji-intro {
    padding: 80px 20px 60px;
  }
  .faaz-ji-intro-title {
    font-size: 27px;
  }
  .faaz-ji-intro-img img {
    max-width: 88%;
  }
}
@media (max-width: 767px) {
  .faaz-ji-intro-title {
    font-size: 23px;
    line-height: 1.3;
  }
  .faaz-ji-intro-img img {
    max-width: 36%;
  }
}

/* 3. Layanan — 80/0/80/0, 80/20 @T/M; the 50/50 service columns carry the
   live 30px top + bottom margins (the right column sits 50px below the
   first on mobile); the check-circle rows use a 13px rhythm (6.5 padding +
   6.5 gap) with dashed accent dividers. */
.faaz-ji-layanan {
  padding: 80px 0;
}
.faaz-ji-lay-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: capitalize;
}
.faaz-ji-lay-img img {
  display: block;
  margin: 0 auto;
  max-width: 70%;
}
.faaz-ji-lay-h {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.faaz-ji-li {
  position: relative;
  flex-wrap: nowrap;
}
.faaz-ji-li p {
  margin: 0;
  font-size: 15px;
  line-height: 27px;
  text-transform: capitalize;
}
.faaz-ji-li .faaz-fa-icon {
  margin-right: 5px;
  flex: 0 0 auto;
}
.faaz-ji-li:not(:last-child) {
  padding-bottom: 6.5px;
}
.faaz-ji-li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px dashed #d31010;
}
/* Row A: icon flush to the top, 5px down (the live icon vertical offset). */
.faaz-ji-li-a {
  align-items: flex-start;
}
.faaz-ji-li-a .faaz-fa-icon {
  margin-top: 5px;
}
/* Rows B + C: icon vertically centred. */
.faaz-ji-li-b,
.faaz-ji-li-c {
  align-items: center;
}
/* Row C (Kenapa): 16px text + 15px rhythm (7.5 padding + 7.5 gap). */
.faaz-ji-li-c p {
  font-size: 16px;
}
.faaz-ji-li-c:not(:last-child) {
  padding-bottom: 7.5px;
}
@media (max-width: 1024px) {
  .faaz-ji-layanan {
    padding: 80px 20px;
  }
  .faaz-ji-lay-h {
    font-size: 25px;
  }
}
/* Live column rhythm: 30px above and below both service columns (D + T);
   mobile keeps the current stacked state (col2 sits 50px below col1).
   Live geometry: 10px side insets + 40px gap → 560px columns (not 590). */
.faaz-ji-lay-cols {
  padding: 0 10px;
}
.faaz-ji-lay-cols > .wp-block-column {
  margin: 30px 0;
}
.faaz-ji-lay-cols > .wp-block-column:last-child {
  margin-left: 40px;
}
@media (max-width: 767px) {
  .faaz-ji-layanan {
    padding: 80px 20px;
  }
  .faaz-ji-lay-h {
    font-size: 23px;
  }
  .faaz-ji-lay-cols > .wp-block-column {
    margin: 0;
  }
  .faaz-ji-lay-cols {
    padding: 0;
  }
  /* The live second service column sits 50px below the first on mobile. */
  .faaz-ji-lay-cols > .wp-block-column + .wp-block-column {
    margin-top: 50px;
  }
}

/* 4. Proses — 80/0/80/0, 80/20 @T/M; solid accent dividers, 40/60 rows
   (image at 60/70/80%), the text column 30px below the image @M. */
.faaz-ji-proses {
  padding: 80px 0;
}
.faaz-ji-proc-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: capitalize;
}
.faaz-ji-proc-intro {
  margin-right: 40% !important;
}
.faaz-ji-proses .faaz-ji-divider {
  border: 0;
  border-top: 1px solid #d31010;
  height: 0;
  margin: 50px 0;
  padding: 0;
  width: 50%;
}
.faaz-ji-proc-img {
  width: 60%;
}
.faaz-ji-proc-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.faaz-ji-proc-h {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
}
.faaz-ji-proc-h-13 {
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .faaz-ji-proses {
    padding: 80px 20px;
  }
  .faaz-ji-proc-intro {
    margin-right: 25% !important;
  }
  .faaz-ji-proses .faaz-ji-divider {
    width: 70%;
  }
  .faaz-ji-proc-img {
    width: 70%;
  }
  .faaz-ji-proc-h {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .faaz-ji-proses {
    padding: 80px 20px;
  }
  .faaz-ji-proc-intro {
    margin-right: 0 !important;
  }
  .faaz-ji-proses .faaz-ji-divider {
    width: 80%;
  }
  .faaz-ji-proc-img {
    width: 80%;
  }
  .faaz-ji-proc-h {
    font-size: 23px;
  }
  .faaz-ji-proc-row {
    flex-direction: column;
    align-items: center;
  }
  .faaz-ji-proc-row > .wp-block-group {
    flex: 0 0 auto;
    width: 100%;
  }
  .faaz-ji-proc-row > .faaz-ji-proc-text {
    margin-top: 30px;
  }
}

/* 5. Kenapa — 80/0/80/0 @D, 60/20 @T/M. */
.faaz-ji-kenapa {
  padding: 80px 0;
}
.faaz-ji-kenapa-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
/* The live icon-list widget carries 20px above its first row. */
.faaz-ji-kenapa .faaz-ji-li-c:first-child {
  margin-top: 20px;
}
@media (max-width: 1024px) {
  .faaz-ji-kenapa {
    padding: 60px 20px 80px;
  }
  .faaz-ji-kenapa-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .faaz-ji-kenapa {
    padding: 60px 20px 80px;
  }
  .faaz-ji-kenapa-title {
    font-size: 23px;
    line-height: 1.3;
  }
}

/* 6. Cara Pesan — 80/0/80/0, 80/20 @T/M; icon 60/50 (the block attribute
   carries 60px — the !important override is the live mobile size), title
   18/16 700, description 15/14. */
.faaz-ji-cp {
  padding: 80px 0;
}
.faaz-ji-cp-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.faaz-ji-cp-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
.faaz-ji-cp-card-desc {
  font-size: 15px;
  line-height: 27px;
}
@media (max-width: 1024px) {
  .faaz-ji-cp {
    padding: 80px 20px;
  }
  .faaz-ji-cp .faaz-fa-icon {
    font-size: 50px !important;
  }
  .faaz-ji-cp-title {
    font-size: 25px;
  }
  .faaz-ji-cp-card-title {
    font-size: 16px;
  }
  .faaz-ji-cp-card-desc {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .faaz-ji-cp-title {
    font-size: 23px;
  }
}

/* 7. Portfolio — 80/0/80/0, 80/20 @T/M; the carousel itself lives in
   blocks/faaz-portfolio-slider. */
.faaz-ji-pp {
  padding: 80px 0;
}
.faaz-ji-pp-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 1024px) {
  .faaz-ji-pp {
    padding: 80px 20px;
  }
  .faaz-ji-pp-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .faaz-ji-pp {
    padding: 80px 20px;
  }
  .faaz-ji-pp-title {
    font-size: 23px;
    line-height: 1.3;
  }
}

/* 8. CTA cover — black @ 0.8 veil (core's default dim colour); 80/0 @D/T,
   80/20 @M; centred white h3 (margins 22/13/0%) + #DADADA text (margins
   17/11/0%) + the accent "Hubungi Kami" pill (hover #BB0E0E, live). */
.faaz-ji-cta {
  padding: 80px 0;
  min-height: 0;
  align-items: flex-start;
}
.faaz-ji-cta-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 22% 20px !important;
}
.faaz-ji-cta-text {
  color: #dadada;
  margin: 0 17% 30px !important;
}
.faaz-ji-cta .faaz-ji-cta-btn {
  text-align: center;
  align-self: center;
}
.faaz-ji-cta .wp-block-button__link:hover {
  background-color: #bb0e0e;
}
@media (max-width: 1024px) {
  .faaz-ji-cta-title {
    font-size: 25px;
    margin: 0 13% 20px !important;
  }
  .faaz-ji-cta-text {
    margin: 0 11% 30px !important;
  }
}
@media (max-width: 767px) {
  .faaz-ji-cta {
    padding: 80px 20px;
  }
  .faaz-ji-cta-title {
    font-size: 23px;
    margin: 0 0 20px !important;
  }
  .faaz-ji-cta-text {
    margin: 0 0 30px !important;
  }
}

/* ==========================================================================
   6097 — jasa-kontraktor (live Elementor page, ref /tmp/kontraktor-ref.html)
   ========================================================================== */

/* 1. Hero cover — #000118 @ 0.7 veil; pt/pb 180/100/150.
   Core cover is a flex box that centres its inner container and carries a
   430px min-height — force top-anchored content + no min-height. */
.faaz-jk-hero {
  padding: 180px 0;
  min-height: 0;
  align-items: flex-start;
}
.faaz-jk-hero .wp-block-cover__background.has-background-dim {
  background-color: #000118;
}
.faaz-jk-hero-title {
  font-size: 45px;
  line-height: 1;
}
/* Live icon = 36% of the 40% column basis, centred. The core columns
   shrink ~2% around the 20px gap, so the % is nudged up to keep the
   live pixel width (169.2/136.6/133.5). */
.faaz-jk-hero-icon {
  margin: 0;
}
.faaz-jk-hero-icon img {
  display: block;
  margin: 0 auto;
  max-width: 36.5%;
}

/* 2. Intro — white section 80/0, 80/20. */
.faaz-jk-intro {
  padding: 80px 0;
}

/* 3. Band cover — #000118 @ 0.8 veil; 80/0, 80/20. */
.faaz-jk-band {
  padding: 80px 0;
  min-height: 0;
  align-items: flex-start;
}
.faaz-jk-band .wp-block-cover__background.has-background-dim {
  background-color: #000118;
}
.faaz-jk-band-title {
  font-size: 30px;
  line-height: 1;
}

/* 4. Layanan — white section 80/0, 80/20. */
.faaz-jk-svc {
  padding: 80px 0;
}
.faaz-jk-svc-title {
  font-size: 30px;
  line-height: 39px;
  text-transform: capitalize;
}
.faaz-jk-svc-sub {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.faaz-jk-svc-text {
  font-size: 15px;
  line-height: 27px;
}
/* Check-list rows (5995 skin, no dashed separator — 6.5px rhythm stored). */
.faaz-jk-li {
  gap: 5px;
  align-items: center;
}
.faaz-jk-li p {
  margin: 0;
  font-size: 15px;
  line-height: 27px;
  text-transform: capitalize;
}
.faaz-jk-li .faaz-fa-icon {
  margin-right: 5px;
  flex: 0 0 auto;
}
/* 1px solid accent divider (NOT dashed), 50px below the previous element. */
.faaz-jk-svc .faaz-jk-divider {
  border: 0;
  border-top: 1px solid #d31010;
  height: 0;
  margin: 50px 0 0 0;
  padding: 0;
  width: 60%;
}
.faaz-jk-svc-img {
  margin: 0;
}
.faaz-jk-svc-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 5. Why — white section 80/0/60, 80/20/80, 80/20/60. */
.faaz-jk-why {
  padding: 80px 0 60px;
}
.faaz-jk-why-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}

/* 6. Proses — #FDECEC section 80/0, 80/20. */
.faaz-jk-proc {
  padding: 80px 0;
}
.faaz-jk-proc-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.faaz-jk-card .faaz-js-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
.faaz-jk-card .faaz-js-card-desc {
  font-size: 15px;
  line-height: 27px;
  text-transform: capitalize;
}

/* 7. CTA cover — #000118 @ 0.8 veil; 80/0, 80/0, 80/20. */
.faaz-jk-cta {
  padding: 80px 0;
  min-height: 0;
  align-items: flex-start;
}
.faaz-jk-cta .wp-block-cover__background.has-background-dim {
  background-color: #000118;
}
.faaz-jk-cta-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
/* The pill sits 10px below the text (live 30 gap = blockGap 20 + 10). */
.faaz-jk-cta .faaz-jk-cta-btn {
  margin-top: 10px;
  text-align: center;
  align-self: center;
}
.faaz-jk-cta .wp-block-button__link:hover {
  background-color: #bb0e0e;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .faaz-jk-hero {
    padding: 100px 20px;
  }
  .faaz-jk-hero-title {
    font-size: 40px;
  }
  .faaz-jk-hero-icon img {
    max-width: 36%;
  }
  .faaz-jk-intro,
  .faaz-jk-svc,
  .faaz-jk-proc,
  .faaz-jk-cta {
    padding: 80px 20px;
  }
  .faaz-jk-why {
    padding: 80px 20px;
  }
  .faaz-jk-svc .faaz-jk-svc-rows {
    gap: 0;
  }
  .faaz-jk-svc-text {
    margin-right: 20% !important;
  }
  .faaz-jk-svc-text-3 {
    margin-right: 17% !important;
  }
  .faaz-jk-svc .faaz-jk-divider {
    width: 80%;
  }
  .faaz-jk-why-p {
    margin-right: 13% !important;
  }
  .faaz-jk-cta-title {
    font-size: 25px;
    margin: 0 18% !important;
  }
  .faaz-jk-cta-text {
    margin: 0 15% !important;
  }
}

@media (max-width: 767px) {
  .faaz-jk-hero {
    padding: 150px 20px;
  }
  .faaz-jk-hero-title {
    font-size: 35px;
  }
  .faaz-jk-hero-icon img {
    max-width: 30%;
  }
  .faaz-jk-intro,
  .faaz-jk-svc,
  .faaz-jk-proc,
  .faaz-jk-cta {
    padding: 80px 20px;
  }
  .faaz-jk-why {
    padding: 80px 20px 60px;
  }
  .faaz-jk-svc .faaz-jk-svc-rows > .wp-block-column:last-child {
    padding-left: 0 !important;
    padding-top: 20px;
  }
  .faaz-jk-svc-text,
  .faaz-jk-svc-text-3 {
    margin-right: 0 !important;
  }
  .faaz-jk-why-p {
    margin-right: 0 !important;
  }
  .faaz-jk-cta-title {
    font-size: 23px;
    margin: 0 0 !important;
  }
  .faaz-jk-cta-text {
    margin: 0 0 !important;
  }
}

/* ==========================================================================
   /agen-properti/ archive (live Elementor template 8354)
   ========================================================================== */

/* Sticky search strip: the live #F8F8F8 band (664331dc) pinned below the
   main bar (79px @D/T, 69px @M). Padding: 14/0 @D (the live 1% of the
   column), 10/20 @T, 10/18 @M. */
.faaz-ag-strip {
  position: sticky;
  top: 79px;
  z-index: 8;
  padding: 28px 0 29px 0;
}

/* H1: the live #353535 (outside the palette). */
.faaz-ag-h1 {
  color: #353535;
}

/* Feedback section: the live #F1F1F1 band (5cc2046). */
.faaz-ag-form-sec {
  background-color: #f1f1f1;
}

/* Inner container: 50/70/100% of the 1180 column (the live 243977a). */
.faaz-ag-form-inner {
  width: 50%;
}

/* Form box: 30px side padding @D (the stored inline padding carries only
   the 30/50 top/bottom). */
.faaz-ag-form-box {
  padding-left: 30px;
  padding-right: 30px;
}

/* --------------------------------------------------------------------------
   Responsive (live 1024/767 states):
   - <=1024: strip 10/20 pad; section sides 20; h1 18/1.3; sort column
             190px (the live 20% of the 969 column); h3 18px/22px line box;
             inner 70%; box sides 20
   - <=767:  strip top 69 (the mobile main bar); inner 100%; heading row
             stacked (h1 full width, sort full width below, 20px gap)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-ag-strip {
    padding: 24px;
  }
  .faaz-ag-main {
    padding-left: 20px;
    padding-right: 20px;
  }
  .faaz-ag-form-sec {
    padding-left: 20px;
    padding-right: 20px;
  }
  .faaz-ag-h1 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .faaz-ag-sort-col {
    flex-basis: 190px;
  }
  .faaz-ag-h3 {
    font-size: 18px !important;
    line-height: 18px !important;
  }
  .faaz-ag-form-inner {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .faaz-ag-strip {
    top: 69px;
    padding: 14px 18px;
  }
  .faaz-ag-form-inner {
    width: 100%;
  }
  .faaz-ag-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .faaz-ag-sort-col {
    width: 100%;
  }
  .faaz-ag-form-box {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
   /pendaftaran-agen-properti/ (page 11135) — the live Elementor
   registration page: dark hero, dark stat strip, white "Mengapa"
   cards, office cover "Siapa", benefit list, "Cara" cover,
   native lead form, CTA. All values measured from the live page.
   ============================================================ */

/* --- Covers: the core cover base carries a 1em padding; the live
   section paddings (80/100) live on the inner groups instead. --- */
.faaz-pda-cover,
.faaz-pda-siapa,
.faaz-pda-care {
  padding: 0;
}

.faaz-pda-cover {
  min-height: 90vh;
}

.faaz-pda-cover .wp-block-cover__image-background {
  object-position: center bottom;
}

@media (max-width: 1024px) {
  .faaz-pda-cover {
    min-height: 0;
  }

  .faaz-pda-cover .wp-block-cover__image-background {
    object-position: center 48px;
  }

  .faaz-pda-care .wp-block-cover__image-background {
    object-position: 50% 100%;
  }
}

@media (max-width: 767px) {
  .faaz-pda-cover {
    min-height: 100vh;
  }

  .faaz-pda-cover .wp-block-cover__image-background {
    object-position: center center;
  }

  .faaz-pda-care .wp-block-cover__image-background {
    object-position: 100% 100%;
  }
}

/* The live overlays (#13273C @ 0.7 on the office cover, #D31010 @ 0.2
   on the Cara cover) live in the stored cover markup: dimRatio +
   customGradient span, exactly like the front hero's cover. */

/* --- Hero (att 11139) --- */
.faaz-pda-hero-title,
.faaz-pda-hero-sub,
.faaz-pda-hero-intro {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* The live intro paragraph keeps a 65% right margin @D, 40% @T,
   none @M (the stored margin wins, hence !important). */
.faaz-pda-hero-intro {
  margin-right: 65% !important;
}

/* The 10% hero divider sits left-aligned in the flex column (live x123). */

@media (max-width: 1024px) {
  .faaz-pda-hero-inner,
  .faaz-pda-siapa-inner,
  .faaz-pda-care-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faaz-pda-hero-intro {
    margin-right: 40% !important;
  }
}

@media (max-width: 767px) {
  .faaz-pda-hero-intro {
    margin-right: 0 !important;
  }
}

/* --- Stat strip (#13273C) --- */
/* Live: 30% cards, no grow (3 x 354 + 2 x 20 gap, centred row). */
.faaz-pda-strip-card {
  flex: 0 0 30%;
}

/* Live desc box = ~2/3 of the card, centred; text left @D/T, centred @M. */
.faaz-pda-strip-sub {
  width: 65%;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .faaz-pda-strip-card {
    flex: 0 0 30%;
  }

  .faaz-pda-strip .faaz-fa-icon {
    font-size: 40px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pda-strip {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faaz-pda-strip-card {
    flex: 0 0 100%;
  }

  .faaz-pda-strip .faaz-fa-icon {
    font-size: 40px !important;
  }

  .faaz-pda-strip-sub {
    text-align: center;
  }
}

/* --- "Mengapa" cards (3-up @D/T, stacked @M) --- */
.faaz-pda-mk-card {
  flex: 0 0 30%;
  /* Live title/desc are full-width, text-centred; a vertical flex group
	   shrinks children to fit, so stretch them (wins the core layout rule
	   on document order — same specificity). */
  align-items: stretch;
}

/* The live row stretches the cards to equal height. */
.faaz-pda-mk-row-1 .faaz-pda-mk-card,
.faaz-pda-mk-row-2 .faaz-pda-mk-card {
  align-self: stretch;
}

/* The section stores 20px sides at every breakpoint; the live @T
   section is flush (the 30% cards resolve against the full width). */
@media (max-width: 1024px) {
  .faaz-pda-mengapa {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 1024px) {
  .faaz-pda-mk-title {
    font-size: 18px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pda-mk-card {
    flex-basis: 100%;
  }

  .faaz-pda-mk-title {
    font-size: 18px !important;
  }
}

/* --- Section headings: live 28/25/23 @D/T/M (the 28px preset class
   is !important, so the responsive steps need to be too). --- */
@media (max-width: 1024px) {
  .faaz-pda-sec-title {
    font-size: 25px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pda-sec-title {
    font-size: 23px !important;
  }
}

/* --- "Siapa" office cover: side padding @T/M --- */
/* (covered by the .faaz-pda-siapa-inner rule above) */

/* "Kami membuka..." list: gold fa-check bullets, fit-content, centred
   by the flex-column inner group. Two-class selectors win over the
   server-appended list container blockGap rules. */
.faaz-pda-check {
  list-style: none;
}

.faaz-pda-check > li {
  padding-left: 24px;
  position: relative;
}

.faaz-pda-check > li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  color: #d31010;
  font-size: 13px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

.faaz-pda-check > li + li {
  margin-top: 10px;
}

/* --- "Keuntungan" list: gold fa-plus-circle bullets --- */
.faaz-pda-plus {
  list-style: none;
  width: fit-content;
  margin: 0 auto;
}

.faaz-pda-plus > li {
  padding-left: 23px;
  padding-bottom: 5px;
  position: relative;
}

.faaz-pda-plus > li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f055";
  color: #d31010;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.faaz-pda-plus > li + li {
  margin-top: 5px;
}

@media (max-width: 767px) {
  .faaz-pda-plus > li::before {
    font-size: 14px;
  }
}

/* --- "Cara" cards (4-up @D/T, stacked @M) --- */
.faaz-pda-care-card {
  flex: 0 0 275px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .faaz-pda-care-card {
    flex-basis: 222px;
  }

  .faaz-pda-care-title {
    font-size: 15px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pda-care-card {
    flex-basis: 100%;
    text-align: center;
  }

  .faaz-pda-care-title {
    font-size: 15px !important;
  }
}

/* --- Form section: the live box = 60% of the column (20% side
   margins), transparent, 8px radius, soft shadow, 30/30/50 padding.
   The constrained-child auto-margin rule wins over a single class,
   so the two-class form is used. --- */
.faaz-pda-formsec .faaz-pda-formbox {
  margin-left: 20% !important;
  margin-right: 20% !important;
  padding: 30px 30px 50px;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 1024px) {
  .faaz-pda-formsec .faaz-pda-formbox {
    margin-left: 10% !important;
    margin-right: 10% !important;
  }
}

@media (max-width: 767px) {
  .faaz-pda-formsec .faaz-pda-formbox {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 30px 20px 50px;
  }
}

/* Form skin (the live Elementor form): 17px/27 labels, 25px field
   rhythm, 15px row gutter, native file inputs, 30%-width submit. */
.faaz-pda-formbox .faaz-fm-field {
  margin-bottom: 25px;
}

.faaz-pda-formbox .faaz-fm-row {
  gap: 15px;
  margin-bottom: 25px;
}

.faaz-pda-formbox .faaz-fm-label {
  font-size: 17px;
  font-weight: 400;
  line-height: 27px;
  margin-bottom: 4px;
}

.faaz-pda-formbox .faaz-fm-input {
  font-size: 15px;
  line-height: 21px;
  min-height: 41px;
}

.faaz-pda-formbox .faaz-fm-option {
  font-size: 17px;
  line-height: 27px;
}

.faaz-pda-formbox .faaz-fm-file {
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  width: auto;
}

.faaz-pda-formbox .faaz-fm {
  margin-bottom: 32px;
}

.faaz-pda-formbox .faaz-fm-submit {
  width: 30%;
}

/* --- CTA --- */
.faaz-pda-cta .faaz-pda-cta-btn {
  margin-top: 20px;
  text-align: center;
}

.faaz-pda-cta-p {
  margin-left: 20% !important;
  margin-right: 20% !important;
}

@media (max-width: 767px) {
  .faaz-pda-cta-p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =====================================================================
   Pra-Training Test page (11311) — the live Elementor page rebuilt:
   a white bordered box (60% of the 1180 column / 75% tablet / 100%
   mobile), 30px padding (mobile 30/20/50/20), 1px #1E2132 border,
   radius 8, holding the h1 (28/25/23) + the faaz/form wizard.
   The % widths + breakpoint padding are the free-CSS gaps (core has no
   attribute for them); the box skin sits on the custom class.
   ===================================================================== */
.faaz-pt-box {
  width: 60%;
  border: 1px solid #1e2132;
  border-radius: 8px;
  padding: 30px;
}

@media (max-width: 1024px) {
  .faaz-pt-box {
    width: 75%;
  }
}

@media (max-width: 767px) {
  .faaz-pt-box {
    width: 100%;
    padding: 30px 20px 50px;
  }

  /* The live outer container's mobile padding (core can't serialize
	   responsive padding on the stored group). */
  .faaz-pt-section {
    padding: 30px 10px 100px !important;
  }
}

/* The h1 preset (has-28-font-size) is !important in this build, so the
   responsive overrides match it. */
@media (max-width: 1024px) {
  .faaz-pt-title {
    font-size: 25px !important;
  }
}

@media (max-width: 767px) {
  .faaz-pt-title {
    font-size: 23px !important;
  }
}

/* -----------------------------------------------------------------
 * Developer archive page (templates/archive-developer.html +
 * patterns/developer-archive.php) — the live /developer/ Elementor
 * archive template 8969. The pattern stores only the static values
 * (vertical paddings, h1/h2 font size, inner 80px right pad); every
 * responsive side padding + the 60% search column + the h1/h2
 * breakpoints live here.
 * ----------------------------------------------------------------- */

/* Breadcrumb band (live 4bfe8f8b): 15px vertical (stored inline);
 * sides 0 @D → 20 @T → 20 @M. */
@media (max-width: 1024px) {
  .faaz-dv-crumb-sec {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Hero band (live 40b379b2): 30/20 vertical (stored inline); sides
 * 0 @D → 20 @T → 18 @M. */
@media (max-width: 1024px) {
  .faaz-dv-hero {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .faaz-dv-crumb-sec {
    padding-left: 20px;
    padding-right: 20px;
  }
  .faaz-dv-hero {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* H1 "Developer di Indonesia": stored inline 30/600 (line-height 1);
 * live breakpoints 25 @T → 22/1.4 @M (!important beats the inline). */
@media (max-width: 1024px) {
  .faaz-dv-h1 {
    font-size: 25px !important;
  }
}

@media (max-width: 767px) {
  .faaz-dv-h1 {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
}

/* Search column (live 76616a43): the top-level pattern groups are
 * FULL-WIDTH in this build (wp-site-blocks applies no cap; constrained
 * children only get the max-width cap), so the column is a fixed 708px
 * box (= 60% of the 1180 content) pinned to the content's left edge via
 * calc(50% - 590px) (122.5px @1440), 20px below the h1 (blockGap does
 * not serialize on constrained groups in this core). The bar (block
 * CSS) then fills 100% - 8 with its 4px inset -> the live 700px bar at
 * x=127. Full width from mobile down. */
.faaz-dv-search-col {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .faaz-dv-search-col {
    width: 708px;
    max-width: 100%;
    margin-left: calc(50% - 590px) !important;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .faaz-dv-search-col {
    width: 100%;
  }
}

/* Section band (live 78db58d9): 50/100 vertical (stored inline);
 * sides 0 @D → 20 @T → 20 @M. */
@media (max-width: 1024px) {
  .faaz-dv-sec {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Inner block (live 66397113): 80px right pad @D only (1100px content
 * for the two 535px cards + 30px gap); reset to 0 from tablet down.
 * (The live container is flex-column + 20px gap and the h2 widget adds
 * its own 20px margin-bottom -> 40px h2->grid space; the equivalent is
 * the h2's 20px margin-bottom + the grid wrapper's 20px margin-top,
 * which collapses to 20px from tablet down where the h2 margin zeroes.) */
@media (max-width: 1024px) {
  .faaz-dv-inner {
    padding-right: 0 !important;
  }
}

/* Grid wrapper: the top half of the live 40px h2->grid space (desktop);
 * stays 20px from tablet down (the h2 margin zeroes there). !important
 * beats the constrained child's `margin: auto` shorthand. */
.faaz-dvg {
  margin-top: 20px !important;
}

/* H2 "Daftar Developer": live 22/700 #353535, line-height 1. The live
 * 40px h2->grid space (Elementor flex 20px gap + the widget's 20px margin,
 * which don't collapse) is reproduced as a 40px bottom margin here (the
 * grid wrapper's 20px margin-top collapses into it -> max 40). Zeroes
 * from tablet down (live h2 margin 0; the grid's 20px margin-top then
 * stands alone -> 20px). 18/1.3 @T/M. */
.faaz-dv-h2 {
  margin-top: 0;
  margin-bottom: 40px !important;
  color: #353535;
}

@media (max-width: 1024px) {
  .faaz-dv-h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
  }
}

/* ---- Modal open/close slide (shared keyframes) ----
 * Used by the Pasang Iklan (.faaz-pi-dialog) and Cari Properti
 * (.faaz-cp-dialog) modals — one definition, applied by each block's own CSS.
 * The JS opens by clearing [hidden] (display:flex => the in-animation runs),
 * and closes by adding its closing class, then hides the modal when the
 * out-animation ends (+ a fallback timer). */
@keyframes faaz-modal-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes faaz-modal-out {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translateY(24px);
    opacity: 0;
  }
}

/*
 * Shared modal shell (2026-10-30) — the skin the two new PHP modals use:
 * faaz/jasa-properti and faaz/properti-lainnya. One definition, so a new modal
 * only writes its own content CSS. The keyframes (faaz-modal-in / faaz-modal-out,
 * below) are shared with the Cari Properti + Pasang Iklan modals.
 *
 * The open trigger is any element carrying the class named in the modal's
 * data-faaz-open attribute (the hero tiles carry faaz-jp-open /
 * faaz-lainnya-open); assets/js/faaz-modal.js wires it.
 *
 * Animation follows the Pasang Iklan popup (open 800ms /
 * close 400ms cubic-bezier(.32,.72,0,1)); the panel is the white rounded card the
 * 2026-10-30 screenshots show, with the close X in its top-right corner.
 */

/* The overlay carries no colour (the user's request 2026-10-30): the page stays
 * visible behind the card. The layer is still full-screen, so a click outside the
 * panel closes the modal and the scroll lock holds. */
.faaz-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0);
  z-index: 100000;
}
.faaz-modal[hidden] {
  display: none;
}
.faaz-modal-dialog {
  width: min(1000px, 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: faaz-modal-in 800ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.faaz-modal.faaz-modal-closing .faaz-modal-dialog {
  animation: faaz-modal-out 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .faaz-modal-dialog,
  .faaz-modal.faaz-modal-closing .faaz-modal-dialog {
    animation: none;
  }
}

/* The white card. position:relative + sized by its content = the close X anchors
 * to the card's top-right corner. 2026-11-04 (user spec): the shared radius 8 + the
 * card skin shadow apply to EVERY modal opened from the hero icon row — Cari Properti,
 * Pasang Iklan, Jasa Properti, Properti Lainnya — the per-block panel classes
 * (.faaz-jp-panel / .faaz-pl-panel) only override width + padding, so one definition
 * here covers all four. */
.faaz-modal-panel {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  border-radius: 8px; /* the user's spec 2026-10-30 for both new modals */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  padding: 28px 28px 32px;
}

/* Card title — the screenshots centre the Jasa Properti heading and left-align
 * the Properti Dijual / Disewakan headings; a block sets the alignment per modal. */
.faaz-modal-title {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wp--preset--color--primary);
}

/* Close X: 20px FA times inside the card's top-right corner (same rule as the
 * Pasang Iklan modal). */
.faaz-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--wp--preset--color--primary);
  font-size: 20px;
  line-height: 1;
  z-index: 1;
}
.faaz-modal-close-icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d"; /* fa-times */
}

/* Scroll lock while a modal is open (Elementor parity). */
body.faaz-modal-lock {
  overflow: hidden;
}

@media (max-width: 767px) {
  .faaz-modal-panel {
    padding: 20px 16px 24px;
  }
}

/* --------------------------------------------------------------------------
   Equal card heights in every Swiper card slider (user 2026-11-02).
   Swiper sizes slides by width only, so a content-height card left a gap
   below its border (short cards looked shorter). Three rules, verified in
   headless: the wrapper gets an explicit align-items:stretch (Swiper's
   default normal does NOT stretch slides in this build); slides become flex
   containers at height auto (Swiper's height:100% is cyclic against the
   auto-height wrapper); the card fills its slide (flex:1). The image keeps
   its fixed min-height and the rows stack directly under it (user spec
   2026-11-02): the extra height stays as free space at the BOTTOM of the
   card, below the last row. Scoped to card-slider wrappers; card grids and
   image-gallery slides are untouched. Rules repeat across sliders ->
   shared stylesheet. */
.swiper.faaz-pp-swiper .swiper-wrapper,
.swiper.faaz-pb-swiper .swiper-wrapper,
.swiper.faaz-pd-sim-swiper .swiper-wrapper,
.swiper.faaz-bs-swiper .swiper-wrapper,
.swiper.faaz-bl-rel-swiper .swiper-wrapper,
.swiper.faaz-pr-tu-swiper .swiper-wrapper,
.swiper.faaz-dv-proyek-swiper .swiper-wrapper {
  align-items: stretch;
}

.swiper-slide.faaz-pp-slide,
.swiper-slide.faaz-pb-slide,
.swiper-slide.faaz-pd-sim-slide,
.swiper-slide.faaz-bs-slide,
.swiper-slide.faaz-bl-rel-slide,
.swiper-slide.faaz-pr-tu-slide,
.faaz-dv-proyek-swiper .swiper-slide {
  display: flex;
  align-items: stretch;
  height: auto;
}

.swiper-slide > .faaz-pp-card,
.swiper-slide > .faaz-bs-card {
  display: flex;
  flex-direction: column;
}

.swiper-slide > .faaz-pp-card,
.swiper-slide > .faaz-pb-card,
.swiper-slide > .faaz-bs-card,
.swiper-slide > .faaz-bl-rel-card,
.swiper-slide > .faaz-pr-tu-card {
  flex: 1;
}

/* No flex-grow on the CTA: the image area stays fixed, the rows keep their
 * natural position, the free space lands below them. */

/* Card sliders — nav buttons at the bottom-right (user 2026-11-02; flow
 * layout 2026-11-03): render.php prints the prev/next buttons inside a
 * .faaz-nav-row AFTER the .swiper container and wires them via Swiper
 * navigation, so they are plain normal-flow elements — the row right-aligns
 * them under the slider, prev 10px left of next.
 * Shadow room (user fix 2026-11-03): slides carry NO padding — the 20px
 * spaceBetween gaps already fit the 10px shadow spread between cards. The
 * container owns the room: box-sizing:content-box + padding 10px sides, 20px
 * bottom (user spec 2026-11-03) so Swiper sizes slides from the content width,
 * the edge-card shadows are not clipped by overflow:hidden, and the nav row sits
 * 20px below the card shadow. Circle skin stays in each block's section; mobile
 * shrinks the circles to 25px. */
.swiper.faaz-pp-swiper,
.swiper.faaz-pb-swiper,
.swiper.faaz-pd-sim-swiper,
.swiper.faaz-bs-swiper,
.swiper.faaz-bl-rel-swiper,
.swiper.faaz-pr-tu-swiper,
.swiper.faaz-dv-proyek-swiper {
  box-sizing: content-box;
  padding: 0 10px 20px;
  margin: 0 -10px;
}
.faaz-nav-row {
  display: flex;
  justify-content: flex-end;
}
.faaz-pp-nav + .faaz-pp-nav,
.faaz-pb-nav + .faaz-pb-nav,
.faaz-bs-nav + .faaz-bs-nav {
  margin-left: 5px;
}

/* ---- Block: faaz-accordion ---- */
/**
 * faaz/accordion — front-end CSS.
 *
 * Live numbers (mobile menu popup 11271, nested-accordion widget b3c4f10,
 * mobile ≤767px): title padding 10px, title 13px/500 #1f2124, dot-circle
 * icon 10px primary, item text 13px primary, 10px between items, hover
 * accent. The five gaps only: pseudo-element FA glyph, :hover.
 */

/* Anchor rule so Gutenberg copies this stylesheet into the editor canvas
   (the compatibility gate needs a .wp-block / .editor-styles-wrapper rule). */
.faaz-accordion {
  margin: 0;
}

.faaz-accordion-title {
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #1f2124;
}

.faaz-accordion-title::-webkit-details-marker {
  display: none;
}

.faaz-accordion-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faaz-accordion-items li a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  color: #1e2132;
}

.faaz-accordion-items li a:hover,
.faaz-accordion-items li a:focus {
  color: #d31010;
}

.faaz-accordion-dot::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f192"; /* fa-dot-circle */
  font-size: 10px;
  line-height: 1;
  color: #1e2132;
}

.faaz-accordion-items li a:hover .faaz-accordion-dot::before {
  color: #d31010;
}

/* ---- Block: faaz-agen-detail ---- */
/* ==========================================================================
   faaz/agen-detail — single agen-properti page (live Elementor template
   8341). Every value measured from ~/Downloads/single-agen.html at
   1440/1024/500 with tools/faaz-computed.js.
   ========================================================================== */

/* FA glyphs: this vendored FA5 build ships without the per-icon :before
   rules, so each glyph is a content span on its own class. Code points are
   from THIS build's cmap (glyph name = source of truth, fontTools):
   phone-alt U+F879 (solid 900), whatsapp U+F232 (Brands 400). */
.faaz-ag .faaz-ag-ic::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}
.faaz-ag .faaz-ag-ic-tel::before {
  content: "\f879";
}
.faaz-ag .faaz-ag-ic-wa::before {
  content: "\f232";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* Hero band (live 4e1f832): full-width #F1F1F1, pt/pb 50, sides 20 @<=1024. */
.faaz-ag-hero {
  background: #f1f1f1;
  padding: 50px 0;
}
.faaz-ag-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* Card (live 7ef58e3): white, radius 5, shadow 0 0 10 .18, pad 30, 50% of
   the 1180 column @D / 75% @T / 100% @M, flex column gap 20 centred. */
.faaz-ag-card {
  width: 50%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Row: photo column 30% + text column 70%, 20px gap (both shrink around
   the gap, exactly like the live Elementor flex: 153/357 @1440). */
.faaz-ag-card-row {
  width: 100%;
  display: flex;
  gap: 20px;
}
.faaz-ag-img-col {
  width: 30%;
}
/* Photo (live e3b623b): 100x100 circle (radius 150), shadow 0 0 10 .2,
   top-aligned + centred in its column. */
.faaz-ag-img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 150px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}
.faaz-ag-text-col {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Name (live 61eba80): h1 20/1/600 @D, 22/1/600 @<=1024. */
.faaz-ag-name {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  color: #1e2132;
}

/* Bio (live d4d3ff5): 14/27 secondary. The trailing 20px margin stands in
   for the live template's empty HTML widget slot, which adds one more
   20px gap before the divider. */
.faaz-ag-bio {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 27px;
  color: #5a5a5a;
}

/* Divider (live ec30413): 1px #C7C7C7 in a 15/15 pad box, full card width. */
.faaz-ag-divider {
  width: 100%;
  border-top: 1px solid #c7c7c7;
  padding: 15px 0;
}

/* Button row (live 6954ee3): centred, 20px gap, -5px lift. */
.faaz-ag-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: -5px;
}

/* Buttons (live cc17028/899362b): 13px/13 white on #D31010, 1px #C7C7C7
   border, shadow 0 0 10 .18, pad 10/25 (10/20 @M). Hover = the live
   #E9E9E9 text. */
.faaz-ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 25px;
  font-size: 13px;
  line-height: 13px;
  font-weight: 400;
  color: #fff;
  background: #d31010;
  border: 1px solid #c7c7c7;
  border-radius: 7px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
  text-decoration: none;
}
.faaz-ag-btn:hover {
  color: #e9e9e9;
}

/* --------------------------------------------------------------------------
   Listing section: the template's shared faaz/propeti-grid block, scoped to
   this agent by the grid's own render. Live values from template 8341
   (grid b3fd108): 30px gutters, 10px cell pad, pagination 13px boxes, 10px
   above the grid, 5px rhythm, 1px primary border, #D31010 hover/current.
   -------------------------------------------------------------------------- */
.faaz-ag-list .faaz-pg-grid {
  gap: 30px;
}
.faaz-ag-list .faaz-pg .faaz-pg-cell {
  padding-bottom: 10px;
}
.faaz-ag-list .faaz-pg-pages {
  margin-top: 10px;
  gap: 5px;
}
.faaz-ag-list .faaz-pg-pagination .page-numbers {
  font-size: 13px;
  line-height: 1;
  color: #1e2132;
  background-color: #fff;
  border-color: #1e2132;
}
.faaz-ag-list .faaz-pg-pagination a.page-numbers:hover,
.faaz-ag-list .faaz-pg-pagination .page-numbers:hover,
.faaz-ag-list .faaz-pg-pagination .page-numbers.current {
  border-color: #1e2132;
}
.faaz-ag-list .faaz-pg-pagination .page-numbers.dots {
  color: #1e2132;
  background-color: #fff;
  border-color: #1e2132;
}

/* --------------------------------------------------------------------------
   Tablet (live 768-1024): band sides 20, card 75%, name 22px, grid 2-up.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-ag-hero {
    padding: 50px 20px;
  }
  .faaz-ag-card {
    width: 75%;
  }
  .faaz-ag-name {
    font-size: 22px;
  }
  .faaz-ag-list {
    padding-left: 20px;
    padding-right: 20px;
  }
  .faaz-ag-list .faaz-pg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Mobile (live <=767): card full-width + 20/30/20/20 pad, the row stacks
   (photo centred above the text), buttons 10/20 pad, grid 1-up.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .faaz-ag-card {
    width: 100%;
    padding: 20px 20px 30px;
  }
  .faaz-ag-card-row {
    flex-wrap: wrap;
  }
  .faaz-ag-img-col,
  .faaz-ag-text-col {
    width: 100%;
  }
  .faaz-ag-btn {
    padding: 10px 20px;
  }
  .faaz-ag-list .faaz-pg-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Block: faaz-agen-grid ---- */
/* ==========================================================================
   faaz/agen-grid — the /agen-properti/ archive loop grid.

   Every value measured from the live page (1440/1024/500) with
   tools/faaz-computed.js + faaz-editor-eval.js:
     grid     2/1 columns, 30px gap (the live .elementor-grid)
     card     white, 1px #c7c7c7 border, radius 8, shadow 0 0 10 .18,
              10px side padding; 258px total height @D
     top row  20px padding, 1px #c7c7c7 bottom divider; 40% avatar column
              (100px circle, shadow .2) + 60% text column (10px pad, 20px
              gap) of the 16/700 name + the blue View button
     pills    centred row (10/20 pad, 20px gap): 13px white pills, 1px
              #c7c7c7 border, radius 7, shadow .18, 10/25 pad
     pag      16px boxes, 10px pad, radius 5, 1px #5a5a5a border, blue
              current/dots (the live numbers_and_prev_next)
   ========================================================================== */

/* FA glyphs: this vendored FA5 build ships without the per-icon :before
   rules, so each glyph is a content span on its own class. Code points
   are from THIS build's cmap (glyph name = source of truth, fontTools):
   phone-alt U+F879 (solid 900), whatsapp U+F232 (Brands 400). */
.faaz-ag .faaz-agen-card-fa::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}
.faaz-ag .faaz-agen-card-fa-tel::before {
  content: "\f879";
}
.faaz-ag .faaz-agen-card-fa-wa::before {
  content: "\f232";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* Grid: the live .elementor-grid (2 columns of 575px + 30px gap in the
   1180 column; 1 column on mobile). */
.faaz-ag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}
/* equal card height in the agent grid (same rule as the property / perumahan
 * grids, user spec 2026-11-03): grid items stretch, height:100% fills. */
.faaz-ag-grid > .faaz-agen-card {
  height: 100%;
}

/* Card: the live loop item (1px #c7c7c7 wrapper border + white card with
   radius 8, shadow .18, 10px side padding). */
.faaz-agen-card {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
  padding: 0 10px;
}

/* Top row: avatar + name/View over the 1px #c7c7c7 bottom divider (the
   live meta row 407c731d: 20px vertical padding, align centre). */
.faaz-agen-card-top {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 20px 0;
  border-bottom: 1px solid #c7c7c7;
}

/* Avatar column: 40% of the row, the 100px circle centred (the live
   2eeb408f). Shadow 0 0 10 .2 on the live img. */
.faaz-agen-card-avatar {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faaz-agen-card-avatar img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

/* Text column: 60%, 10px padding, 20px gap (the live 489fd71f). */
.faaz-agen-card-meta {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

/* Name: 16/1.2 700 primary @D (17/1.4 @<=767, 1.4 @<=1024). */
.faaz-agen-card-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #1e2132;
}

/* View My Profile: 13/400 white on #D31010, 12/24 pad, radius 7 (the live
   button widget; hover = the live #e9e9e9 text). */
.faaz-agen-card-view {
  display: inline-block;
  /* A flex item in the meta column would stretch to the full column —
     the live button is content-width (137px) left-aligned. */
  align-self: flex-start;
  width: fit-content;
  padding: 12px 24px;
  font-size: 13px;
  line-height: 13px;
  font-weight: 400;
  color: #fff;
  background: #d31010;
  border-radius: 7px;
  text-decoration: none;
}
.faaz-agen-card-view:hover {
  color: #e9e9e9;
}

/* Pill row: centred, 20px gap, 10/20 pad (the live 3bf54d84), 30px below
   the card bottom. */
/* Pill row: centred, 20px gap, 20/20 pad (the live 3bf54d84: 20px from the
   divider to the pill, 20px below), 30px below the pill row. */
.faaz-agen-card-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  margin-bottom: 30px;
}

/* Pills: 13/400 #1e2132 on white, 1px #c7c7c7 border, radius 7, shadow
   .18, 10/25 pad (the live 5860c72/6e470b9). */
.faaz-agen-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 25px;
  font-size: 13px;
  line-height: 13px;
  font-weight: 400;
  color: #1e2132;
  background: #fff;
  border: 1px solid #c7c7c7;
  border-radius: 7px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
  text-decoration: none;
}
/* Pills: 13/400 #1e2132 on white, 1px #c7c7c7 border, radius 7, shadow
   .18, 10/25 pad (the live 5860c72/6e470b9). Hover = brand red — the FA
   glyph ::before inherits the pill's color, so text + icon both turn red
   (the live #e9e9e9 hover was the blue-pill-era remnant: near-invisible
   on our white pill). */
.faaz-agen-card-pill:hover {
  color: #d31010;
}

/* Pagination: the live numbers_and_prev_next (mt 40 / mb 27, centred,
   16px boxes, 10px pad, radius 5, 1px #5a5a5a border, blue current/dots). */
.faaz-ag-pagination {
  margin-top: 40px;
  margin-bottom: 27px;
}
.faaz-ag-pagination .faaz-ag-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}
.faaz-ag-pagination .page-numbers {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  line-height: 16px;
  color: #1e2132;
  background-color: #fff;
  border: 1px solid #5a5a5a;
  border-radius: 5px;
  text-decoration: none;
}
.faaz-ag-pagination a.page-numbers:hover,
.faaz-ag-pagination .page-numbers:hover {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}
.faaz-ag-pagination .page-numbers.current {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}
/* The live dots are a filled blue box (same as the current page). */
.faaz-ag-pagination .page-numbers.dots {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}

/* --------------------------------------------------------------------------
   Responsive (live 1024/767 states):
   - <=1024: name line-height 1.4, text column centred
   - <=767:  1-column grid, 17px name, top row stacked (avatar centred
             above the centred text column)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-agen-card-title {
    line-height: 1.4;
  }
}

@media (max-width: 767px) {
  .faaz-ag-grid {
    grid-template-columns: 1fr;
  }
  .faaz-agen-card-title {
    font-size: 17px;
    line-height: 1.4;
  }
  .faaz-agen-card-top {
    flex-direction: column;
    gap: 0;
  }
  .faaz-agen-card-avatar {
    flex: 0 0 auto;
  }
  .faaz-agen-card-meta {
    align-items: center;
    text-align: center;
    padding: 20px 15px 15px;
  }
  .faaz-agen-card-btns {
    margin-bottom: 10px;
  }
}

/* ---- Block: faaz-agen-search ---- */
/*
 * faaz/agen-search — the /agen-properti/ archive search bar.
 *
 * Measured on the live page (1440px): bar 580x35 (4px inset in its 590px
 * container), white, 1px #b4b4b4 border, radius 3, inset shadow
 * rgb(181,181,181) 1px 0 6px -3px; input 12px #000 transparent (10px left
 * gap, 5px padding); magnifier 35x35, brand red #D31010 (recolor 2026-10-25,
 * hover #A50D0D), 22px icon white.
 */

.faaz-as {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* The live ASP widget container: 590px fixed, centred in the
		full-bleed strip (678 @768–1024, 100% of the strip content @≤767);
		the probox itself is 4px inset inside it (582 / 670 / 100%-8). */
  width: 582px;
  height: 37px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
  box-shadow: rgb(181, 181, 181) 1px 0px 6px -3px inset;
}

.faaz-as-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 2px 5px 0 15px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  color: #000;
}

.faaz-as-input:focus {
  outline: none;
}

.faaz-as-magnifier {
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  /* Brand red per the 2026-10-25 recolor (blue → #D31010, hover → #A50D0D);
	   the live light-cyan gradient + white inset highlight are gone. */
  background: #d31010;
  cursor: pointer;
}

.faaz-as-magnifier:hover {
  background: #a50d0d;
}

.faaz-as-magnifier svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

@media (max-width: 1024px) {
  .faaz-as {
    width: 670px;
  }
}

@media (max-width: 767px) {
  .faaz-as {
    width: calc(100% - 8px);
  }
}

/* ---- Block: faaz-blog-detail ---- */
/* faaz/blog-detail — single blog post (the live BuddyBoss theme
 * single-post layout). Measured on the saved live reference
 * ~/Downloads/single-blog.html at 1440/1024/500.
 *
 * Column: 800px max (780 content with the 10px side padding), centered —
 * the live .content-area. The mobile side padding (30px) mirrors the live
 * container + content padding at <=767 (the live 544/800 re-anchored).
 */

.faaz-bl {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 10px 0;
}

/* FA glyphs (code points from THIS vendored build's cmap; the fb/tw
 * glyphs live in the Brands face — the base class carries the solid face). */
.faaz-bl .faaz-fa {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

.faaz-bl .faaz-bl-fa-folder::before {
  content: "\f07b";
}
.faaz-bl .faaz-bl-fa-tags::before {
  content: "\f02c";
}
.faaz-bl .faaz-bl-fa-comment::before {
  content: "\f086";
}
.faaz-bl .faaz-bl-fa-share::before {
  content: "\f1e0";
}
.faaz-bl .faaz-bl-fa-angle::before {
  content: "\f105";
}

.faaz-bl .faaz-bl-fa-fb,
.faaz-bl .faaz-bl-fa-tw {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}
.faaz-bl .faaz-bl-fa-fb::before {
  content: "\f09a";
}
.faaz-bl .faaz-bl-fa-tw::before {
  content: "\f099";
}

/* --------------------------------------------------------------------------
   Left share column (live .site-content-grid > .bb-share-container): 50px
   pill, hidden <=1024. FIXED to the viewport (user decision 2026-10-19 —
   the live pill scrolled away with the page): 175px from the top, and
   -60px off the 800px column's left edge = calc(50% - 460px) of the
   viewport (exact at >=820vw; off-screen for narrower, where the column
   is full-width and the live pill is off-screen too).
   -------------------------------------------------------------------------- */
.faaz-bl-side-share {
  position: fixed;
  left: calc(50% - 460px);
  top: 175px;
  width: 50px;
  padding: 15px 10px;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);
  border-radius: 100px;
  z-index: 21;
}

.faaz-bl-side-share a {
  font-size: 17px;
  line-height: 17px;
  color: #1e2132;
  margin-bottom: 2px;
}
.faaz-bl-side-share a .faaz-fa {
  line-height: 1.5;
  opacity: 0.4;
  transition: all 0.2s linear;
}
.faaz-bl-side-share a:hover .faaz-fa {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Head wrapper (title + meta + featured image). The h1 carries the live
   35px gap; the media's mb 32 collapses out of the wrapper into the gap
   before the post-content slot (margin collapse: the core group-child
   margin-zero rule on the wrapper loses to the child's larger margin).
   -------------------------------------------------------------------------- */
.faaz-bl-head {
  margin: 0;
}

.faaz-bl-title {
  margin: 0 0 35px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #1e2132;
}

/* --------------------------------------------------------------------------
   Meta row: avatar 38 + author/date 14/21 left, comment count right.
   -------------------------------------------------------------------------- */
.faaz-bl-meta {
  display: flex;
  align-items: center;
  margin: 0 0 25px;
}

.faaz-bl-author {
  display: flex;
  align-items: center;
}

.faaz-bl-avatar {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  overflow: hidden;
  flex: none;
  margin-right: 10px;
  background: #d6d9dd;
}
.faaz-bl-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faaz-bl-author-txt {
  display: block;
}

.faaz-bl-author-name {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: #1e2132;
  text-decoration: none;
}
.faaz-bl-author-name:hover {
  color: #d31010;
}

.faaz-bl-date {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: #9b9c9f;
}

.faaz-bl-comments {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.21px;
  color: #9b9c9f;
  text-decoration: none;
}
.faaz-bl-comments .faaz-fa {
  font-size: 18px;
  line-height: 1.5;
  margin-right: 5px;
}
.faaz-bl-comments-n {
  color: #5a5a5a;
}
.faaz-bl-comments:hover {
  background: #f2f4f5;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Featured image (live .single .entry-img: 36% cover box, radius 6, mb 32).
   -------------------------------------------------------------------------- */
.faaz-bl-media {
  position: relative;
  overflow: hidden;
  padding-top: 36%;
  margin: 0 0 32px;
  border-radius: 6px;
  background: #647385;
}
.faaz-bl-media img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Post content (live .single-post .entry-content). In the template the
   content is the core post-content block (wrapper div .wp-block-post-content);
   in "both" mode it is the .faaz-bl-content div — one selector covers both.
   -------------------------------------------------------------------------- */
:is(.faaz-bl-content, .faaz-bl .wp-block-post-content) {
  letter-spacing: -0.24px;
}
:is(.faaz-bl-content, .faaz-bl .wp-block-post-content) p {
  margin: 0 0 25px;
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}
:is(.faaz-bl-content, .faaz-bl .wp-block-post-content) h2 {
  margin: 0 0 27px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #1e2132;
}
:is(.faaz-bl-content, .faaz-bl .wp-block-post-content) h3 {
  margin: 0 0 27px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #1e2132;
}
:is(.faaz-bl-content, .faaz-bl .wp-block-post-content) h4 {
  margin: 0 0 27px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #1e2132;
}
:is(.faaz-bl-content, .faaz-bl .wp-block-post-content) a {
  color: #d31010;
  text-decoration: none;
}
:is(.faaz-bl-content, .faaz-bl .wp-block-post-content) a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Categories / Tags row (live .post-meta-wrapper) + hover share panel.
   -------------------------------------------------------------------------- */
.faaz-bl-tax {
  position: relative;
  border-top: 1px solid #d6d9dd;
  padding: 40px 80px 0 0;
  margin: 0 0 40px;
  font-size: 15px;
}

.faaz-bl-tax-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 21px;
  margin: 0 0 10px;
  color: #5a5a5a;
}
.faaz-bl-tax-row .faaz-fa {
  font-size: 20px;
  color: #9b9c9f;
  margin-right: 7px;
}
.faaz-bl-tax-links {
  margin-left: 5px;
}
.faaz-bl-tax-links a {
  color: #d31010;
  text-decoration: none;
}
.faaz-bl-tax-links a:hover {
  text-decoration: underline;
}

/* Show-support (live .show-support): absolute top 25 right 0. */
.faaz-bl-support {
  position: absolute;
  top: 25px;
  right: 0;
}
.faaz-bl-support-row {
  display: flex;
  align-items: center;
  padding: 15px 0;
}
.faaz-bl-support-comment {
  margin-right: 12px;
  display: inline-flex;
}
.faaz-bl-support-comment .faaz-fa {
  font-size: 24px;
  color: #5a5a5a;
  transition: all 0.2s linear;
}
.faaz-bl-support-comment:hover .faaz-fa {
  color: #d31010;
}

.faaz-bl-share-wrap {
  position: relative;
  margin-right: 12px;
  display: inline-flex;
}
.faaz-bl-share {
  display: inline-flex;
}
.faaz-bl-share .faaz-fa {
  font-size: 28px;
  color: #1e2132;
}

/* Hover panel (live .bb-share-author-box): hidden until the wrap is
   hovered; sits to the LEFT of the trigger icon, its bottom 20px above
   the wrap's bottom, 15px off. */
.faaz-bl-share-box {
  position: absolute;
  bottom: 20px;
  left: 0;
  transform: translateX(-100%);
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 10px;
  min-height: 110px;
  background: #fff;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);
  border-radius: 100px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s linear;
  z-index: 21;
}
.faaz-bl-share-wrap:hover .faaz-bl-share-box {
  visibility: visible;
  opacity: 1;
}
.faaz-bl-share-box a {
  font-size: 17px;
  line-height: 17px;
  color: #1e2132;
  margin-bottom: 8px;
}
.faaz-bl-share-box a .faaz-fa {
  font-size: 28px;
  line-height: 1;
}
.faaz-bl-share-box a:last-child {
  margin-bottom: 0;
}
.faaz-bl-share-box a > .faaz-fa {
  opacity: 0.4;
  transition: all 0.2s linear;
}
.faaz-bl-share-box a:hover > .faaz-fa {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Empty author-info hairline (live .post-author-info).
   -------------------------------------------------------------------------- */
.faaz-bl-author-info {
  border-bottom: 1px solid #d6d9dd;
  margin: 0 0 30px;
}

/* --------------------------------------------------------------------------
   Related Articles (live slick: 2/1 per view, 400px slides, 380px cards).
   -------------------------------------------------------------------------- */
.faaz-bl-related {
  position: relative;
  border-bottom: 1px solid #d6d9dd;
  padding-bottom: 10px;
  margin: 0 0 30px;
}

.faaz-bl-related-head {
  position: relative;
  margin: 0 0 27px;
  padding-right: 85px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #1e2132;
}

/* Arrows (live .post-related-posts a.slick-arrow): 30px, radius 6, border,
   14px chevron — prev at right 35 (+8 margin, icon rotated), next right 5. */
.faaz-bl-rel-arrow {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6d9dd;
  border-radius: 6px;
  background: transparent;
  opacity: 0.8;
  cursor: pointer;
  z-index: 10;
}
.faaz-bl-rel-arrow .faaz-fa {
  font-size: 14px;
  color: #1e2132;
}
.faaz-bl-rel-arrow:hover .faaz-fa {
  color: #d31010;
}
.faaz-bl-rel-prev {
  right: 35px;
  margin-right: 8px;
}
.faaz-bl-rel-prev .faaz-fa {
  transform: rotate(180deg);
}
.faaz-bl-rel-next {
  right: 5px;
}
.faaz-bl-rel-arrow.is-disabled {
  pointer-events: none;
}
.faaz-bl-rel-arrow.is-disabled .faaz-fa {
  opacity: 0.5;
}

/* Slides: fixed 400px (the live slick keeps 400 at every width), card =
   slide - 20 (the live article's 10px side padding). Three-class selector
   because the Swiper bundle's `.swiper-slide { width:100% }` loads AFTER
   the block stylesheet and would win an equal-specificity rule. */
/* Track width: the live .slick-list spans the whole column. Desktop:
   -10px margin each side, no side padding => content = column + 20 = 800px,
   so at the end of the track (translate -800) the last 400px slide fits
   exactly and its border is not clipped. Mobile: 20px side padding puts
   card 1 at the live x30. Two-class selector: the Swiper bundle's
   `.swiper { margin:auto; padding:0 }` loads AFTER the block CSS and wins
   an equal-specificity rule. */
.faaz-bl .faaz-bl-rel-swiper {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0 0 20px;
}
.faaz-bl .faaz-bl-rel-swiper .faaz-bl-rel-slide {
  width: 400px;
  max-width: 100%;
}
.faaz-bl-rel-card {
  margin: 0 10px 20px;
  box-sizing: border-box;
  border: 1px solid #d6d9dd;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}

/* Card image: 52.56% cover box (40.476% <=767). */
.faaz-bl-rel-img {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 52.56%;
  background: #647385;
}
.faaz-bl-rel-img img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  object-fit: cover;
}

/* Card body (live .entry-content-wrap: 20/30/25/30). */
.faaz-bl-rel-body {
  padding: 20px 30px 25px;
}
.faaz-bl-rel-title {
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.48px;
}
.faaz-bl-rel-title a {
  color: #1e2132;
  text-decoration: none;
}
.faaz-bl-rel-title a:hover {
  color: #d31010;
}
.faaz-bl-rel-excerpt {
  margin: 0 0 36px;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #5a5a5a;
}
.faaz-bl-rel-meta {
  display: flex;
  align-items: center;
}
/* The card meta text is 13px in the live (the main meta row's 14px class
   is shared with the title block). */
.faaz-bl-rel-meta .faaz-bl-author-name {
  font-size: 13px;
  line-height: 21px;
}
.faaz-bl-rel-author {
  display: flex;
  align-items: center;
}
.faaz-bl-rel-date {
  display: block;
  font-size: 13px;
  line-height: 21px;
  color: #9b9c9f;
}
.faaz-bl-rel-comment {
  margin-left: auto;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.21px;
  color: #9b9c9f;
  text-decoration: none;
}
.faaz-bl-rel-comment .faaz-fa {
  font-size: 18px;
  line-height: 1.5;
  margin-right: 5px;
}
.faaz-bl-rel-comment:hover {
  background: #f2f4f5;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Comment area (live #comments): "Responses" h4 + approved list. The
   template's core post-comments-form block follows with the form (skinned
   in faaz-blocks.css).
   -------------------------------------------------------------------------- */
.faaz-bl-comments-area {
  margin: 0;
}
.faaz-bl-comments-title {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #1e2132;
}
.faaz-bl-comment-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.faaz-bl-comment {
  display: flex;
  margin: 0 0 20px;
}
.faaz-bl-comment-main {
  flex: 1;
}
.faaz-bl-comment-head {
  display: flex;
  align-items: baseline;
  margin-bottom: 4px;
}
.faaz-bl-comment-author {
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  color: #1e2132;
  margin-right: 10px;
}
.faaz-bl-comment-date {
  font-size: 12px;
  line-height: 21px;
  color: #5a5a5a;
}
.faaz-bl-comment-body {
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}

/* --------------------------------------------------------------------------
   Responsive (live 544/800/1040 re-anchored to the theme's 767/1024).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-bl-side-share {
    display: none;
  }
}

@media (max-width: 767px) {
  .faaz-bl {
    padding: 30px 30px 0;
  }
  /* Mobile track: -20px each side + 10px padding = a 445px content box
	   (the live list is 465 at 500vw), slide 1 at x20, card 1 at the live
	   x30; at the end (translate -1200) the last card is fully visible. */
  .faaz-bl .faaz-bl-rel-swiper {
    margin: 0 -20px;
    padding: 0 0 20px;
  }
  .faaz-bl-title {
    font-size: 24px;
    line-height: 1.5;
  }
  .faaz-bl-content p {
    margin-bottom: 20px;
  }
  .faaz-bl-rel-img {
    padding-top: 40.476%;
  }
}

/* ---- Block: faaz-blog-filter ---- */
/*
 * faaz/blog-filter — the /blog/ filter row (live AQL widgets 3261452f +
 * 3bb34769 + aed742b).
 *
 * Measured live (faaz-computed.js on the reference blog page DOM):
 * 41px controls (1px #5a5a5a border, radius 5, 15px text, 12px padding),
 * 290px left column (Kategori over Urutkan, 25px gap), the "Cari judul
 * artikel" input 60% of the rest, bottom-aligned with the sort select;
 * the row carries a 32px bottom padding (the live grid sits 52px below
 * the sort select: 32 inside the row + 20 to the grid). The 30px gap
 * above the row + the 100px below the pagination live in faaz-blocks.css
 * on .faaz-bg-wrap (the live section padding). @T: 285px column, input
 * 70%. @M: stacked full-width, search first.
 */
.faaz-bf {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  padding-bottom: 32px;
}

.faaz-bf-col {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 290px;
  flex-basis: 290px;
  flex-shrink: 0;
}

/* A positioned field wrapper carrying the caret: a CSS ::after cannot
 * render on a native <select> (Chrome drops pseudo-elements on form
 * controls), so the live triangle (.form-tax select::after) is a real
 * <span> — same approach as the landing filter row. */
.faaz-bf-field {
  position: relative;
  display: block;
}

.faaz-bf select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 41px;
  box-sizing: border-box;
  border: 1px solid #5a5a5a;
  border-radius: 5px;
  background: #fff;
  padding: 0 40px 0 12px;
  font-family: inherit;
  font-size: 15px;
  color: #5a5a5a;
}

.faaz-bf-caret {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #191919;
  pointer-events: none;
}

.faaz-bf-search {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.faaz-bf-search input {
  width: 60%;
  height: 41px;
  box-sizing: border-box;
  border: 1px solid #5a5a5a;
  border-radius: 5px;
  background: #fff;
  padding: 0 12px;
  font-family: inherit;
  font-size: 15px;
  color: #5a5a5a;
}

.faaz-bf-search input::placeholder {
  color: #5a5a5a;
}

@media (max-width: 1024px) {
  .faaz-bf-col {
    width: 285px;
    flex-basis: 285px;
  }

  .faaz-bf-search input {
    width: 70%;
  }
}

@media (max-width: 767px) {
  /* The live mobile_mode stack: search first, then Kategori, then sort —
	 * all full-width (row gap 19, select gap 21 — live mobile margins). */
  .faaz-bf {
    flex-direction: column;
    align-items: stretch;
    gap: 19px;
  }

  .faaz-bf-col {
    width: 100%;
    flex-basis: auto;
    gap: 21px;
  }

  .faaz-bf-search {
    order: -1;
    width: 100%;
  }

  .faaz-bf-search input {
    width: 100%;
  }
}

/* ---- Block: faaz-blog-grid ---- */
/*
 * faaz/blog-grid — the /blog/ article grid (live post widget 9b95bc1).
 *
 * Measured live at 1440 (faaz-computed.js on the reference blog page):
 * 3/2/1 columns, 20px gap, cards top-aligned in their row (a shorter card
 * keeps its natural height). Pagination: 38px boxes (10px pad, 16px/1
 * text, radius 5, 1px #5a5a5a border, 4px gap, centred), the current page +
 * dots on blue #D31010, 20px above (live .pagination margin-top:20px; the
 * 100px below sits on .faaz-bg-wrap in faaz-blocks.css).
 */
.faaz-bg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 1024px) {
  .faaz-bg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .faaz-bg-grid {
    grid-template-columns: 1fr;
  }
}

.faaz-bg-empty {
  margin: 40px 0 0;
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}

/* Pagination: live .pagination (margin-top 20px, centred, 16px). */
.faaz-bg-pagination {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
}

.faaz-bg-pagination .faaz-bg-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.faaz-bg-pagination .page-numbers {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  line-height: 16px;
  color: #1e2132;
  background-color: #fff;
  border: 1px solid #5a5a5a;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}

.faaz-bg-pagination a.page-numbers:hover,
.faaz-bg-pagination .page-numbers:hover {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}

.faaz-bg-pagination .page-numbers.current {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}

.faaz-bg-pagination .page-numbers.dots {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}

/* ---- Block: faaz-blog-slider ---- */
/*
 * faaz/blog-slider — "Panduan & Berita Properti" section.
 *
 * The live Elementor loop carousel (template 11924) rebuilt natively on
 * Swiper 11: 3/2/1 slides per view (desktop / tablet / mobile), 20px gap,
 * loop, 500ms, 37px white circle arrows (#D31010 chevron).
 *
 * The card itself (faaz-bs-card / -cta / -body / -meta) is SHARED with the
 * /blog/ archive grid (faaz/blog-grid) — one live loop template (11924), one
 * set of card values in faaz-blocks.css. Only the Swiper wrapper + arrows
 * live here.
 */

.faaz-bs {
  position: relative;
}

/* Slides are sized by Swiper (3/2/1 per view, 20px gap); cards stretch. */

/* Arrows: live elementor-swiper-button (37px white circle, blue chevron,
 * 185px from the carousel top). */
.faaz-bs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  color: #000;
  cursor: pointer;
  transition:
    background-color 300ms,
    color 300ms;
}

.faaz-bs-nav:hover {
  background: #000;
  color: #fff;
}

.faaz-bs-nav svg {
  width: 25px;
  height: 25px;
}

/* ---- Block: faaz-breadcrumbs ---- */
/* faaz/breadcrumbs — the landing-page breadcrumb trail.
 *
 * Measured on the saved live /dijual/ page: 13px #5a5a5a text, 27px line box,
 * " / " separator. The separator is a pseudo-element (one of the five free-CSS
 * gaps: core has no attribute for it); li + li::before keeps the <ol> clean.
 */

.faaz-crumbs {
  margin: 0;
}

.faaz-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 400;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-crumbs li {
  display: flex;
  align-items: center;
}

.faaz-crumbs li + li::before {
  content: "/";
  margin: 0 8px;
  color: #5a5a5a;
}

.faaz-crumbs a {
  color: #5a5a5a;
  text-decoration: none;
}

.faaz-crumbs a:hover,
.faaz-crumbs a:focus {
  text-decoration: underline;
}

/* Dark variant: the live /perumahan-baru/ breadcrumb on the hero cover —
 * 13px white, white separator, gold (#D31010) hover (no underline). */
.faaz-crumbs--dark ol {
  color: #fff;
}

.faaz-crumbs--dark li + li::before {
  color: #fff;
}

.faaz-crumbs--dark a {
  color: #fff;
}

.faaz-crumbs--dark a:hover,
.faaz-crumbs--dark a:focus {
  color: #d31010;
  text-decoration: none;
}

/* ---- Block: faaz-cari-propeti ---- */
/*
 * faaz/cari-propeti — the live Elementor popup 10952 ("Carikan Properti")
 * as native CSS.
 *
 * Sources: the saved live home page (tools/reference copy) — popup CSS
 * block (#elementor-popup-modal-10952: scrim rgba(0,0,0,.8) centred,
 * .dialog-message 640px height-auto with max-width:100vw overflow:auto,
 * .dialog-widget-content white radius 0 shadow 2px 8px 23px 3px
 * rgba(0,0,0,.2), .dialog-close-button 20px, primary colour, hover accent)
 * + a forced-open 1440px measurement:
 *
 *   dialog          640x618, centred in the viewport
 *   banner          640x80 flush at the dialog top
 *   banner -> form  20px (the live container's flex gap)
 *   form            20px side margins (the live widget container margin)
 *   field pairs     col-50: each field 50% of the -5px-inset 610px wrapper,
 *                   5px inner padding (the 10px visual gutter), mb 10
 *   labels          14px/21, 400, #1E2132, mb 4
 *   inputs          13px, 41px box (40 + border), 1px #D6D9DD, radius 3,
 *                   padding 5px 14px, white, #1f2124; select pad-right 20
 *   checkbox rows   13px, 10px between options
 *   Send button     193.33x40 (33.333% of 610 - 10), radius 7, #D31010,
 *                   white 15px/1 500, padding 0 24
 *   dialog bottom   22px below the button row
 *
 * The form skin overrides sit under .faaz-cp-form and win over the base
 * faaz-form.css skin (this file loads after it).
 */

/* The overlay (live #elementor-popup-modal-10952). Above the other faaz
 * modals (99999 mobile menu, 100000 pasang-iklan). */
.faaz-cp-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100001;
}
.faaz-cp-modal[hidden] {
  display: none;
}

/* The live .dialog-message: 640px, height auto, centred. On viewports under
 * 640 the box clamps to the viewport width and the content scrolls
 * internally (the live max-width:100vw + overflow:auto).
 * 2026-11-04 (user spec): the card here IS the dialog (no .faaz-modal-panel in
 * this block), so the shared modal card skin — radius 8 + the card shadow —
 * lives on .faaz-cp-dialog. The live Elementor shadow (2px 8px 23px 3px) is
 * replaced by the one card skin the whole theme uses, so all four hero-row
 * modals match. */
.faaz-cp-dialog {
  position: relative;
  width: 640px;
  max-width: 100vw;
  height: auto;
  overflow: auto;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

/* Open = slide up into place, close = slide down out — the same keyframes as the
 * Pasang Iklan modal (shared in faaz-blocks.css), the same JS protocol: the JS
 * adds the closing class and hides the modal when the closing animation ends. */
.faaz-cp-dialog {
  animation: faaz-modal-in 800ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.faaz-cp-modal.faaz-modal-closing .faaz-cp-dialog {
  animation: faaz-modal-out 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .faaz-cp-dialog,
  .faaz-cp-modal.faaz-modal-closing .faaz-cp-dialog {
    animation: none;
  }
}

/* Close: the live .dialog-close-button (top/right 20, 20px, primary colour,
 * hover accent). */
.faaz-cp-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #1e2132;
  font-size: 20px;
  line-height: 1;
  z-index: 1;
}
.faaz-cp-close:hover,
.faaz-cp-close:focus {
  color: #d31010;
}
.faaz-cp-close-icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d"; /* fa-times */
}

/* The banner (live widget 76c0851, attachment 11009). */
.faaz-cp-banner {
  display: block;
  width: 100%;
  height: auto;
}

/* The form container (live widget beaa52a: margin 0 20px; the 20px top is
 * the container flex gap, the 22px bottom is the live dialog's space below
 * the button row). */
.faaz-cp-form {
  margin: 20px 20px 22px;
}

/* The live fields wrapper is inset -5px each side (610px in a 600px form);
 * the field pairs are 50% of that with 5px inner padding (the 10px visual
 * gutter), so the pairs carry no flex gap of their own. */
.faaz-cp-form .faaz-fm {
  margin: 0 -5px;
}

.faaz-cp-form .faaz-fm-field {
  margin-bottom: 10px;
  padding: 0 5px;
}

.faaz-cp-form .faaz-fm-row {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
}

/* The base mobile rule stacks the col-50 rows — the live popup keeps them
 * side by side at every width (its col-50 fields carry elementor-sm-50). */
.faaz-cp-form .faaz-fm-row > .faaz-fm-field {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .faaz-cp-form .faaz-fm-row {
    display: flex;
  }
  .faaz-cp-form .faaz-fm-row > .faaz-fm-field {
    margin-bottom: 0;
  }
}

/* Labels: the live popup labels are 14px/400 (not the 500 of the other
 * faaz forms). */
.faaz-cp-form .faaz-fm-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin-bottom: 4px;
}

/* The live popup inputs are 13px (the site forms are 14px). */
.faaz-cp-form .faaz-fm-input {
  font-size: 13px;
}

/* The live select reserves 20px for its caret (not the 34px of the others). */
.faaz-cp-form .faaz-fm-select-input {
  padding-right: 20px;
}

/* Checkbox option rows (Saya Ingin, Bersedia): 13px like the inputs. */
.faaz-cp-form .faaz-fm-option {
  font-size: 13px;
}

/* The Send button: the live col-33 group with its 5px gutters. */
.faaz-cp-form .faaz-fm-submit {
  width: calc(33.333% - 10px);
  font-weight: 500;
}

/* The triggers (core blocks) become buttons. */
.faaz-cp-open {
  cursor: pointer;
}

/* The scroll lock while open is the shared body.faaz-modal-lock (faaz-blocks.css),
 * written by assets/js/faaz-modal.js. */

/* ---- Block: faaz-developer-detail ---- */
/* faaz/developer-detail — single developer page (live Elementor template
 * 8920). Measured on the live single-developer page (saved reference
 * ~/Downloads/single-developer.html) at 1440/1024/500.
 *
 * Structure: breadcrumb strip, white logo strip, hero row (title +
 * description 60% | info card 40%), project section (h3 "Proyek" + Swiper
 * of the shared faaz-pb project cards, 3/2/1 per view).
 */

/* --------------------------------------------------------------------------
   Breadcrumb strip: the shared `faaz-crumbs` skin (faaz-breadcrumbs.css,
   enqueued from render.php) inside the 15px band (1180px centred; 20px
   sides from tablet down).
   -------------------------------------------------------------------------- */
.faaz-dv-crumbs {
  padding: 15px 0;
}

.faaz-dv-crumbs-inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   White logo strip (live 50ef1f94): 30px padding, logo capped 150px
   (125px @≤1024), vertically + horizontally centred.
   -------------------------------------------------------------------------- */
.faaz-dv-logo {
  background: #fff;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faaz-dv-logo img {
  display: block;
  max-width: 150px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Hero row (live 3bb5dc4): pt 50 / pb 80, 60/40 split (20px gap via the
   right column's left padding).
   -------------------------------------------------------------------------- */
.faaz-dv-hero {
  padding: 50px 0 80px;
}

.faaz-dv-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px; /* live row gap: the 60/40 children shrink around it (696/464). */
}

.faaz-dv-hero-left {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faaz-dv-hero-right {
  width: 40%;
  padding-left: 20px;
  position: sticky;
  top: 90px; /* live sticky widget, offset 90 (desktop only). */
}

.faaz-dv-title {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  color: #1e2132;
}

.faaz-dv-desc {
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-dv-desc p {
  margin: 0 0 27px;
}

/* --------------------------------------------------------------------------
   Info card (live 7c085254): white, r8, shadow, 30px padding, 20px row gap.
   Label 15/500 (35%), value 14 (65%, -5px top, 27px line box); the name
   row's value is 1.4 line-height + 10px bottom margin.
   -------------------------------------------------------------------------- */
.faaz-dv-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faaz-dv-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.faaz-dv-label {
  width: 35%;
  margin: 0;
  font-size: 15px;
  line-height: 15px;
  font-weight: 500;
  color: #5a5a5a;
}

.faaz-dv-value {
  width: 65%;
  margin: 0;
  margin-top: -5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-dv-value--name {
  line-height: 1.4;
  margin-top: 0; /* the name row's value carries no -5px lift (live 3d171657). */
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Telepon / Whatsapp pill row (live 6ca3e976): 20px below the last row
   (on top of the card gap), 50/50 columns (10px side pad). The pills:
   white, #C7C7C7 border, r8, shadow, 15px primary.
   -------------------------------------------------------------------------- */
.faaz-dv-pills {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.faaz-dv-pill-col {
  width: 50%;
  padding: 0 10px;
  display: flex;
  justify-content: center;
}

.faaz-dv-pill {
  box-sizing: border-box;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
  padding: 8px 10px;
  font-size: 15px;
  line-height: 27px;
  color: #1e2132;
  text-decoration: none;
}

/* FA glyphs (vendored build codepoints — glyph name is the source of
   truth: phone = \f095 solid, whatsapp = \f232 brands). */
.faaz-dv .faaz-fa {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  line-height: 1;
}

.faaz-dv-pill .faaz-fa-phone::before {
  content: "\f095";
}

.faaz-dv-pill .faaz-fa-wa {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.faaz-dv-pill .faaz-fa-wa::before {
  content: "\f232";
}

/* --------------------------------------------------------------------------
   Project section (live 1a3c5dd6): pt 80 / pb 100, centred 1180. The DCE
   carousel: 3/2/1 per view, 20px gap, 300ms, 4s autoplay, dots 10px below
   the cards.
   -------------------------------------------------------------------------- */
.faaz-dv-proyek {
  padding: 80px 0 100px;
}

.faaz-dv-proyek-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.faaz-dv-proyek-title {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  color: #1e2132;
  text-align: center;
}

.faaz-dv-proyek-swiper {
  width: 100%;
}

/* Dots: 15px box in flow 15px below the cards, dynamic bullets — max 3 at
   a time (live carousel_dynamicBullets); active = accent red. */
.faaz-dv-proyek-pager {
  position: relative;
  height: 15px;
  margin-top: 15px;
  text-align: center;
}

.faaz-dv-proyek-pager .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  opacity: 1;
}

.faaz-dv-proyek-pager .swiper-pagination-bullet-active {
  background: #d31010;
  opacity: 1;
}

/* Dynamic-bullets window: hide every bullet outside main ± 1. */
.faaz-dv-proyek-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}

.faaz-dv-proyek-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-main,
.faaz-dv-proyek-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-prev,
.faaz-dv-proyek-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-next {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   Tablet (≤1024): stacked hero (title block, then 80%-wide card), 125px
   logo, 25px headings.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-dv-crumbs {
    padding: 15px 20px;
  }

  .faaz-dv-logo img {
    max-width: 125px;
  }

  .faaz-dv-hero {
    padding: 50px 20px 0;
  }

  .faaz-dv-hero-inner {
    flex-direction: column;
  }

  .faaz-dv-hero-left {
    width: 100%;
  }

  .faaz-dv-hero-right {
    width: 100%;
    padding: 80px 0 100px;
    display: flex;
    justify-content: center;
    position: static;
  }

  .faaz-dv-card {
    width: 80%;
  }

  .faaz-dv-title {
    font-size: 25px;
  }

  .faaz-dv-proyek-title {
    font-size: 25px;
  }
}

/* --------------------------------------------------------------------------
   Mobile (≤767): stacked rows (label over value, 10px gap), 22px
   headings, full-width card, sticky Telepon/Whatsapp row (the live
   Elementor sticky-bottom widget, offset 10).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .faaz-dv-title {
    font-size: 22px;
  }

  .faaz-dv-proyek {
    padding: 0 20px 100px;
  }

  .faaz-dv-proyek-title {
    font-size: 22px;
  }

  .faaz-dv-card {
    width: 100%;
    padding: 30px 20px;
  }

  .faaz-dv-row {
    flex-direction: column;
    gap: 10px;
  }

  .faaz-dv-label,
  .faaz-dv-value {
    width: 100%;
  }

  .faaz-dv-value {
    margin-top: 0;
  }

  .faaz-dv-pills {
    margin-top: 0;
    gap: 10px;
    justify-content: center;
    position: sticky;
    bottom: 10px;
  }

  .faaz-dv-pill-col {
    width: 45%;
    padding: 0;
  }

  .faaz-dv-pill {
    padding: 8px 20px;
    font-size: 12px;
  }

  .faaz-dv-pill .faaz-fa {
    font-size: 12px;
  }
}

/* ---- Block: faaz-developer-grid ---- */
/*
 * faaz/developer-grid — the /developer/ archive grid + cards.
 *
 * Grid: 2 columns, column gap 30, row gap 35 (1 column on mobile).
 *
 * Card (cleaned up — the live DCE card is fixed 272px with per-row
 * paddings that overflow on mobile; per user decision the card is
 * natural-height with 20px padding, so the rows carry no side/top
 * padding of their own):
 *   top     logo column 30% (image ≤60px, ≤100px from tablet down)
 *           + name 14/14 600 #1E2132 (13 from tablet down, centred on
 *           mobile), gap 10
 *   middle  divider (1px #cfcfcf, 2px block padding) + "N Proyek"
 *           15/27 500 #1E2132 + "Spesialisasi: …" 12/27 400 #5A5A5A
 *           + "Kisaran Harga: …" 12/27 500 #5A5A5A, 5px gaps (10 on
 *           mobile), 10px spacing to the top/bottom sections
 *   bottom  two pills 50/50, gap 20 (45/45 on mobile): white bg,
 *           1px #5A5A5A, radius 8, 5 10 pad, 12/27 400; pill text
 *           #385DFF → #D31010 (the 2026-10-25 blue→red recolor).
 *
 * Mobile: the card's align-items:center shrinks rows to fit-content,
 * so the rows pin width:100% back.
 */

.faaz-dvg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 35px;
}

.faaz-dvg-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #cfcfcf;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  background: #fff;
}

.faaz-dvg-top {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-left: -20px;
  margin-right: -20px;
}

.faaz-dvg-logo {
  flex: 0 0 30%;
  display: flex;
  justify-content: center;
}

.faaz-dvg-logo img {
  display: block;
  max-width: 60px;
  height: auto;
}

.faaz-dvg-title {
  flex: 1 1 0;
  min-width: 0;
}

.faaz-dvg-title h2 {
  margin: 0;
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
}

.faaz-dvg-title a {
  color: #1e2132;
  text-decoration: none;
}

.faaz-dvg-mid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 10px 0;
}

.faaz-dvg-div {
  border-top: 1px solid #cfcfcf;
  padding: 2px 0;
}

.faaz-dvg-projects {
  margin: 0;
  font-size: 15px;
  line-height: 27px;
  font-weight: 500;
  color: #1e2132;
}

.faaz-dvg-spec,
.faaz-dvg-price {
  margin: 0;
  font-size: 12px;
  line-height: 27px;
  font-weight: 400;
  color: #5a5a5a;
}

.faaz-dvg-price {
  font-weight: 500;
}

.faaz-dvg-btns {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 0 10px;
}

.faaz-dvg-pill {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #5a5a5a;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 27px;
  font-weight: 400;
  color: #d31010;
  text-decoration: none;
}

/* Tablet. */
@media (max-width: 1024px) {
  .faaz-dvg-logo img {
    max-width: 100px;
  }

  .faaz-dvg-title h2 {
    font-size: 13px;
  }
}

/* Mobile. */
@media (max-width: 767px) {
  .faaz-dvg-grid {
    grid-template-columns: 1fr;
  }

  .faaz-dvg-card {
    align-items: center;
  }

  .faaz-dvg-top {
    flex-wrap: wrap;
  }

  .faaz-dvg-logo,
  .faaz-dvg-title {
    flex: none;
    width: 100%;
  }

  .faaz-dvg-title {
    text-align: center;
  }

  .faaz-dvg-mid {
    gap: 10px;
  }

  .faaz-dvg-btns {
    justify-content: space-between;
  }

  .faaz-dvg-pill {
    flex: 0 0 45%;
  }
}

/* ---- Block: faaz-developer-search ---- */
/*
 * faaz/developer-search — the /developer/ archive search bar.
 *
 * Measured on the live page (1440px): bar 698x35 (the live ASP probox: 4px
 * inset in its 708px column, 1px #b4b4b4 border, radius 3, inset shadow
 * rgb(181,181,181) 1px 0 6px -3px); input 12px #000 transparent (15px
 * left); magnifier 35x35 — per the 2026-10-25 blue→red recolor the
 * live transparent button is a flat #D31010 square with a white 22px
 * icon.
 *
 * The bar fills its column (60% of the 1180 container @>=768, full width
 * @<=767 — the column width lives in faaz-blocks.css) with the live 4px
 * inset kept.
 */

.faaz-dvs {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: calc(100% - 8px);
  margin: 4px;
  height: 37px;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
  box-shadow: rgb(181, 181, 181) 1px 0px 6px -3px inset;
}

.faaz-dvs-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 2px 5px 0 15px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  color: #000;
}

.faaz-dvs-input:focus {
  outline: none;
}

.faaz-dvs-magnifier {
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  background: #d31010;
  cursor: pointer;
}

.faaz-dvs-magnifier svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

/* ---- Block: faaz-fa-icon ---- */
/* faaz/fa-icon — the span carries the standard FA classes (fas/far/fab +
   fa-<name>); the site-wide fontawesome.min.css provides the ::before glyph,
   solid/regular/brands.min.css the @font-face. This file only adds the
   block's layout hook + the unknown-icon fallback. */

.faaz-fa-icon {
  display: inline-block;
  line-height: 1;
}

/* Unknown icon name: show the class string so the gap is visible. */
.faaz-fa-icon--missing {
  display: inline-block;
  line-height: 1.4;
  font-family: monospace;
  font-size: 12px;
  color: #d31010;
}

/* Editor sidebar picker (icon glyph first, then the name). Loads in the
   editor document via faaz_editor_assets; harmless on the front end. */
.faaz-fa-picker {
  max-width: 320px;
}
.faaz-fa-picker-glyph {
  display: inline-block;
  width: 20px;
  text-align: center;
  font-size: 16px;
}
.faaz-fa-picker-panel {
  margin-top: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}
.faaz-fa-picker-search {
  margin: 8px;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
.faaz-fa-picker-list {
  overflow-y: auto;
  max-height: 264px;
}
.faaz-fa-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
}
.faaz-fa-picker-item:hover {
  background: #f0f0f0;
}

/* ---- Block: faaz-form ---- */
/**
 * faaz/form — the live Elementor form skin, measured 1:1 from the saved
 * reference (page 11355, widget 425d2fd):
 *
 *   labels          14px/500 #1E2132, required * red (content after, .2em gap)
 *   inputs          1px #D6D9DD border, radius 3px, #fff bg, #1f2124 text,
 *                   14px, line-height 1.4, min-height 40px, padding 5px 14px,
 *                   focus = inset shadow rgba(0,0,0,.1)
 *   field rhythm    20px between fields (the live field-group margin-bottom)
 *   radio/checkbox  inline options, 10px between options, 14px labels
 *   select caret    10x5 #191919 triangle, right 10px, vertically centred
 *   submit          #D31010 -> #A50D0D hover, radius 7px, white 15px/1,
 *                   padding 0 24px, min-height 40px, auto width, left-aligned
 */

.faaz-fm-section {
  font-size: 14px;
  color: #1e2132;
  margin-bottom: 20px;
}

.faaz-fm-field {
  margin-bottom: 20px;
}

/* Two-up field rows (the live Elementor col-50 pairs). The row keeps the
   field rhythm of the surrounding fields; inside the row the fields are
   equal flex items with a 10px gutter (the live 5px+5px padding). */
.faaz-fm-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.faaz-fm .faaz-fm-row > .faaz-fm-field {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .faaz-fm-row {
    display: block;
  }

  .faaz-fm .faaz-fm-row > .faaz-fm-field {
    margin-bottom: 10px;
  }

  .faaz-fm .faaz-fm-row > .faaz-fm-field:last-child {
    margin-bottom: 0;
  }
}

.faaz-fm-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1e2132;
  margin-bottom: 5px;
}

.faaz-fm-field--required > .faaz-fm-label:after {
  content: "*";
  color: red;
  padding-inline-start: 0.2em;
}

.faaz-fm-input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #d6d9dd;
  border-radius: 3px;
  background-color: #ffffff;
  color: #1f2124;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  min-height: 40px;
  padding: 5px 14px;
}

.faaz-fm-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.faaz-fm-textarea {
  resize: vertical;
}

/* The live file input is the native widget (Elementor adds no skin of its own). */
.faaz-fm-file {
  padding: 5px;
}

/* Radio + acceptance: the live .elementor-field-subgroup inline options. */
.faaz-fm-options {
  display: flex;
  flex-wrap: wrap;
}

.faaz-fm-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline-end: 10px;
  font-size: 14px;
  color: #1f2124;
}

.faaz-fm-option--acceptance {
  align-items: flex-start;
}

.faaz-fm-option--acceptance .faaz-fm-checkbox {
  margin-top: 3px;
}

/* Select: native <select> + a real caret element (Chrome drops ::after on select). */
.faaz-fm-select {
  position: relative;
}

/* Textarea wrapper: a block parent of a bare <textarea> auto-sizes to the
   textarea's rows×intrinsic-line-height (104px) instead of its border box
   (96px) — a Chromium layout quirk. A flex column sizes from the border box. */
.faaz-fm-control {
  display: flex;
  flex-direction: column;
}

.faaz-fm-select-input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}

.faaz-fm-caret {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #191919;
  pointer-events: none;
}

/* Submit row: the live .elementor-field-type-submit is align-items:flex-end. */
.faaz-fm-actions {
  display: flex;
  align-items: flex-end;
}

/* Submit + wizard nav buttons share one skin: the live .elementor-button
   (#D31010 -> #A50D0D hover, radius 7px, white 15px/1, padding 0 24px,
   min-height 40px). */
.faaz-fm-submit,
.faaz-fm-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background-color: #d31010;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0 24px;
  min-height: 40px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.faaz-fm-submit:hover,
.faaz-fm-submit:focus,
.faaz-fm-navbtn:hover,
.faaz-fm-navbtn:focus {
  background-color: #a50d0d;
  color: #ffffff;
}

/* ============================================================
   Multi-step wizard (a definition with `step` fields — the live
   Elementor multi-step form, page 11311): numbered 30px circle
   indicators (inactive #c2cbd2, active #39b54a ring, done #39b54a
   fill), 1px #babfc5 separators, and the nav buttons stacked in the
   30% column (the live .e-form__buttons col-30), 18px apart. The
   faaz/form view script drives the step changes.
   ============================================================ */
.faaz-fm-step[hidden] {
  display: none;
}

.faaz-fm-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 20px;
}

.faaz-fm-ind {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid #c2cbd2;
  border-radius: 50%;
  background-color: #ffffff;
  color: #c2cbd2;
  line-height: 1;
}

.faaz-fm-ind--active {
  border-color: #39b54a;
  color: #39b54a;
}

.faaz-fm-ind--done {
  border-color: #39b54a;
  background-color: #39b54a;
  color: #ffffff;
}

.faaz-fm-ind-sep {
  flex: 1 1 auto;
  height: 1px;
  margin: 0 10px;
  background-color: #babfc5;
}

.faaz-fm-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.faaz-fm-nav .faaz-fm-navbtn,
.faaz-fm-nav .faaz-fm-submit {
  /* The live .e-form__buttons__wrapper__button: one ~30%-wide button per
	   step (step 1 = Next; step 2 = Previous + Next; step 3 = Previous +
	   Submit), left-aligned as a row, 10px apart (the field-group gutters). */
  width: 30%;
}

/* Status panels (Elementor swaps the form for a plain success message). */
.faaz-fm--success {
  font-size: 15px;
  line-height: 1.5;
  color: #1f2124;
}

.faaz-fm-notice {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.faaz-fm-notice--error {
  color: #db222a;
}

/* Honeypot: off-screen, tab-trapped. */
.faaz-fm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   "Kontak" variant — the live /kontak/ form (widget eb83b74):
   transparent 5px-radius inputs, 17/600 labels, a 10px field rhythm,
   and the red 30px-pill submit at one third of the content width
   (the live col-33 group with its 5px gutters), 50% on mobile.
   ============================================================ */
.faaz-fm--kontak .faaz-fm-field {
  margin-bottom: 10px;
}

.faaz-fm--kontak .faaz-fm-row {
  margin-bottom: 10px;
}

.faaz-fm--kontak .faaz-fm-label {
  font-size: 17px;
  font-weight: 600;
  line-height: 27px;
  margin-bottom: 4px;
}

.faaz-fm--kontak .faaz-fm-input {
  background-color: transparent;
  border-radius: 5px;
  font-size: 15px;
  line-height: 21px;
  min-height: 41px; /* the live elementor-field box (40 + 1) */
}

/* The live form sits 32px above the box's bottom padding (its own
   margin-bottom, the Elementor form default). */
.faaz-fm--kontak .faaz-fm {
  margin-bottom: 32px;
}

.faaz-fm--kontak .faaz-fm-actions {
  margin: 0 -5px;
}

.faaz-fm--kontak .faaz-fm-submit {
  width: calc(33.333% - 10px);
  margin: 0 5px;
  border-radius: 30px;
  background-color: #d31010;
  font-weight: 500;
  padding: 0;
}

.faaz-fm--kontak .faaz-fm-submit:hover,
.faaz-fm--kontak .faaz-fm-submit:focus {
  background-color: #bb0909;
}

@media (max-width: 767px) {
  .faaz-fm--kontak .faaz-fm-submit {
    width: calc(50% - 10px);
  }
}

/* ============================================================
   "Agen Masukan" variant — the live /agen-properti/ feedback form
   (widget 1049095): 15/500 labels flush on the inputs (padding-bottom
   0), a 10px field rhythm, 15px inputs, and the blue submit at one
   third of the content width (the live col-33 group).
   ============================================================ */
.faaz-fm--agen .faaz-fm-field {
  margin-bottom: 10px;
}

.faaz-fm--agen .faaz-fm-label {
  font-size: 15px;
  font-weight: 500;
  /* Live: 27px line box + a 4px label-to-input gap, NO asterisk. */
  line-height: 27px;
  margin-bottom: 4px;
}

.faaz-fm--agen .faaz-fm-field--required > .faaz-fm-label:after {
  content: none;
}

.faaz-fm--agen .faaz-fm-input,
.faaz-fm--agen .faaz-fm-textarea {
  font-size: 15px;
}

.faaz-fm--agen .faaz-fm-input {
  min-height: 41px;
}

.faaz-fm--agen .faaz-fm-textarea {
  min-height: 96px;
}

.faaz-fm--agen .faaz-fm-submit {
  /* Live button = (528 - 2*10) / 3 = 169px (Elementor col-33 + gutter). */
  width: calc((100% - 20px) / 3);
}

/* ============================================================
   "Pra-Training Test" wizard (page 11311, live widget dcc8db8):
   18px field rhythm, 27px-line labels 4px above the inputs with NO
   required asterisk, stacked radio options (the live subgroup
   flex-basis:100%), and the 16px #5a5a5a step headings.
   ============================================================ */
.faaz-fm--pra-training .faaz-fm-field {
  margin-bottom: 18px;
}

.faaz-fm--pra-training .faaz-fm-row {
  margin-bottom: 18px;
}

.faaz-fm--pra-training .faaz-fm-label {
  line-height: 27px;
  margin-bottom: 4px;
}

.faaz-fm--pra-training .faaz-fm-input {
  /* The live elementor-field box (40 min-height + 1 border, measures 41px). */
  min-height: 41px;
}

.faaz-fm--pra-training .faaz-fm-field--required > .faaz-fm-label:after {
  content: none;
}

.faaz-fm--pra-training .faaz-fm-section {
  font-size: 16px;
  color: #5a5a5a;
  margin-bottom: 18px;
}

/* Radios: one option per line, 28px pitch (the live subgroup). */
.faaz-fm--pra-training .faaz-fm-options {
  display: block;
}

.faaz-fm--pra-training .faaz-fm-option {
  display: flex;
  flex-basis: 100%;
  line-height: 28px;
  padding-inline-end: 0;
}

/* Live .elementor-form carries a 32px bottom margin inside the box —
   carried as a stored inline margin on the faaz/form instance (the core
   constrained-group margin-zeroing beats a CSS rule here). */

/* ---- Block: faaz-hero-icons ---- */
/*
 * faaz/hero-icons — the hero service-icon row (2026-10-30: 4 image tiles, live
 * PNG icons from faazinc.com, measured on the rebuilt live home).
 *
 *   row    = grid, columns from the block attribute (4)
 *   tile   = flex column, centred; live tile = padding 10px, icon→label gap 13px
 *   image  = 45x45, radius 50px, shadow 0 0 10px 2px rgba(0,0,0,.2),
 *            transition-duration .3s (the user's 2026-10-30 spec)
 *   label  = 13px / 27, weight 600, primary (the live row: rgb(30,33,50))
 *
 * Spacing below the search bar is NOT in this file: it is the block's margin
 * attribute in the template, so the editor owns it.
 */
.faaz-hero-icons {
  display: grid;
}

.faaz-hi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  /* All four tiles are <button>s: reset the UA chrome so the tile inherits the
   * block's textColor and the label inherits from the tile. */
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}

.faaz-hi-img {
  width: 45px;
  height: 45px;
  border-radius: 50px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  transition-duration: 0.3s;
}

/* Label colour comes from the theme's primary token (the live row prints
 * rgb(30,33,50) = the kit primary), not from the block's textColor: the row sits
 * on a light band, so the white hero label is gone. */
.faaz-hi-label {
  font-size: 13px;
  line-height: 27px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

/* Spacing below the search bar. The hero group that holds both blocks carries
 * blockGap 20px, so these are the remainders of the live hero gap (32px
 * desktop, 48px mobile): 12 + 20 = 32, 28 + 20 = 48. They are the design
 * default; the block's margin attribute adds on top for one-off edits. */
.faaz-hero-icons {
  margin-top: 12px;
}

/* Mobile: labels shrink to 11px so all four stay single-line, and the live row
 * drops the tile padding + tightens the gap to 10px. */
@media (max-width: 767px) {
  .faaz-hero-icons {
    margin: 0;
  }

  .faaz-hi {
    gap: 10px;
    padding: 0;
  }

  .faaz-hi-label {
    font-size: 11px;
    line-height: 17px;
  }
}

/* ---- Block: faaz-hero-search ---- */
/* faaz/hero-search — hero search bar + filter modal.
 *
 * Two modes (the `width` attribute):
 *   panel — the front-page hero search (offer tabs + white bar + icons);
 *   full/capped — the landing strip bar [Filter button][keyword][magnifier],
 *       where the Filter button opens the consolidated filter modal (the
 *       scrim + centred dialog at the bottom of this file).
 *
 * Bar pixel values measured on the live site (AjaxSearchPro search box #1),
 * 1440px viewport: bar 35px, 1px #b4b4b4, radius 3, inset shadow, white;
 * funnel + magnifier buttons with blue gradients, 22px #363636 icons;
 * keyword 12px black, 10px left of the input.
 */

/* Bar width: the live container is 696px capped, 59% of the viewport
 * below that (59vw), full-width below 768 (the live mobile bar). The
 * `width: full` attribute (landing pages) spans the whole constrained
 * column instead of the 696px cap. */
.faaz-hero-search {
  width: min(696px, 59vw);
  max-width: 100%;
  /* margin-top 20px (user spec 2026-11-03); sides stay auto-centred. */
  margin: 20px auto 0;
}

.faaz-hero-search--full {
  width: 100%;
}

/* Landing-strip cap (restored 2026-11-03): the strip group is alignfull +
 * constrained, so the bar used to sit in the 1180 content column (measured
 * 1172 @1440 in the landing build). WP 7.1 prints the global-styles inline
 * CSS BEFORE faaz.css, so the base rule's max-width:100% (same specificity
 * (0,1,0) as core's .is-layout-constrained > :where(...)) wins the tie and
 * the bar spans the whole viewport. The pair selector restores the cap. */
.is-layout-constrained > .faaz-hero-search--full {
  max-width: 1180px;
}

/* Hero-panel context (front-page hero): the search spans the panel; the
 * dark box now wraps the FORM itself (see the panel-mode section below). */

/* ==========================================================================
   Panel mode (front page, 2026-10-21 — the cimahi-demo search area):
   "Saya ingin Beli / Saya ingin Sewa" tabs over a wide bar
   [Tipe Properti | keyword | red Cari button], four service icons below.
   Measured on cimahidemo.local @1440 / @500, then slimmed to normal form
   height (2026-10-21 — "normal like the other pages"):
     tabs: desktop as live: 14px/20px 600, py 8 px 16; MOBILE ONLY (user
           spec 2026-11-02): 12px, py 8 px 12 — all hero search text 12px +
           tighter padding on ≤767, desktop keeps the live values;
     bar:  no frame (padding/background/ring removed 2026-10-21), gap 8;
     box:  pl 16 / 24, white, r 4, desktop select 14px py 12 / keyword 15px
           py 12, divider 1x24; mobile: select+keyword 12px py 10;
     Cari: #D31010, white 600; desktop 14px py 10 pl 16/20 pr 12, mobile 12px
           py 8, r 4, hover #A50D0D, arrow circle 24px rgba(255,255,255,.15)
           12px svg;
     form: panel padding 50px desktop / 15px mobile.
     icons: 44px circles (10px pad + 24px glyph) bg #FDECEC ring , 16, 16,.2), glyph #A50D0D;
           label 14px/20 500 (no underline), space-between across the form
           width (2026-10-21), row gap 16 / 24, mt 32 / 48.
   The demo's ink/10 + ink/15 wrapper tone is invisible on our dark hero
   panel, so the row carries the same tone in white.
   ========================================================================== */

/* The dark box wraps the FORM only (user request 2026-10-25): it carries
 * the old faaz-hero-panel box values (90% / 100% + 10px sides mobile),
 * the h1 and the service icon row live outside this block (the icon row is
 * faaz/hero-icons since 2026-10-30). */
.faaz-hero-search--panel {
  width: 100%;
}

.faaz-hero-search--panel .faaz-hs-form {
  width: 100%;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 50px;
}

@media (max-width: 767px) {
  .faaz-hero-search--panel .faaz-hs-form {
    width: 100%;
    padding: 15px;
  }
}

.faaz-hero-search--panel .faaz-hs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Offer tabs: white by default, the chosen one brand-filled (the JS moves
 * data-faaz-active on click; the render sets it from the page's offer). */
.faaz-hero-search--panel .faaz-hs-offer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.faaz-hero-search--panel .faaz-hs-offer button {
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #1c1814;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 300ms cubic-bezier(0.32, 0.72, 0, 1),
    color 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.faaz-hero-search--panel .faaz-hs-offer button:hover {
  background: #fdecec;
  color: #a50d0d;
}

.faaz-hero-search--panel .faaz-hs-offer button[data-faaz-active] {
  background: #d31010;
  color: #fff;
}

.faaz-hero-search--panel .faaz-hs-offer button[data-faaz-active]:hover {
  background: #a50d0d;
  color: #fff;
}

/* Bar row: the white box + the blue Cari, no frame (padding/background/
 * ring removed 2026-10-21). Mobile: the box takes the full row and the
 * Cari wraps below at full width. */
.faaz-hero-search--panel .faaz-hs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.faaz-hero-search--panel .faaz-hs-box {
  display: flex;
  flex: 1 1 auto;
  flex-basis: 100%;
  align-items: center;
  padding-left: 16px;
  border-radius: 4px;
  background: #fff;
  min-width: 0;
}

.faaz-hero-search--panel .faaz-hs-tipe {
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: #1c1814;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  outline: none;
  margin-right: 8px;
}

/* Divider between the select and the keyword: 1px ink/10. */
.faaz-hero-search--panel .faaz-hs-sep {
  width: 1px;
  height: 24px;
  background: rgba(28, 24, 20, 0.1);
}

.faaz-hero-search--panel .faaz-hs-keyword {
  flex: 1 1 auto;
  min-width: 60px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: #1c1814;
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  outline: none;
}

.faaz-hero-search--panel .faaz-hs-keyword::placeholder {
  color: rgba(109, 101, 88, 0.7);
}

/* Cari: red, white, the arrow in a white/15 circle. */
.faaz-hero-search--panel .faaz-hs-cari {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-basis: 100%;
  padding: 10px 12px 10px 16px;
  border: 0;
  border-radius: 4px;
  background: #d31010;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 500ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
}

.faaz-hero-search--panel .faaz-hs-cari:hover {
  background: #a50d0d;
}

.faaz-hero-search--panel .faaz-hs-cari:active {
  transform: scale(0.98);
}

.faaz-hero-search--panel .faaz-hs-cari-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.faaz-hero-search--panel .faaz-hs-cari-arrow svg {
  width: 12px;
  height: 12px;
}

@media (min-width: 768px) {
  .faaz-hero-search--panel .faaz-hs-box {
    flex-basis: auto;
    padding-left: 24px;
  }

  .faaz-hero-search--panel .faaz-hs-sep {
    height: 24px;
  }

  .faaz-hero-search--panel .faaz-hs-cari {
    flex: 0 0 auto;
    padding: 10px 12px 10px 20px;
    line-height: 20px;
  }

  .faaz-hero-search--panel .faaz-hs-cari-arrow {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 767px) {
  /* Mobile-only hero search (user spec 2026-11-02): all text 12px, tighter
   * vertical padding; desktop keeps the live values above. */
  .faaz-hero-search--panel .faaz-hs-offer button {
    padding: 8px 12px;
    font-size: 12px;
  }

  .faaz-hero-search--panel .faaz-hs-tipe {
    padding: 10px 0;
    font-size: 12px;
  }

  .faaz-hero-search--panel .faaz-hs-keyword {
    padding: 10px;
    font-size: 12px;
  }

  .faaz-hero-search--panel .faaz-hs-cari {
    padding: 8px 12px 8px 16px;
    font-size: 12px;
  }
}

/* Landing context: the live /dijual/ .probox sits in the 75px pale strip
 * with 4px gaps all round (bar 37 = 35 content + 2 border). The hero bar
 * keeps its 4px 4px 0 inset. */
.faaz-hero-search--full .faaz-hs-bar {
  height: 42px;
  margin: 4px;
}

/* Desktop only (user spec 2026-11-05): the landing search bar is capped at 55%
 * of its container — the percentage resolves against the 1180 hero-search
 * column (55% = 649px), not the strip. The bar stays LEFT-aligned (side margin
 * 4px kept, no auto margins). Tablet + mobile keep the full-width bar. */
@media (min-width: 768px) {
  .faaz-hero-search--full .faaz-hs-bar {
    max-width: 55%;
  }
}

@media (max-width: 767px) {
  .faaz-hero-search {
    width: 100%;
  }
}

/* Row 1 — the search bar: [location pill][keyword][magnifier] (the live
 * .probox skin, 4px margin inside the container; the 2026-11-05 reference
 * design raised it to 42px + radius 8 to match the chips row). */
.faaz-hs-bar {
  display: flex;
  align-items: center;
  height: 42px;
  margin: 4px 4px 0;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 8px;
  box-shadow: 1px 0 6px -3px #b5b5b5 inset;
}

.faaz-hs-bar > button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* The magnifier is an icon, not a red button (2026-11-05, reference design):
 * no gradient, no inset shadow, black glyph. It is the only button left in
 * the bar, so the shared rule carries the black fill. */
.faaz-hs-bar > button svg {
  width: 18px;
  height: 18px;
  fill: #000;
}

/* The location pill (2026-11-05, user spec): static text only — the deepest
 * location in effect (filter geo pick > keyword > page path), no link, no
 * autocomplete, no removal. */
.faaz-hs-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 30px;
  margin-left: 6px;
  padding: 0 12px;
  border-radius: 6px;
  background: #e9e9e9;
  color: #000;
  font-size: 14px;
}

/* Keyword: live .proinput input (no chrome; the UA resets form-control fonts,
 * so inherit the page font explicitly). */
.faaz-hs-bar input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  margin: 0 0 0 10px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

/* Row 2 — the chips (2026-11-05, reference design): Filter (with its red
 * count badge), the Jual/Sewa pair, and Urutkan. Each chip is one bordered
 * container; the bookmark chip from the reference is deliberately absent. */
.faaz-hs-chips {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 4px 4px;
}

.faaz-hs-chips > * {
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid #b4b4b4;
  border-radius: 8px;
  background: #fff;
}

.faaz-hs-chips svg {
  fill: #000;
}

/* Filter chip: badge + funnel + label. It is the chip itself, so the skin
 * above applies with no reset. */
.faaz-hs-toggle {
  padding: 0 14px 0 7px;
  gap: 5px;
  cursor: pointer;
}

.faaz-hs-toggle svg {
  width: 16px;
  height: 16px;
}

.faaz-hs-toggle-label {
  font-size: 14px;
  line-height: 1;
  color: #000;
}

/* The count badge: non-default filters in use (the whole location chain = 1,
 * the page's own offer never counts). Hidden at 0. */
.faaz-hs-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: #d31010;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.faaz-hs-badge--hidden {
  display: none;
}

/* Jual / Sewa: a segmented pair, the page's offer is brand-filled. A chip
 * click navigates to the same location under the other offer. */
.faaz-hs-offer-pair {
  gap: 4px;
  padding: 4px;
}

.faaz-hs-offer-btn {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.faaz-hs-offer-btn[data-faaz-active] {
  background: #d31010;
  color: #fff;
}

/* Urutkan: its own chip (the select is inside the bar form, so a sort change
 * keeps the keyword + active filter vars). Native select skinned like the
 * modal's fields, caret drawn by the chip. */
.faaz-hs-sort {
  gap: 6px;
  padding: 0 12px;
}

.faaz-hs-sort-ic {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.faaz-hs-sort select {
  max-width: 130px;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: #1e2132;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Caret-down glyph (user spec 2026-11-05): fa-angle-down U+F107 — the "\" glyph
 * rotated down (a chevron), NOT the solid triangle fa-caret-down. Same FA 5
 * pattern as .faaz-menu-caret (font-family + content), no new dependency. */
.faaz-hs-sort-caret {
  flex: 0 0 auto;
  margin-left: auto; /* push the caret to the right edge of the Urutkan chip */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: #191919;
}

.faaz-hs-sort-caret::before {
  content: "\f107";
}

@media (max-width: 767px) {
  .faaz-hs-chips {
    gap: 10px;
    margin-top: 10px;
  }

  .faaz-hs-offer-btn {
    padding: 0 12px;
  }

  .faaz-hs-sort {
    flex: 1 1 auto;
  }

  .faaz-hs-sort select {
    width: 100%;
    max-width: none; /* full chip width on mobile — caret stays at the right edge */
  }

  /* Mobile: text in the chips is 12px and chip containers/buttons carry 7px padding.
   * Scoped to text-bearing elements only — never the icons (.faaz-hs-toggle svg / .faaz-hs-sort-ic). */
  .faaz-hs-toggle-label,
  .faaz-hs-badge,
  .faaz-hs-offer-btn,
  .faaz-hs-bar input[type="search"],
  .faaz-hs-sort select {
    font-size: 12px;
  }

  .faaz-hs-toggle,
  .faaz-hs-offer-pair,
  .faaz-hs-offer-btn,
  .faaz-hs-sort {
    padding: 7px !important;
    gap: 3px;
  }
}

/* Magnifier submit: plain icon on the strip's white (the reference design has
 * no button chrome — the old red gradient + inset shadow is gone). */
.faaz-hs-bar > button.faaz-hs-submit {
  flex: 0 0 auto;
  width: auto;
  padding: 0 12px 0 6px;
}

/* ==========================================================================
   Filter modal (2026-10-22 — replaces the old nine-fieldset inline panel
   AND the landing filter row: one place for every facet, opened by the bar's
   Filter button). Scrim + centred dialog; the dialog is its own native GET
   form (posts to the current page). Values follow the site's modal skin
   (faaz-cari-propeti / faaz-pasang-iklan) + the old select skin.
   ========================================================================== */

.faaz-hs-modal[hidden] {
  display: none;
}

/* Body scroll lock while the modal is open (view script). */
body.faaz-hs-lock {
  overflow: hidden;
}

.faaz-hs-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100001;
}

.faaz-hs-modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 40px));
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
  z-index: 100002;
}

/* Sticky head: stays put while the 14 facets scroll inside the dialog. */
.faaz-hs-modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
  z-index: 1;
}

.faaz-hs-modal-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #1e2132;
}

.faaz-hs-modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: #1e2132;
  cursor: pointer;
}

.faaz-hs-modal-form {
  padding: 12px 20px 0;
}

/* Facet grid: 2 columns on the wide dialog, 1 on mobile. */
.faaz-hs-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 16px;
}

.faaz-hs-mfield {
  min-width: 0;
}

.faaz-hs-mfield label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #1e2132;
}

/* Field wrapper: positions the caret over the native select (a ::after
 * cannot render on a <select> in Chrome). */
.faaz-hs-mwrap {
  position: relative;
  display: block;
}

.faaz-hs-mwrap select {
  width: 100%;
  height: 41px;
  margin: 0;
  padding: 0 34px 0 12px;
  border: 1px solid #d6d9dd;
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #1e2132;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Geo drill-down: a level whose parent has no pick is disabled (only
 * "Semua" is possible) — the JS re-enables it once the parent is chosen. */
.faaz-hs-mwrap select:disabled {
  background: #f1f1f1;
  color: #9b9b9b;
  cursor: not-allowed;
}

.faaz-hs-mwrap select:disabled + .faaz-hs-mcaret {
  border-top-color: #c7c7c7;
}

.faaz-hs-mcaret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #191919;
  pointer-events: none;
}

/* Range (min–max) fields: Kisaran Harga (Rp prefix) + Luas Tanah /
 * Luas Bangunan (m² suffix) — number inputs in the select's skin. */
.faaz-hs-mrange {
  display: flex;
  align-items: center;
  gap: 6px;
}

.faaz-hs-mrange input[type="number"] {
  flex: 1;
  min-width: 0;
  height: 41px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #d6d9dd;
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #1e2132;
}

.faaz-hs-mrange input[type="number"]:focus {
  outline: 2px solid #d31010;
  outline-offset: -1px;
}

.faaz-hs-munit {
  font-size: 13px;
  color: #5a5a5a;
  white-space: nowrap;
}

.faaz-hs-mdash {
  color: #b4b4b4;
}

/* Foot: Bersih reset + the blue apply (the site's standard blue button).
   Sticky bottom — the dialog is the scroll container, so the action row
   stays visible while the facet grid scrolls (mobile especially). */
.faaz-hs-modal-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 8px 8px;
  z-index: 1;
}

.faaz-hs-modal-reset {
  padding: 12px 24px;
  border: 1px solid #d6d9dd;
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #5a5a5a;
  cursor: pointer;
}

.faaz-hs-modal-reset:hover {
  border-color: #5a5a5a;
  color: #1e2132;
}

.faaz-hs-modal-apply {
  padding: 12px 24px;
  border: 0;
  border-radius: 7px;
  background: #d31010;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.faaz-hs-modal-apply:hover {
  background: #a50d0d;
}

@media (max-width: 767px) {
  .faaz-hs-modal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faaz-hs-modal-foot {
    flex-direction: column;
  }

  .faaz-hs-modal-reset,
  .faaz-hs-modal-apply {
    width: 100%;
  }
}

/* ---- Block: faaz-jasa-properti ---- */
/*
 * faaz/jasa-properti — the three service rows inside the shared .faaz-modal
 * panel (2026-10-30, guided by the live popup 14467 screenshot).
 *
 *   row   = card: white, radius 12, shadow 0 0 10px 2px rgba(0,0,0,.2), grid
 *           100px + text, gap 24, padding 24, rows 24px apart
 *   icon  = 45px, radius 50px + the same shadow (the user's 2026-10-30 spec),
 *           label under it (13px / 600 primary)
 *   text  = 14px / 22, secondary
 *
 * The shell (scrim, panel, close X, animation, scroll lock) lives in
 * faaz-blocks.css — this file adds only the row layout.
 */
/* The card the user set on 2026-10-30: 622px wide (the shared shell's dialog is
 * min(1000px,100vw), so the panel caps the card and the viewport width wins
 * below 622px) and
 * padded 30 / 50 / 50 — the shell's 28/28/32 is replaced here, because the Jasa
 * Properti card needs the wider side gutters. */
.faaz-jp-panel {
  max-width: 622px;
  padding: 30px 50px 50px;
}

.faaz-jp-title {
  text-align: center;
}

.faaz-jp-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Two cells, pushed to the ends of the card (the user's spec 2026-10-30): the
 * icon+label cell on the left, the text cell on the right. The text is capped at
 * 341px, so the free space lands in the middle. */
.faaz-jp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition-duration: 0.3s;
}

.faaz-jp-ico {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.faaz-jp-ico img {
  width: 45px;
  height: 45px;
  border-radius: 50px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  transition-duration: 0.3s;
}

.faaz-jp-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.faaz-jp-text {
  font-size: 14px;
  line-height: 22px;
  color: var(--wp--preset--color--secondary);
  max-width: 341px;
}

@media (max-width: 767px) {
  /* The user's 50px gutters are the desktop spec; on a 100vw card they leave too
   * little room for the row, so the mobile gutters follow the shell's ratio. */
  .faaz-jp-panel {
    padding: 20px 20px 30px;
  }

  .faaz-jp-row {
    gap: 16px;
    padding: 20px;
  }
}

/* ---- Block: faaz-landing-title ---- */
/* faaz/landing-title — the landing-page H1.
 *
 * Measured on the saved live /dijual/ page: 22px/700 #353535 (line-height
 * 22) at desktop, 20px/26 at tablet + mobile. The block carries its own h1,
 * so no core heading margin applies — margin 0 (the row's flex gap does the
 * spacing).
 */

.faaz-lt-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 22px;
  color: #353535;
}

@media (max-width: 1024px) {
  .faaz-lt-title {
    font-size: 20px;
    line-height: 26px;
  }
}

/* ---- Block: faaz-menu ---- */
/**
 * faaz/menu — front-end CSS (nav + mobile menu modal shell).
 *
 * Nav numbers are the live Elementor header's (agents.old.md). Font size and
 * text colour come from the block's own attributes (core serializes them);
 * padding and spacing travel as CSS variables set by the render.
 *
 * Modal numbers are the live Elementor popup 11271's (post-11271.css + dialog
 * css): scrim rgba(0,0,0,.8), panel shadow 2px 8px 23px 3px rgba(0,0,0,.2),
 * animation 1s fadeInRight (mobile) / fadeInLeft (desktop), dialog-message
 * 100vw x 100vh (mobile), close button top 15px / 20px / primary.
 *
 * The modal content (cards, tiles, headings) is the mobile-menu template
 * part's own core blocks — styled by their own attributes. This stylesheet
 * covers the gaps core has no attribute for: the fixed full-screen scrim +
 * panel (no position:fixed support), the slide-in animation, the close
 * button, the grip toggle glyph, :hover states, the circular-thumbnail
 * shadow, and body scroll lock.
 *
 * Plain PHP (classic-theme pivot): the header markup is faaz-* classes only —
 * no wp-block wrapper, no editor canvas, no core CSS dependency.
 */

.faaz-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.faaz-menu-inner {
  display: flex;
}

.faaz-menu-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.faaz-menu-item {
  position: relative;
  margin: 0;
}

.faaz-menu-list > .faaz-menu-item + .faaz-menu-item {
  margin-left: var(--faaz-menu-item-spacing, 15px);
}

/* Main-bar nav (primary, has-13-font-size): items sit flush — no inter-item margin. */
.faaz-menu.has-13-font-size .faaz-menu-item {
  margin-left: 0 !important;
}

.faaz-menu-link {
  display: block;
  padding: var(--faaz-menu-item-padding, 13px 15px);
  /* Typography comes from the block's own attributes, so inherit it. */
  line-height: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
}

.faaz-menu-link:hover,
.faaz-menu-link:focus {
  color: #d31010;
}

/* Current page: the active item (or the parent of an active child) stays red. */
.faaz-menu-item.is-current > .faaz-menu-link {
  color: #d31010;
}

/* The live caret sits inside the anchor's right padding. */
.faaz-menu-item.has-child > .faaz-menu-link {
  padding-right: 30px;
}

.faaz-menu-caret {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 13px;
  line-height: 13px;
  color: #1e2132;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
}

.faaz-menu-caret::before {
  content: "\f0d7";
}

/* Submenu panel: white, no border, padding 0, min-width 10rem, max-width 1000px, z-5. */
.faaz-menu-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 10rem;
  max-width: 1000px;
  z-index: 5;
  list-style: none;
  flex-direction: column;
  gap: 0;
}

.faaz-menu-item.has-child:hover > .faaz-menu-submenu,
.faaz-menu-item.has-child:focus-within > .faaz-menu-submenu,
.faaz-menu-item.has-child.is-open > .faaz-menu-submenu {
  display: flex;
}

.faaz-menu-submenu .faaz-menu-link {
  font-weight: 400;
  padding: 13px 20px;
}

/* Mobile: when the mobile modal carries the menu, the list is hidden below
   768px (the live header hides the menu widget on mobile). */
@media (max-width: 767px) {
  .faaz-menu-inner.is-responsive {
    display: none;
  }
}

/*
 * Vertical variant (the mobile menu dialog's "Lainnya" list): stacked
 * block-level anchors. Live numbers: item padding 10px 0, line-height 20px
 * (travelled as the block's itemPadding / lineHeight attributes).
 */
.faaz-menu.is-vertical .faaz-menu-inner {
  display: block;
}

.faaz-menu.is-vertical .faaz-menu-list {
  flex-direction: column;
  /* The base list centers its items (horizontal row); the stacked variant
	   left-aligns them like the live "Lainnya" list. */
  align-items: flex-start;
}

.faaz-menu.is-vertical .faaz-menu-item {
  display: block;
}

/* --------------------------------------------------------------------------
 * Mobile menu modal shell
 * ------------------------------------------------------------------------ */

.faaz-mm {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
}

.faaz-mm.is-open {
  display: flex;
}

.faaz-mm-panel {
  max-width: 100%;
  max-height: 100%;
  background-color: transparent;
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
}

.faaz-mm.is-open .faaz-mm-panel {
  animation: faaz-mm-fade-in-right 1s;
}

@keyframes faaz-mm-fade-in-right {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Close: mirror of the entrance — the panel slides back out where it came
   from and the scrim fades. The view script keeps .is-open on during the
   animation and commits the closed state on animationend. */
.faaz-mm.is-closing {
  transition: background-color 1s;
  background-color: transparent;
}

.faaz-mm.is-closing .faaz-mm-panel {
  animation: faaz-mm-fade-out-right 1s forwards;
}

@keyframes faaz-mm-fade-out-right {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

@media (min-width: 768px) {
  .faaz-mm.is-open .faaz-mm-panel {
    animation: faaz-mm-fade-in-left 1s;
  }

  .faaz-mm.is-closing .faaz-mm-panel {
    animation: faaz-mm-fade-out-left 1s forwards;
  }

  .faaz-mm-body {
    width: 90vw;
  }
}

@keyframes faaz-mm-fade-in-left {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes faaz-mm-fade-out-left {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.faaz-mm-body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
}

/* core/template-part wraps the part's blocks in an auto-width div — make it
   fill the modal body so the part's width:100% outer group reaches the edges
   and its min-height:100% resolves. */
.faaz-mm-body > .faaz-mm-outer {
  width: 100%;
  height: 100%;
}

/* Plain-PHP mobile menu (2026-11-05): the block visuals (radius / padding /
 * background / flex-basis) are inline styles in faaz_mobile_menu_markup(); the
 * flex DISPLAY the core group layout used to supply is written out here. */
.faaz-mm-section-gap > * + * {
  margin-top: var(--wp--preset--spacing--30);
}

.faaz-mm-tiles {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}
.faaz-mm-tiles-center {
  justify-content: center;
}
.faaz-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.faaz-tile-jasa {
  gap: 0;
}
.faaz-tile-ico {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  flex: 0 0 50px;
}
.faaz-tile-jasa .faaz-tile-ico {
  flex: 0 0 50%;
}
.faaz-tile-ico a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.faaz-mm .faaz-tile a,
.faaz-mm .faaz-link a,
.faaz-tile-label a {
  color: inherit;
  text-decoration: none;
}
.faaz-link {
  font-weight: 500;
}

/* Close X sits where the bar's toggle icon sits (user spec 2026-11-03): the
 * toggle icon box measures top 20 / right offset 39 at 400, 500, 600, 767, so
 * the button box (glyph only, padding 0) is placed at the same top and right
 * offset; its right edge lines up with the toggle icon's right edge. */
.faaz-mm-close {
  position: absolute;
  top: 20px;
  right: 25px;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #1e2132;
  font-size: 20px;
  line-height: 1;
  z-index: 1;
}

.faaz-mm-close-icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d"; /* fa-times — the eicon-close equivalent */
}

/* Scroll lock while the dialog is open (Elementor does the same). */
body.faaz-mm-lock {
  overflow: hidden;
}

/*
 * The mobile trigger: the live header's grip icon (fas fa-grip-horizontal,
 * 22px, primary #1E2132, hover accent), shown below the 768px Elementor
 * breakpoint, right of the CTA.
 */
.faaz-mm-toggle {
  display: none;
}

@media (max-width: 767px) {
  .faaz-mm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: #1e2132;
  }

  .faaz-mm-toggle-icon {
    width: 22px;
    height: 22px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 22px;
    line-height: 22px;
  }

  .faaz-mm-toggle-icon::before {
    /* NOTE: the vendored FA build maps grip-horizontal to U+F58D (its
		   cmap is offset from the standard FA5 \f585, which is a grin here). */
    content: "\f58d"; /* grip-horizontal */
  }

  .faaz-mm-toggle:hover {
    color: #d31010;
  }
}

/* Modal content states (gaps: core has no :hover attribute, and the
   thumbnail shadow is not serializable on core/image). The shadow sits on
   the img (not the figure) so it follows the circle-mask border-radius. */
.faaz-mm .faaz-tile img {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

/* Top "Carikan Properti" tile: the 150px circle thumbnail renders at 57px
   (user request 2026-10-25). The PNG is a pre-cropped circle, so no radius. */
.faaz-mm .faaz-tile .wp-image-10995 {
  width: 57px;
  height: 57px;
}

/* Same for the "Pasang Iklan" tile (attachment 11349). */
.faaz-mm .faaz-tile .wp-image-11349 {
  width: 57px;
  height: 57px;
}

/* The three jasa tiles (Arsitektur / Interior / Konstruksi): 41.5px on
   mobile (user request 2026-10-25). Same pre-cropped circles. */
.faaz-mm .faaz-tile .wp-image-11000,
.faaz-mm .faaz-tile .wp-image-11003,
.faaz-mm .faaz-tile .wp-image-11005 {
  width: 41.5px;
  height: 41.5px;
}

.faaz-mm .faaz-tile:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.faaz-mm .faaz-link a:hover,
.faaz-mm .faaz-link a:focus {
  color: #d31010;
}

/* ---- Block: faaz-pasang-iklan ---- */
/*
 * faaz/pasang-iklan — the live Elementor popup 9201 ("Popup Iklan") as native
 * CSS.
 *
 * Sources: post-9201.css (scrim rgba(0,0,0,.8), dialog-message 90vw / 99vw
 * @767, widget-content shadow 2px 8px 23px 3px rgba(0,0,0,.2), container
 * flex column min-height 550px / 100vh @1024 / auto @767, image 95% / 100%
 * @1024, button margin-top -50px / -40px @767, font 13px / 12px @767, button
 * shadow 0 0 10px rgba(0,0,0,.2)) + a live 1440 measurement of the open
 * popup (button 155x37: padding 12px 24px, radius 7px, #D31010 bg, white
 * 13px/400 text). The site's primary hover blue is #A50D0D.
 *
 * The triggers are core blocks (header CTA, mobile menu tile) carrying the
 * faaz-pi-open class; the view script opens this modal from any of them.
 */

/* The overlay (live #elementor-popup-modal-9201). Above the mobile menu
 * modal (z 99999), which is one of the triggers. */
.faaz-pi-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100000;
}
.faaz-pi-modal[hidden] {
  display: none;
}

/* The live .dialog-message: 90vw wide, height auto, centred. The live
 * .dialog-widget-content shadow is REMOVED (user request 2026-10-30). */
.faaz-pi-dialog {
  width: 90vw;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The live container dae5714: flex column, centred, min-height 550px.
 * position:relative + sized by the image = the close button anchors to the
 * image's top-right corner. */
.faaz-pi-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: 550px;
}

/* The promo image wrapper: position:relative + exactly the image's box, so the
 * close button anchors to the image's top-right corner. Desktop 90% (user spec
 * 2026-11-04); the ≤1024 rule below keeps width:100% for tablet/mobile.
 * flex-shrink:0 is required: the dialog is display:flex, so a flex item with
 * width:90% collapses to its min-content (flex-shrink:1 default). */
.faaz-pi-media {
  position: relative;
  width: 90%;
  flex-shrink: 0;
}
.faaz-pi-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* The live "Buat Iklan Properti" button, overlapping the image bottom. Desktop -57
 * (user spec 2026-11-04, from -60); the ≤767 rule keeps -56. Shadow removed (user spec).
 */
.faaz-pi-cta {
  margin-top: -57px;
  position: relative; /* 2026-11-04 (user spec): z-index needs a positioned element */
  z-index: 99;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 7px;
  background-color: #ffffff;
  color: #d31010;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: all 0.3s;
}
/* No hover/focus styling (user spec 2026-11-05) — the white/red CTA stays as-is. */

/* Open = slide up into place, close = slide down out. The keyframes live in
 * faaz-blocks.css (shared with the Cari Properti modal). display:none cannot
 * animate, so the open animation runs the moment the modal becomes visible and
 * the close animation runs BEFORE the JS hides it (the JS adds the closing class
 * and hides on animationend + a fallback timer). */
.faaz-pi-dialog {
  animation: faaz-modal-in 800ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.faaz-pi-modal.faaz-modal-closing .faaz-pi-dialog {
  animation: faaz-modal-out 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .faaz-pi-dialog,
  .faaz-pi-modal.faaz-modal-closing .faaz-pi-dialog {
    animation: none;
  }
}

/* Close button: 20px white FA times, inside the promo image's top-right corner
 * (the live popup put it at the viewport corner; the user asked for it inside
 * the image, 20px from the image's top and right edges — anchored on
 * .faaz-pi-media, which is exactly the image's box). */
.faaz-pi-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  z-index: 1;
}
.faaz-pi-close-icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d"; /* fa-times */
}

/* The triggers (core blocks) become buttons. */
.faaz-pi-open {
  cursor: pointer;
}

/* The scroll lock while open is the shared body.faaz-modal-lock (faaz-blocks.css),
 * written by assets/js/faaz-modal.js. */

@media (max-width: 1024px) {
  .faaz-pi-box {
    min-height: 100vh;
  }
  .faaz-pi-media {
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* The live popup sets no mobile min-height (auto). */
  .faaz-pi-box {
    min-height: 0;
  }
  .faaz-pi-dialog {
    width: 99vw;
  }
  .faaz-pi-cta {
    margin-top: -56px;
    font-size: 12px;
  }
}

/* ---- Block: faaz-perumahan-detail ---- */
/* faaz/perumahan-detail — single perumahan page (live Elementor template
 * 8874). Measured on tools/single-properti-baru.html at 1440/1024/500.
 *
 * Structure: full-width hero over the featured photo (50% black veil), white
 * logo strip, two-column main (content 65% | developer 35%), fixed share
 * column, fixed Telepon button.
 */

/*
 * Note: no overflow rule on the .faaz-pr wrapper — the developer card is
 * position:sticky and a hidden-overflow ancestor would trap it.
 */

/* --------------------------------------------------------------------------
   Hero.
   -------------------------------------------------------------------------- */
.faaz-pr-hero {
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 20px 0 100px;
}

.faaz-pr-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.faaz-pr-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* The live hero title keeps its 80px top margin ON TOP of the 20px gap. */
.faaz-pr-title {
  margin: 80px 0 0;
  font-size: 35px;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
}

/* Live 3dfa6bec — the yellow location button (#D9A31B, restored from the
 * 2026-10-25 red recolor per user 2026-11-02). */
.faaz-pr-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid #d9a31b;
  border-radius: 4px;
  background: transparent;
  color: #d9a31b;
  font-size: 14px;
  border-radius: 15px 15px 15px 15px;
  line-height: 1;
  background-color: rgba(255, 255, 255, 0.12);
}

.faaz-pr-loc .faaz-fa {
  font-size: 14px;
}

.faaz-pr-harga-label {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

.faaz-pr-price {
  display: flex;
  gap: 5px;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

.faaz-pr-avail {
  margin: 0;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

.faaz-pr-cicilan {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}

.faaz-pr-cicilan .faaz-fa {
  font-size: 15px;
  margin-right: 5px;
}

/* Live hero breadcrumb hover is the yellow, not the archive gold. The trail
 * spans the full inner column (the live widget does) so it never wraps. */
.faaz-pr-hero .faaz-crumbs--dark a:hover,
.faaz-pr-hero .faaz-crumbs--dark a:focus {
  color: #d31010;
}

.faaz-pr-crumbs {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Developer logo strip.
   -------------------------------------------------------------------------- */
.faaz-pr-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  background: #fff;
}

.faaz-pr-logo img {
  height: auto;
}

/* --------------------------------------------------------------------------
   Main: two columns (stacked <=1024). The live section wraps its children in
   a centred 1180 box; the columns are 65% / 35% of it with a 20px gap.
   -------------------------------------------------------------------------- */
.faaz-pr-main {
  display: flex;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 0 100px;
}

.faaz-pr-content {
  flex: 0 1 65%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --------------------------------------------------------------------------
   Gallery (live image carousel: fixed 364x212 slides, 25px gap, arrows).
   -------------------------------------------------------------------------- */
.faaz-pr-gal {
  position: relative;
}

.faaz-pr-gal-swiper {
  overflow: hidden;
}

/* Extra specificity beats the Swiper bundle's .swiper-slide { width:100% }. */
.faaz-pr .faaz-pr-gal-swiper .swiper-slide {
  width: 364px;
  height: 212px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.faaz-pr .faaz-pr-gal-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live arrows: bare 25px white chevrons, inside the slide edges. */
.faaz-pr-gal-prev,
.faaz-pr-gal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.faaz-pr-gal-prev {
  left: 10px;
}

.faaz-pr-gal-next {
  right: 10px;
}

.faaz-pr-gal-prev svg,
.faaz-pr-gal-next svg {
  width: 25px;
  height: 25px;
}

/* --------------------------------------------------------------------------
   Info boxes (live icon boxes 4619a78a & co).
   -------------------------------------------------------------------------- */
.faaz-pr-boxes {
  display: flex;
  gap: 10px;
  margin-top: 20px; /* the live row keeps a 20px margin on top of the gap */
}

.faaz-pr-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 150px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.faaz-pr-box .faaz-fa {
  font-size: 45px;
  color: #9b9ca0;
}

.faaz-pr-box h3 {
  margin: 0;
  font-size: 15px;
  line-height: 28px;
  font-weight: 600;
  color: #1e2132;
}

.faaz-pr-box p {
  margin: 0;
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}

/* --------------------------------------------------------------------------
   Sections: dividers, titles, description, tipe-unit image, facilities, map.
   -------------------------------------------------------------------------- */
.faaz-pr-div {
  height: 31px;
  padding: 15px 0;
  border-bottom: 1px solid #c7c7c7;
}

.faaz-pr-sec-title {
  margin: 0;
  font-size: 25px;
  line-height: 1.4;
  font-weight: 600;
  color: #1e2132;
}

.faaz-pr-desc p {
  margin: 0 0 27px;
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-pr-tipe-img {
  display: block;
}

.faaz-pr-tipe-img img {
  max-width: 100%;
  height: auto;
}

/* -- Tipe unit carousel (live heading 2e3a69dc + loop 515a976). --------- */
.faaz-pr-tu {
  position: relative;
}

/* Cards: the bordered box is the card; slide height follows the tallest. */
.faaz-pr-tu-card {
  display: flex;
  flex-direction: column;
}

.faaz-pr-tu-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding-bottom: 20px;
  background: #fff;
}

.faaz-pr-tu-cta {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  min-height: 180px;
  text-decoration: none;
}

.faaz-pr-tu-cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faaz-pr-tu-cta-ov {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.533); /* live overlay #00000088 */
  transition: background-color 0.5s;
}

.faaz-pr-tu-cta:hover .faaz-pr-tu-cta-ov {
  background: rgba(0, 0, 0, 0.333); /* live hover #00000055 */
}

/* CTA text sits at the bottom of the image (live padding 5/20/10). */
.faaz-pr-tu-cta-body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  text-align: left;
}

.faaz-pr-tu-cta-title {
  display: block;
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
  color: #fff;
}

.faaz-pr-tu-cta-desc {
  display: block;
  font-size: 13px;
  line-height: 27px;
  font-weight: 700;
  color: #d31010;
}

.faaz-pr-tu-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 20px;
}

.faaz-pr-tu-price {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
  color: #1e2132;
}

.faaz-pr-tu-cicilan {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-pr-tu-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-pr-tu-spec-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.faaz-pr-tu .faaz-fa {
  font-size: 12px;
}

.faaz-pr-tu-proj {
  margin: 0;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
  color: #1e2132;
}

.faaz-pr-tu-proj a {
  color: inherit;
  text-decoration: none;
}

/* In-card divider: 1px #797979 line + 2px block padding. */
.faaz-pr-tu-div {
  margin: 0 20px;
  padding: 2px 0;
  border-bottom: 1px solid #797979;
}

.faaz-pr-tu-pills {
  display: flex;
  gap: 20px;
  padding: 5px 20px;
}

.faaz-pr-tu-pill-col {
  flex: 1;
  padding: 0 10px;
}

.faaz-pr-tu-pill {
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  border: 1px solid #5a5a5a;
  border-radius: 8px;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 27px;
  font-weight: 400;
  color: #1e2132;
  text-decoration: none;
  box-sizing: border-box;
}

/* Pagination: dynamic bullets — max 3 at a time (main + its neighbours). */
.faaz-pr-tu-pager {
  position: relative;
  text-align: center;
  margin-top: 15px;
  height: 15px;
}

.faaz-pr-tu-pager .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(90, 90, 90, 0.489);
  opacity: 1;
  transform: scale(0.67);
  transition:
    transform 0.2s,
    background-color 0.2s,
    opacity 0.2s;
}

.faaz-pr-tu-pager .swiper-pagination-bullet-active {
  background: #d31010;
  transform: scale(1);
}

/* Dynamic-bullets window: hide every bullet outside main ± 1. */
.faaz-pr-tu-pager.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}

.faaz-pr-tu-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-main,
.faaz-pr-tu-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-prev,
.faaz-pr-tu-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-next {
  opacity: 1;
  pointer-events: auto;
  transform: scale(0.66);
}

.faaz-pr-tu-pager.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

/* Live fasilitas icon list: check-circle + text, 28px row pitch. */
.faaz-pr-fac {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faaz-pr-fac li {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 16px;
  line-height: 28px;
  font-size: 15px;
  color: #5a5a5a;
}

.faaz-pr-fac .faaz-fa {
  font-size: 15px;
}

.faaz-pr-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

/* --------------------------------------------------------------------------
   Developer column + sticky card (live sticky widget: desktop, top 90).
   -------------------------------------------------------------------------- */
.faaz-pr-dev {
  flex: 0 1 35%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 50px;
}

.faaz-pr-dev-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 90px;
}

.faaz-pr-dev-title {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: #1e2132;
  text-align: center;
}

.faaz-pr-dce {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 10px 10px;
}

.faaz-pr-dce-img {
  display: block;
  width: 100px;
  height: auto;
  margin: 0 0 20px;
}

.faaz-pr-dce-title {
  margin: 0;
  font-size: 15px;
  line-height: 28px;
  font-weight: 700;
  color: #1e2132;
  text-align: center;
}

.faaz-pr-dce-title a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Fixed right-edge share column (live share widget 136b1ed3).
   -------------------------------------------------------------------------- */
.faaz-pr-share {
  position: fixed;
  top: 35%;
  right: 0;
  z-index: 15;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Same behaviour as the single-listing share column: the white icons
     invert against whatever scrolls behind them (dark on light, light on
     dark). */
  mix-blend-mode: difference;
}

.faaz-pr-share-btn {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  color: #fff;
  text-decoration: none;
}

.faaz-pr-share .faaz-fa {
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   Fixed Telepon button (live floating call button 4cf71d2).
   -------------------------------------------------------------------------- */
.faaz-pr-tel {
  position: fixed;
  right: 69px;
  bottom: 15px;
  z-index: 5;
  display: inline-block;
  padding: 12px 24px;
  background: #d31010;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  border: 1px solid #fff;
  border-radius: 8px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Font Awesome — the glyph codepoints of THIS vendored build (the glyph name
   is the source of truth).
   -------------------------------------------------------------------------- */
.faaz-pr .faaz-fa {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

/* Brand glyphs need the Brands family, never just a weight switch. */
.faaz-pr .faaz-fa.faaz-fa-brands {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* The "Selesai Dibangun" clock is the regular face in the live template. */
.faaz-pr .faaz-fa-clock {
  font-weight: 400;
}

.faaz-pr .faaz-fa-pin::before {
  content: "\f3c5";
}
.faaz-pr .faaz-fa-home::before {
  content: "\f015";
}
.faaz-pr .faaz-fa-sitemap::before {
  content: "\f0e8";
}
.faaz-pr .faaz-fa-clock::before {
  content: "\f017";
}
.faaz-pr .faaz-fa-calculator::before {
  content: "\f1ec";
}
.faaz-pr .faaz-fa-check-circle::before {
  content: "\f058";
}
.faaz-pr .faaz-fa-house-user::before {
  content: "\e065";
}
.faaz-pr .faaz-fa-copy::before {
  content: "\f0c8";
}
.faaz-pr .faaz-fa-expand::before {
  content: "\f065";
}
.faaz-pr .faaz-fa-expand-alt::before {
  content: "\f31e";
}
.faaz-pr .faaz-fa-bed::before {
  content: "\f236";
}
.faaz-pr .faaz-fa-bath::before {
  content: "\f2cd";
}
.faaz-pr .faaz-fa-car::before {
  content: "\f5de";
}
.faaz-pr .faaz-fa-whatsapp::before {
  content: "\f232";
}
.faaz-pr .faaz-fa-envelope::before {
  content: "\f0e0";
}
.faaz-pr .faaz-fa-facebook::before {
  content: "\f09a";
}
.faaz-pr .faaz-fa-twitter::before {
  content: "\f099";
}
.faaz-pr .faaz-fa-linkedin::before {
  content: "\f0e1";
}

/* --------------------------------------------------------------------------
   Responsive (live values per breakpoint).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-pr-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faaz-pr-title {
    font-size: 28px;
  }

  .faaz-pr-avail {
    font-size: 15px;
  }

  .faaz-pr-main {
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
  }

  .faaz-pr-content {
    flex-basis: 100%;
  }

  .faaz-pr-dev {
    flex-basis: 100%;
    padding-left: 0;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .faaz-pr-dev-card {
    width: 50%;
    position: static;
  }

  .faaz-pr-sec-title {
    font-size: 22px;
  }

  /* Live <=1024: the share column sits behind the sticky header. */
  .faaz-pr-share {
    z-index: 8;
  }

  .faaz-pr-share .faaz-fa {
    font-size: 18px;
  }

  .faaz-pr-tel {
    right: 60px;
    bottom: 10px;
  }
}

@media (max-width: 767px) {
  .faaz-pr-hero {
    padding-bottom: 150px;
  }

  .faaz-pr-title {
    font-size: 25px;
    margin-top: 100px; /* the live mobile title keeps a larger top margin */
  }

  .faaz-pr-boxes {
    flex-direction: column;
    gap: 20px;
  }

  .faaz-pr-sec-title {
    font-size: 20px;
  }

  /* Live mobile: one gallery slide per view (the 364px fixed width would
     show ~1.2 slides at 'auto'). */
  .faaz-pr .faaz-pr-gal-swiper .swiper-slide {
    width: 100%;
  }

  /* Live mobile: the unit CTA min-height grows to 200. */
  .faaz-pr-tu-cta {
    min-height: 200px;
  }

  /* Live mobile pill row: 15px side padding, 45% columns (no grow). */
  .faaz-pr-tu-pills {
    padding: 0 15px;
  }

  .faaz-pr-tu-pill-col {
    flex: 0 0 45%;
  }

  .faaz-pr-dev-card {
    width: 100%;
  }
}

/* ---- Block: faaz-perumahan-grid ---- */
/*
 * faaz/perumahan-grid — the /perumahan-baru/ archive grid.
 *
 * Measured on the saved live /perumahan-baru/ page (1440/1024/500):
 *   3 columns desktop, 2 tablet (<=1024), 1 mobile (<=767);
 *   25px column gap, 30px row gap. The card values are shared with the
 *   front-page slider and live in faaz-blocks.css (.faaz-pb-card etc.).
 */

.faaz-pg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 25px;
}

@media (max-width: 1024px) {
  .faaz-pg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .faaz-pg-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Block: faaz-perumahan-search ---- */
/*
 * faaz/perumahan-search — the /perumahan-baru/ hero search bar.
 *
 * Measured on the saved live page (1440px): bar 660x37 (4px inset in its
 * panel), white, 1px #b4b4b4 border, radius 3, inset shadow
 * rgb(181,181,181) 1px 0 6px -3px; input 12px #000 transparent; magnifier
 * 35x35 transparent, 22px icon #363636.
 */

.faaz-ps {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* Live: 660px bar in the 668px panel content — 4px inset all around. */
  width: calc(100% - 8px);
  height: 37px;
  margin: 4px;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
  box-shadow: rgb(181, 181, 181) 1px 0px 6px -3px inset;
}

.faaz-ps-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: #000;
}

.faaz-ps-input:focus {
  outline: none;
}

.faaz-ps-magnifier {
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  /* Live magnifier button: 180deg #84c5dc → #6cd1f5. */
  background: linear-gradient(180deg, rgb(132, 197, 220), rgb(108, 209, 245));
  cursor: pointer;
}

.faaz-ps-magnifier svg {
  width: 22px;
  height: 22px;
  fill: #363636;
}

/* ---- Block: faaz-properti-baru ---- */
/*
 * faaz/properti-baru — front-page "Properti Baru" slider.
 *
 * The live Elementor loop carousel (template 8913, element d5e1f3f)
 * rebuilt natively on Swiper 11 (assets/vendor/swiper): 380px cards,
 * 20px gap, 3/2/1 slides per view (desktop / tablet / mobile),
 * infinite loop, 500ms, 37px white circle arrows (#D31010 icons) at the
 * carousel edges.
 *
 * The card values (faaz-pb-card / -cta / -title / -desc / -price /
 * -cicilan / -tipe / -divider / -contacts / -pill) are shared with the
 * /perumahan-baru/ archive grid — they live in faaz-blocks.css, which
 * loads on both surfaces. This file keeps only the slider chrome.
 */

.faaz-pb {
  position: relative;
  margin-top: 30px;
}

/* Arrows: live elementor-swiper-button (37px white circle, blue chevron). */
.faaz-pb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  color: #000;
  cursor: pointer;
  transition:
    background-color 300ms,
    color 300ms;
}

.faaz-pb-nav:hover {
  background: #000;
  color: #fff;
}

.faaz-pb-nav svg {
  width: 25px;
  height: 25px;
}

/* ---- Block: faaz-properti-grid ---- */
/* faaz/properti-grid — the landing-page listing grid.
 *
 * The live /dijual/ loop grid (post widget 28719fc, loop template 5039)
 * measured on the saved live page, 1440px viewport:
 *   grid 1180 wide, 3 x 380px columns (2/1 on tablet/mobile), gap 20;
 *   card 380x408 — flat: NO border, no shadow, no radius, pb 10
 *     (the home carousel's hairline border + pb 20 is page-specific);
 *   CTA 180, overlay #00000080 (.5) -> #0000003B (.231) on hover,
 *     bg + overlay transition 1500ms;
 *   rows = the shared template 5039 values (same classes as the front-page
 *   sliders — faaz-pp-* — so this file only carries the DIFFERENCES from
 *   faaz-properti-slider.css: the card box + the overlay + grid/pagination).
 *   pagination: mt 20, centered; page-numbers 16px, 10px pad, radius 5,
 *   1px #5a5a5a border, white bg, #1e2132 text; current + dots: #D31010
 *   bg/border, white text; link hover: #D31010.
 *
 * The card row markup (faaz-pp-card / -cta / -loc / -prem / -price / -divider
 * / -spec) is shared with the front-page sliders via faaz_properti_card_html
 * (inc/functions/shared.php); faaz-properti-slider.css must stay in scope
 * only where the sliders render — the two blocks never share a page.
 */

/* Grid: 3/2/1 columns, 20px gap (the live .elementor-grid). */
.faaz-pg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .faaz-pg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .faaz-pg-grid {
    grid-template-columns: 1fr;
  }
}

/* Card cell: live 856969b (pb 20, no border) around the card box. */
.faaz-pg .faaz-pg-cell {
  padding-bottom: 20px;
}

/* Card box: live aa3275f — hairline border, radius 5, shadow, pb 10.
 * (The earlier "flat card" note was wrong: the live /dijual/ grid cards
 * carry the same bordered box as the home carousel, 388 + 20 cell = 408.) */
.faaz-pg .faaz-pp-card {
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
  /* equal card height in the grid (user spec 2026-11-03, non-Swiper grids): the
   * grid item is .faaz-pg-cell, stretched by grid default (align-items:stretch),
   * so a 100%-height card fills it. height:100% resolves against the cell's
   * CONTENT box (the cell keeps its 20px padding-bottom), so cards in a row are
   * equal with the 20px row spacing intact. The Swiper card rows get their equal
   * height from the flex stretch rule instead. */
  height: 100%;
}

/* The live spec block (70a1806/3b6e998) carries pb 10 below the spec rows. */
.faaz-pg .faaz-pp-spec2 {
  margin-bottom: 10px;
}

/* CTA overlay: #00000080 -> #0000003B on hover, 1500ms (the live grid's
 * per-item rules override the template's .4s default). */
.faaz-pg .faaz-pp-cta-bg,
.faaz-pg .faaz-pp-cta-overlay {
  transition: background-color 1500ms;
}

.faaz-pg .faaz-pp-cta-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.faaz-pg .faaz-pp-cta:hover .faaz-pp-cta-overlay {
  background: rgba(0, 0, 0, 0.231);
}

/* The card link hover transition (live: .post-wrapper a 0.3s). */
.faaz-pg .faaz-pp-card,
.faaz-pg .faaz-pp-card a {
  transition:
    background 0.3s,
    background-color 0.3s,
    opacity 0.3s,
    border-radius 0.3s,
    transform 0.3s;
}

/* Pagination: live 28719fc .pagination (mt 20, centered). */
.faaz-pg-pagination .faaz-pg-pages {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.faaz-pg-pagination .page-numbers {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  line-height: 16px;
  color: #1e2132;
  background-color: #fff;
  border: 1px solid #5a5a5a;
  border-radius: 5px;
  text-decoration: none;
}

.faaz-pg-pagination a.page-numbers:hover,
.faaz-pg-pagination .page-numbers:hover {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}

.faaz-pg-pagination .page-numbers.current {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}

/* The live dots are a filled blue box (same as the current page). */
.faaz-pg-pagination .page-numbers.dots {
  color: #fff;
  background-color: #d31010;
  border-color: #d31010;
}

/* Mobile: the live CTA grows to 200px (card 435 total). */
@media (max-width: 767px) {
  .faaz-pg .faaz-pp-cta {
    min-height: 200px;
  }
}

/* Empty state: no listings match the active filters. */
.faaz-pg-empty {
  padding: 60px 20px;
  text-align: center;
}

.faaz-pg-empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  color: #1e2132;
}

.faaz-pg-empty-sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: #5a5a5a;
}

/* ---- Block: faaz-properti-lainnya ---- */
/*
 * faaz/properti-lainnya — the two icon grids inside the shared .faaz-modal panel
 * (2026-10-30, guided by the live popup 14454 screenshot).
 *
 *   title  = 20px / 700 primary, left-aligned (the live card prints the headings
 *            at the left edge, unlike the centred Jasa Properti title)
 *   grid   = columns from the inline --faaz-pl-cols custom property (the item
 *            count), so the mobile rule can re-wrap it; 5 per row on mobile
 *   tile   = flex column centred: circle + label, gap 8
 *   circle = 52px, radius 50%, the theme's mist token, icon 24px inside
 *   label  = 13px / 600 primary
 *
 * The shell (scrim, panel, close X, animation, scroll lock) lives in
 * faaz-blocks.css — this file adds only the grid layout.
 */
/* The card the user set on 2026-10-30: 800px wide (the shared shell's dialog is
 * min(1000px,100vw), so the panel caps the card and the viewport width wins
 * below 800px) and
 * padded 20px all round — this replaces the shell's 28/28/32, including on
 * mobile (the block CSS prints after the shell). */
.faaz-pl-panel {
  max-width: 800px;
  padding: 20px;
}

/* The user's spec 2026-10-30: the Lainnya headings sit 15px above their grid
 * (the shell's 24px). .faaz-pl-title (0,1,0) beats .faaz-modal-title at the same
 * specificity because the block CSS prints after the shell. */
.faaz-pl-title {
  margin: 0 0 15px;
}

.faaz-modal-panel .faaz-pl-title {
  text-align: left;
}

/* The second heading sits below its grid: give it the same breathing room the
 * first heading has above its grid. */
.faaz-pl-grid + .faaz-pl-title {
  margin-top: 32px;
}

/* Tiles pack from the LEFT in fixed 65px columns (the user's spec 2026-10-30):
 * equal 1fr columns spread the row out like space-between. auto-fill +
 * justify-content:flex-start keeps the grid left-aligned, so the leftover width
 * stays on the right, and the row re-wraps by itself at any card width. */
.faaz-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 65px);
  justify-content: flex-start;
  gap: 20px 10px;
}

.faaz-pl-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
}

.faaz-pl-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50px;
  background-color: var(--wp--preset--color--mist);
  transition-duration: 0.3s;
}

.faaz-pl-circle svg {
  width: 24px;
  height: 24px;
}

/* The rented section's circle colour (#E1E1E1, the user's spec 2026-10-30). It is
 * written BEFORE the hover rule so the (0,2,0) hover selector still wins. */
.faaz-pl-rent .faaz-pl-circle {
  background-color: #e1e1e1;
}

/* Hover = the brand red circle (the user's request 2026-10-30). :focus is paired
 * so a keyboard visitor sees the same state; the circle's transition-duration
 * (.3s) already animates it. The SVG fills are hardcoded inside the paths, so
 * the icon stays black on the red — only the background changes. */
.faaz-pl-tile:hover .faaz-pl-circle,
.faaz-pl-tile:focus .faaz-pl-circle {
  background-color: #d31010;
}

.faaz-pl-label {
  font-size: 11px;
  line-height: 20px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

/* Mobile (the user's spec 2026-10-30): same 65px columns, but the row spreads
 * edge to edge (space-between). Both grids share the class, so the bottom
 * Properti Disewakan row gets the same rule. */
@media (max-width: 767px) {
  .faaz-pl-grid {
    grid-template-columns: repeat(auto-fill, 65px);
    justify-content: space-between;
    gap: 16px 8px;
  }
}

/* ---- Block: faaz-properti-slider ---- */
/*
 * faaz/properti-slider — front-page properti sliders (Properti Pilihan +
 * Iklan Properti Lainnya share this one component — the live Elementor loop
 * carousel (template 5039) rebuilt natively on Swiper 11: 3/2/1 slides per
 * view, 20px gap, loop, 500ms, 37px white circle arrows (#D31010 chevron,
 * blue/white hover).
 *
 * Measured live at 1440 (faaz-computed.js on the reference home page):
 *   slide 380x408, gap 20; card border 1px #e7e7e7 (hairline), pb 20;
 *   CTA 180 (pad 5/20/20, overlay rgba(0,0,0,.533) -> .333 on hover),
 *   title h2 16px/500 white lh 1.3;
 *   location row mt 15: map-marker icon 14px gold #d9a31b + text
 *   13px/600 #5a5a5a lh 27;
 *   rating row mt 5: star 14px gold #d9a31b + "Premium" 13px/600 #1e2132,
 *   tags icon 14px site red #d31010 (19px gap), type 13px/600 #1e2132 (9px gap),
 *   offer 13px/600 #1e2132 (6px gap);
 *   price row mt 10: "Rp." + number, both 18px/500 #1e2132, 8px gap;
 *   divider mt 5: 1px #000 line, 2px block padding;
 *   spec rows mt 15/5: icon 12px #5a5a5a + 4px + text 12px/400 #5a5a5a
 *   lh 27, item gap 16 (row 1) / 10 (row 2); rows inset 20px.
 */

.faaz-pp {
  position: relative;
  margin-top: 30px;
}

/* Card: live 856969b (hairline border, bottom padding 20). */
.faaz-pp-card {
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  padding-bottom: 20px;
}

/* CTA cover: live elementor-cta 3a447c2 (valign bottom, pad-bottom 20). */
.faaz-pp-cta {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: 5px 20px 20px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.faaz-pp-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.faaz-pp-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.533);
  transition: background-color 300ms;
}

.faaz-pp-cta:hover .faaz-pp-cta-overlay {
  background: rgba(0, 0, 0, 0.333);
}

/* Title: live elementor-cta__title (16px/500 white, h2). */
.faaz-pp-title {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}

/* FA icon in card rows: size is shared, colour is per icon (user spec
 * 2026-11-02: map-marker gold, tags red; the base rule carries no colour so
 * other cards keep their own). */
.faaz-pp-ic {
  font-size: 14px;
  line-height: 27px;
}

.faaz-pp-ic-gold {
  color: #d9a31b;
}

.faaz-pp-ic-red {
  color: var(--wp--preset--color--accent);
}

/* Location row: live 76018bc (gap 6px, user spec 2026-11-03). */
.faaz-pp-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 15px 20px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 27px;
  color: #5a5a5a;
}

/* Rating row: live 827bc44 (star + Premium, tags, type, offer).
 * Live template 5039 uppercases every item in this row
 * (1c76ac4 / dbfe155 .elementor-icon-list-item: 13px/600 uppercase). */
.faaz-pp-prem {
  display: flex;
  align-items: center;
  margin: 5px 20px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 27px;
  text-transform: uppercase;
}

.faaz-pp-prem-rate {
  display: flex;
  align-items: center;
  gap: 1px;
  color: #1e2132;
}

.faaz-pp-prem-rate .fas {
  font-size: 14px;
  color: #d9a31b;
}

.faaz-pp-tags {
  margin-left: 19px;
}

.faaz-pp-type {
  margin-left: 9px;
  color: #1e2132;
}

.faaz-pp-offer {
  margin-left: 6px;
  color: #1e2132;
}

/* Price row: live 275aa7f ("Rp." + number, 18px/500). */
.faaz-pp-price {
  display: flex;
  gap: 8px;
  margin: 10px 20px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  color: #1e2132;
}

/* Divider: live 8d902ab (1px #000 line, 2px block padding). */
.faaz-pp-divider {
  margin: 5px 20px 0;
  padding: 2px 0;
  border-bottom: 1px solid #000;
}

/* Spec rows: live ceb1790 / 645cab2 (icon + text, 12px #5a5a5a). */
.faaz-pp-spec {
  display: flex;
  align-items: center;
  margin: 5px 20px 0;
}

.faaz-pp-spec1 {
  margin-top: 15px;
  gap: 16px;
}

.faaz-pp-spec2 {
  gap: 10px;
}

.faaz-pp-spec-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-pp-spec-item .fas {
  font-size: 12px;
  color: #5a5a5a;
}

/* Arrows: live elementor-swiper-button (37px white circle). Recolor 2026-11-03
 * (user spec): chevron black #000, hover = black circle + white chevron. The
 * three skins (.faaz-pp-nav, .faaz-pb-nav, .faaz-bs-nav) are identical. */
.faaz-pp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  color: #000;
  cursor: pointer;
  transition:
    background-color 300ms,
    color 300ms;
}

.faaz-pp-nav:hover {
  background: #000;
  color: #fff;
}

.faaz-pp-nav svg {
  width: 25px;
  height: 25px;
}

/* ---- Block: faaz-propeti-detail ---- */
/* ==========================================================================
   faaz/propeti-detail — single listing detail.
   Every value measured from the live Elementor single template
   (tools/single-dijual.html @ 1440/1024/500, tools/faaz-computed.js).
   ========================================================================== */

/* FA glyphs: this vendored FA5 build ships without the per-icon :before
   rules, so each glyph is a content span on its own class. Code points are
   from THIS build's cmap (glyph name = source of truth, fontTools). */
.faaz-pd .faaz-fa {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}
.faaz-pd .faaz-fa-star::before {
  content: "\f005";
}
.faaz-pd .faaz-fa-flag::before {
  content: "\f024";
}
.faaz-pd .faaz-fa-bed::before {
  content: "\f236";
}
.faaz-pd .faaz-fa-bath::before {
  content: "\f2cd";
}
.faaz-pd .faaz-fa-expand::before {
  content: "\f065";
}
.faaz-pd .faaz-fa-expand-alt::before {
  content: "\f31e";
}
.faaz-pd .faaz-fa-check-circle::before {
  content: "\f058";
}
.faaz-pd .faaz-fa-tag::before {
  content: "\f02b";
}
.faaz-pd .faaz-fa-key::before {
  content: "\f084";
}
.faaz-pd .faaz-fa-pin::before {
  content: "\f3c5";
}
.faaz-pd .faaz-fa-car::before {
  content: "\f5de";
}
.faaz-pd .faaz-fa-whatsapp::before {
  content: "\f232";
}
.faaz-pd .faaz-fa-envelope::before {
  content: "\f0e0";
}
.faaz-pd .faaz-fa-facebook::before {
  content: "\f09a";
}
.faaz-pd .faaz-fa-twitter::before {
  content: "\f099";
}
.faaz-pd .faaz-fa-linkedin::before {
  content: "\f0e1";
}

/* Brand glyphs (WA / FB / X / LinkedIn) live ONLY in the Brands family —
   "Font Awesome 5 Free" at weight 400 resolves to the regular face, which
   has none of them, so the family must switch as well as the weight. */
.faaz-pd .faaz-fa.faaz-fa-brands {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Breadcrumb: the very top of the page (light, on white). 13px, grey
   links, accent hover, "/" separators.
   -------------------------------------------------------------------------- */
.faaz-pd-crumbs-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 0 0;
}

.faaz-pd-crumbs {
  font-size: 13px;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-pd-crumbs a {
  color: #777;
  text-decoration: none;
}

.faaz-pd-crumbs a:hover {
  color: #d31010;
}

.faaz-pd-crumb-sep {
  margin: 0 5px;
  color: #c7c7c7;
}

/* --------------------------------------------------------------------------
   Gallery mosaic (belirumah reference): one big photo on the left + two
   stacked tiles on the right; the bottom-right tile carries the blurred
   "Lihat Semua Foto" overlay. Every tile opens the lightbox on its photo.
   Lives at the TOP of the 767 left column (the agent box sits to its right),
   so it is column-width, not 1180. 325 tall (D) / 420 (T);
   mobile: big on top (2fr) over the side pair (1fr).
   -------------------------------------------------------------------------- */
.faaz-pd-gal {
  margin: 0 0 16px; /* gallery -> head (top pill row) */
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  height: 325px; /* = the agent card height (363 x 325) it sits beside */
}

.faaz-pd-gal-big,
.faaz-pd-gal-tile {
  position: relative;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.faaz-pd-gal-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 0;
}

/* Degraded mosaics: one photo = the big tile alone (full width);
   two photos = one side tile spanning the full side height. */
.faaz-pd-gal--solo {
  grid-template-columns: 1fr;
}

.faaz-pd-gal--pair .faaz-pd-gal-side {
  grid-template-rows: 1fr;
}

/* "Lihat Semua Foto": dark veil + 2px backdrop blur, centred pill
   (white/12 bg, white/30 border, r6). */
.faaz-pd-gal-viewall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.faaz-pd-gal-viewall span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 8px 14px;
}

.faaz-pd-gal-tile:hover .faaz-pd-gal-viewall {
  background-color: rgba(0, 0, 0, 0.68);
}

/* --------------------------------------------------------------------------
   Head block: the top of the left column (pill row, title, price) — flex
   column, 16px gap. The gallery->head gap lives on .faaz-pd-gal (the
   gallery is inside the left column now).
   -------------------------------------------------------------------------- */
.faaz-pd-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Top pill row: the choice pill (Featured/Premium), the tipe badge and the
   status pill share one shape — r50 pill, 5/14 padding, 12px/16 uppercase,
   icon + label — so the row reads as one badge set; the colours carry the
   meaning. Deliberately small: they sit above the title/price hierarchy. */
.faaz-pd-badge,
.faaz-pd-type,
.faaz-pd-offer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding: 10px 20px;
  border-radius: 50px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  /* Card skin (the project's single card-shadow definition, user spec 2026-11-05). */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

/* Badge skin (user spec 2026-11-05, measured from the reference screenshot):
 * the choice + tipe pills are LIGHT pink #f9ebfc with near-black text and a
 * red glyph; the status pill stays solid brand red with white text.
 * Reference red core measured = rgb(210,16,16) ≈ our #d31010. */
.faaz-pd-badge,
.faaz-pd-type {
  background: #f9ebfc;
  color: #000;
}

.faaz-pd-badge .faaz-fa,
.faaz-pd-type .faaz-fa {
  color: #d31010;
}

/* Status pill: the live status red (#D31010). */
.faaz-pd-offer {
  background: #d31010;
}

.faaz-pd-offer-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Title (user spec 2026-11-05): desktop 27 (was 35, briefly 25), tablet 25/30,
 * mobile 20/27, primary. */
.faaz-pd-title {
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  line-height: 30px;
  color: #1e2132;
}

/* Location row: the outline pill — same size/padding as the top badge
   pills, in gold #d9a31b (1px border + text + pin), translucent fill.
   No uppercase / letter-spacing — it keeps the plain name look. */
.faaz-pd-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  padding: 5px 14px;
  border-radius: 50px;
  color: #d9a31b;
  border: 1px solid #d9a31b;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.faaz-pd-loc .faaz-fa {
  font-size: 12px;
}

/* Price: "Rp" + full number (" 38,000,000 /Tahun" — the live number text
   carries a space before the unit), 28/500 (D), 22/500 (T/M), white. */
.faaz-pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 0;
}

.faaz-pd-cur,
.faaz-pd-num {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  color: #1e2132;
}

.faaz-pd-badge .faaz-fa,
.faaz-pd-type .faaz-fa,
.faaz-pd-offer .faaz-fa {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Main content: 1180 column, flex-wrap.
   Desktop: left 767 (head + detail + desc) | right 413 (agent) on row 1,
   full-width facilities on row 2, map on row 3.
   Tablet/mobile: single column — left, facilities, map, agent LAST
   (matches the live stacked order).
   -------------------------------------------------------------------------- */
.faaz-pd-main {
  max-width: 1180px;
  margin: 16px auto 0; /* crumbs -> gallery (top of the left column) */
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* right column spans the row so the agent box can sticky */
}

.faaz-pd-left {
  width: 767px;
}

.faaz-pd-right {
  width: 413px;
}

/* Agent box: the live sticky element — white card, pad 30, r5, shadow
   0 0 10 rgba(0,0,0,.18), 363 wide flush-right in the column, sticky
   top 90 (desktop only). Avatar (10px item padding) + name + consent.
   Consent is left-aligned; only the avatar/name are centred. */
.faaz-pd-agent {
  position: sticky;
  top: 90px;
  width: 363px;
  margin-left: auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
  background: #fff;
}

/* Section rhythm (live, measured per breakpoint — the left-column e-con
   carries a 20px gap, so each section's live margin adds to it). */
.faaz-pd-sec-detail {
  margin-top: 70px;
}
.faaz-pd-sec-desc {
  margin-top: 70px;
}
.faaz-pd-sec-fac {
  margin-top: 50px;
}
.faaz-pd-sec-map {
  margin-top: 70px;
}

/* Sections are flex columns — no sibling margin collapse (the live
   Elementor widgets carry padding, so their margins add instead of
   collapsing). */
.faaz-pd-sec {
  display: flex;
  flex-direction: column;
}

/* Section heading: 22/600 #1E2132. */
.faaz-pd-sec-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #1e2132;
}

/* Red divider under every section heading: 1px #D31010, per-section margins
   (the live Elementor e-cons carry their own values). */
.faaz-pd-sec-detail .faaz-pd-sec-div {
  margin: 20px 0;
}
.faaz-pd-sec-desc .faaz-pd-sec-div {
  margin: 22px 0;
}
.faaz-pd-sec-fac .faaz-pd-sec-div {
  margin: 13px 0;
}
.faaz-pd-sec-map .faaz-pd-sec-div {
  margin: 22px 0;
}

.faaz-pd-sec-div {
  height: 1px;
  background: #d31010;
}

/* Detail rows: 15px #5a5a5a lh28, dashed bottom border on every row
   (#CFCFCF), 13px between rows, two 50% columns (live split: the first
   four rows left, the rest right). */
.faaz-pd-rows {
  display: flex;
  gap: 48px;
  margin-top: 0;
}

.faaz-pd-rows-col {
  flex: 1 1 50%;
  min-width: 0;
}

.faaz-pd-row {
  margin: 0 0 13px;
  font-size: 15px;
  line-height: 27px;
  color: #5a5a5a;
  border-bottom: 1px dashed #cfcfcf;
}

.faaz-pd-rows-col .faaz-pd-row:last-child {
  margin-bottom: 0;
}

/* Description: 15px lh27 #5a5a5a, 27px between paragraphs (the live last
   paragraph keeps its 27px bottom margin too). */
.faaz-pd-desc p {
  margin: 0 0 27px;
  font-size: 15px;
  line-height: 27px;
  color: #5a5a5a;
}

/* Facilities: inline icon list (live c438e70) — 14px items with a 5px gap
   and a dashed vertical separator between them, rows on a tight 28px pitch
   (no row gap — the live rows touch). */
.faaz-pd-fac {
  display: flex;
  flex-wrap: wrap;
}

.faaz-pd-fac-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  margin: 0 5px;
  font-size: 14px;
  color: #5a5a5a;
  position: relative;
}

.faaz-pd-fac-item .faaz-fa {
  font-size: 14px;
}

.faaz-pd-fac-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #eaeaea;
}

/* Map: left-column width inside the left column (767 on desktop), full
   width when stacked. 450 tall, soft shadow (live 743c43c). */
.faaz-pd-map-col {
  width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
}

.faaz-pd-map-col iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

/* Agent box content: avatar = the medium (uncropped) image, 100px wide
   natural height, name 18/600 centred, consent 12px lh27 #5a5a5a
   left-aligned, 40px below the name. */
.faaz-pd-agent-avatar {
  width: 100px;
  height: auto;
  margin: 10px auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  overflow: hidden;
}

.faaz-pd-agent-avatar img {
  width: 100%;
  height: auto;
  display: block;
}

.faaz-pd-agent-name {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #1e2132;
  text-align: center;
}

/* Consent line inside the card: 12px lh27 #5a5a5a, 40px below the name. */
.faaz-pd-consent {
  margin: 40px 0 0;
  font-size: 12px;
  line-height: 27px;
  color: #5a5a5a;
  text-align: left;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Similar properties: "<Tipe> Ditawarkan di Area yang Sama" (the listing's
   own deepest lokasi area only).
   mt 160 (D, from the map — live section pt 80 + margin) / 130 (T) /
   100 (M); sides 20 (T/M); pb 100. Heading 22/600 centred; 3/2/1 card
   carousel (380/475/445, gap 20) with the shared .faaz-pp-* card markup.
   -------------------------------------------------------------------------- */
.faaz-pd-similar {
  margin-top: 160px;
  padding-bottom: 100px;
}

.faaz-pd-sim-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.faaz-pd-sim-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 600;
  line-height: 29px;
  text-align: center;
  color: #1e2132;
}

.faaz-pd-sim-wrap {
  position: relative;
}

/* Empty area: notice instead of the carousel. */
.faaz-pd-sim-empty {
  margin: 0;
  padding: 20px 0 40px;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #5a5a5a;
}

/* The live similar-properties slide box is 408px (388px card + 20px below). */
.faaz-pd-sim-wrap .swiper-slide {
  height: 408px;
}

/* Thin area: fewer slides than the per-view count — centre the row
   (the view script adds the class; loop is off, so no overflow). Swiper
   sets an inline margin-right on every slide incl. the last, which would
   shift the centre 10px left — the trailing margin is nulled. */
.faaz-pd-sim-centered .swiper-wrapper {
  justify-content: center;
}

.faaz-pd-sim-centered .swiper-wrapper > .swiper-slide:last-child {
  margin-right: 0 !important;
}
.faaz-sim-btn-wrapper {
  display: flex;
  justify-content: end;
  gap: 5px;
}
.faaz-pd-sim-prev,
.faaz-pd-sim-next {
  width: 37px;
  height: 37px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: #000;
  display: flex;
  justify-content: center;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.faaz-pd-sim-prev svg,
.faaz-pd-sim-next svg {
  width: 18px;
  height: 18px;
}

/* Similar cards (shared .faaz-pp-* card skin): on this page the gold icons
   (map-marker, tags) and the rating row (star + Featured/Premium) follow the
   shared card CSS — gold #d9a31b (user spec 2026-11-02). */

/* --------------------------------------------------------------------------
   Fixed Telepon button (floating agent call button, site-red #D31010, white
   border, right 84 / bottom 15) + the fixed share column (5 × 45px icons
   at right 15, fixed 35% from the top — live 5f92577).
   -------------------------------------------------------------------------- */
.faaz-pd-tel {
  position: fixed;
  right: 66px;
  bottom: 15px;
  z-index: 50;
  display: inline-block;
  background: #d31010;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  padding: 12px 24px;
  border: 1px solid #fff;
  border-radius: 8px;
  text-decoration: none;
}

/* Share UI, split by width (user spec 2026-11-05):
 *   desktop ≥768 — the live floating column (5f92577), fixed right, 45px icons,
 *   mix-blend-mode:difference (white glyphs invert against the section behind).
 *   mobile ≤767 — the Bagikan button under the price, opening the share dialog.
 *
 * Button skin = the strip's location pill (#e9e9e9, 14px) + the card skin shadow;
 * radius 8. The dialog is the shared shell (.faaz-modal / -dialog / -panel /
 * -title / -close) with a small card, tiles = flat brand fills, NO "Salin Tautan"
 * (user decision). */
.faaz-pd-share {
  position: fixed;
  top: 35%;
  right: 15px;
  z-index: 8;
  mix-blend-mode: difference;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faaz-pd-share-btn {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  color: #fff;
  text-decoration: none;
}

.faaz-pd-share-btn .faaz-fa {
  font-size: 22px;
}

.faaz-pd-share-open {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 20px;
  /* User spec 2026-11-05: the button carries NO fill and NO shadow, only a
   * border (the strip chips' hairline #b4b4b4, reused as a shared value). */
  border: 1px solid #b4b4b4;
  border-radius: 8px;
  background: transparent;
  color: #000;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
}

.faaz-pd .faaz-fa-share::before {
  content: "\f1e0"; /* fa-share-alt (FA 5 Free, solid) */
}

.faaz-pd-share-open .faaz-fa {
  font-size: 14px;
}

.faaz-pd-share-dialog {
  width: min(320px, 92vw);
}

.faaz-pd-share-panel {
  padding: 20px 20px 24px;
}

.faaz-pd-share-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #000;
}

.faaz-pd-share-title .faaz-fa {
  font-size: 14px;
}

.faaz-pd-share-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.faaz-pd-share-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}

.faaz-pd .faaz-pd-share-tile .faaz-fa {
  font-size: 18px;
}

/* Flat brand fills (the reference tiles): per-service class comes from the icon
 * name in render.php. */
.faaz-pd-share-facebook {
  background: #1877f2;
}
.faaz-pd-share-twitter {
  background: #000;
}
.faaz-pd-share-whatsapp {
  background: #25d366;
}
.faaz-pd-share-linkedin {
  background: #0a66c2;
}
.faaz-pd-share-envelope {
  background: #5a5a5a;
}

/* --------------------------------------------------------------------------
   Responsive (live Elementor breakpoints: tablet ≤1024, mobile ≤767).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-pd-crumbs-wrap {
    padding: 26px 20px 0;
  }

  .faaz-pd-gal {
    margin: 0 0 16px; /* main already carries the 20px side padding */
    height: 420px;
  }

  .faaz-pd-title {
    font-size: 25px;
    line-height: 30px;
  }

  .faaz-pd-cur,
  .faaz-pd-num {
    font-size: 22px;
    line-height: 22px;
  }

  .faaz-pd-main {
    padding: 0 20px;
    margin-top: 28px;
  }

  .faaz-pd-left {
    width: 100%;
  }

  /* Live T: the agent column is a 605px centred box 100px below the map.
     (Facilities + map now sit inside the left column, so the right is the
     last in-flow child — no order needed.) */
  .faaz-pd-right {
    width: 605px;
    max-width: 100%;
    padding: 0;
    margin: 100px auto 0;
  }

  .faaz-pd-sec-detail {
    margin-top: 100px;
  }
  .faaz-pd-sec-desc {
    margin-top: 70px;
  }
  .faaz-pd-sec-fac {
    margin-top: 50px;
  }
  .faaz-pd-sec-map {
    margin-top: 70px;
  }

  .faaz-pd-sec-detail .faaz-pd-sec-div {
    margin: 20px 0;
  }

  /* The live T row container carries 20px block padding. */
  .faaz-pd-rows {
    padding: 20px 0;
  }

  .faaz-pd-map-col {
    width: 100%;
  }

  .faaz-pd-agent {
    position: static; /* live: sticky on desktop only */
    width: auto;
    max-width: 100%;
    margin: 0;
  }

  .faaz-pd-agent-avatar {
    width: 90px;
    height: auto;
  }

  .faaz-pd-consent {
    margin-top: 40px;
  }

  .faaz-pd-similar {
    margin-top: 130px;
    padding: 0 20px 100px;
  }
}

@media (max-width: 767px) {
  /* Breadcrumb hidden on mobile (user spec 2026-11-05). The wrap's padding is
   * collapsed too, so no empty white band is left where the nav was. */
  .faaz-pd-crumbs {
    display: none;
  }

  .faaz-pd-crumbs-wrap {
    padding: 0;
  }

  /* Share split (user spec 2026-11-05): the floating column is off on mobile,
   * the Bagikan button under the price replaces it. */
  .faaz-pd-share {
    display: none;
  }

  .faaz-pd-share-open {
    display: inline-flex;
  }

  /* Mobile pills: smaller type + tighter tracking. The location pill is
     one step bigger than the badges (11px vs 10px) and keeps no
     letter-spacing / uppercase. */
  .faaz-pd-badge,
  .faaz-pd-type,
  .faaz-pd-offer {
    font-size: 10px;
  }

  .faaz-pd-loc {
    font-size: 11px;
  }

  /* Mobile mosaic: big photo on top (2fr), the two side tiles in one row
     below (1fr) — the "Lihat Semua Foto" tile stays bottom-right. */
  .faaz-pd-gal {
    margin: 0 0 16px; /* main already carries the 20px side padding */
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
    height: auto;
    min-height: 300px;
  }

  .faaz-pd-gal-side {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }

  .faaz-pd-gal--pair .faaz-pd-gal-side {
    grid-template-columns: 1fr;
  }

  .faaz-pd-title {
    font-size: 20px;
    line-height: 27px;
  }

  .faaz-pd-cur,
  .faaz-pd-num {
    font-size: 30px;
    line-height: 30px;
  }

  .faaz-pd-main {
    padding: 0 20px;
    margin-top: 24px;
  }

  .faaz-pd-right {
    padding: 0;
    margin: 100px 0 0;
  }

  .faaz-pd-sec-detail {
    margin-top: 70px;
  }

  /* Mobile: no gutter between the detail-row columns — the desktop 48px
     gap leaves ~198px per column, so 15px labels like "Luas Bangunan:
     283 m²" wrap and the unit drops to a second line. */
  .faaz-pd-rows {
    gap: 0;
  }

  /* Mobile: the detail-row type drops two points (15px -> 13px). */
  .faaz-pd-row {
    font-size: 13px;
  }
  .faaz-pd-sec-desc {
    margin-top: 70px;
  }
  .faaz-pd-sec-fac {
    margin-top: 50px;
  }
  .faaz-pd-sec-map {
    margin-top: 70px;
  }

  .faaz-pd-sec-detail .faaz-pd-sec-div {
    margin: 20px 0;
  }

  .faaz-pd-sec-desc .faaz-pd-sec-div {
    margin: 20px 0;
  }
  .faaz-pd-sec-map .faaz-pd-sec-div {
    margin: 20px 0;
  }

  .faaz-pd-consent {
    margin-top: 40px;
  }

  .faaz-pd-agent {
    position: static;
    width: 100%;
    padding: 30px 20px;
  }

  .faaz-pd-agent-avatar {
    width: 100px;
    height: auto;
  }

  .faaz-pd-similar {
    margin-top: 100px;
    padding: 0 20px 100px;
  }
}

/* ---- Block: faaz-sort-select ---- */
/* faaz/sort-select — the landing-page sort select.
 *
 * Measured on the saved live /dijual/ page, 1440px viewport:
 *   select 232x41 (fills its column), 15px #5a5a5a text, 1px #d6d9dd border,
 *   radius 5, white bg; the live form-order-by select.
 */

.faaz-ss {
  display: block;
  /* The group's flex column does not stretch children (align-items
	 * flex-start), so the form must take the column's full 232px itself. */
  width: 100%;
}

.faaz-ss select {
  display: block;
  width: 100%;
  height: 41px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #d6d9dd;
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 41px;
  color: #5a5a5a;
  cursor: pointer;
}

/* ---- Block: faaz-tipe-unit-detail ---- */
/* faaz/tipe-unit-detail — single tipe-unit page (live Elementor template
 * 8985). Measured on the live https://faazinc.com/tipe-unit/otter/ page at
 * 1440/1024/500 (plus the saved reference ~/Downloads/single-tipe-unit.html).
 *
 * Structure: full-width hero over the featured photo (50% black veil),
 * two-column main (content 65% | project card, NOT sticky), fixed share
 * column. No floating Telepon button (the live page has none).
 */

/* --------------------------------------------------------------------------
   Hero.
   -------------------------------------------------------------------------- */
.faaz-tu-hero {
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 20px 0 130px;
}

.faaz-tu-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.faaz-tu-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* The live hero title keeps its 80px top margin ON TOP of the 20px gap. */
.faaz-tu-title {
  margin: 80px 0 0;
  font-size: 35px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

/* Live 5fdf442e — the yellow location button. */
.faaz-tu-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid #d9a31b;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #d9a31b;
  font-size: 14px;
  line-height: 1;
}

.faaz-tu-loc .faaz-fa {
  font-size: 14px;
}

.faaz-tu-harga-label {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

.faaz-tu-price {
  margin: 0;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

/* Live hero spec row (two post-info widgets, one 20px-pitch row): 15px
   white icons + values. */
.faaz-tu-specs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.faaz-tu-spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}

.faaz-tu-spec .faaz-fa {
  font-size: 15px;
}

/* Live hero breadcrumb hover is the yellow, not the archive gold. The trail
 * spans the full inner column (the live widget does) so it never wraps. */
.faaz-tu-hero .faaz-crumbs--dark a:hover,
.faaz-tu-hero .faaz-crumbs--dark a:focus {
  color: #d31010;
}

.faaz-tu-crumbs {
  width: 100%;
}

/* Live hero breadcrumb: Roboto Slab 13px (the post-info widget inherits the
   Elementor kit's global secondary typography), 27px line box, tight 4px
   separator spacing. Two classes beat the .faaz-crumbs skin regardless of
   stylesheet order. */
.faaz-crumbs.faaz-tu-crumbs ol {
  font-family: "Roboto Slab", sans-serif;
  line-height: 27px;
}

.faaz-crumbs.faaz-tu-crumbs li + li::before {
  margin: 0 4px;
}

/* --------------------------------------------------------------------------
   Main: two columns (stacked <=767). The live section wraps its children in
   a centred 1180 box; the content column is 65%, the project column takes
   the rest, 20px gap.
   -------------------------------------------------------------------------- */
.faaz-tu-main {
  display: flex;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 0 100px;
  align-items: flex-start;
}

.faaz-tu-content {
  flex: 1 1 65%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --------------------------------------------------------------------------
   Gallery (live image carousel: natural-aspect slides — the live carousel
   stretches, no crop; 2 per view desktop / 1 mobile, 25px gap).
   -------------------------------------------------------------------------- */
.faaz-tu-gal {
  position: relative;
  margin-bottom: 28px;
}

.faaz-tu-gal-swiper {
  overflow: hidden;
}

/* Extra specificity beats the Swiper bundle's .swiper-slide { width:100% }.
   The live carousel crops every slide to a 12:7 box (364x212 @D, 472x275 @T,
   445x260 @M) — width-driven, cover-cropped, never the natural ratio. */
.faaz-tu .faaz-tu-gal-swiper .swiper-slide {
  aspect-ratio: 12 / 7;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
}

.faaz-tu .faaz-tu-gal-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live arrows: bare blue chevrons, inside the slide edges, centred. */
.faaz-tu-gal-prev,
.faaz-tu-gal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 19px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d31010;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.faaz-tu-gal-prev {
  left: 10px;
}

.faaz-tu-gal-next {
  right: 10px;
}

.faaz-tu-gal-prev .faaz-fa,
.faaz-tu-gal-next .faaz-fa {
  font-size: 25px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Icon boxes (live 5d8fec5f & co): white card, centred 45px icon on top,
   title + value below.
   -------------------------------------------------------------------------- */
.faaz-tu-boxes {
  display: flex;
  gap: 10px;
}

.faaz-tu-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

.faaz-tu-box-icon {
  display: block;
  width: 45px;
  line-height: 0;
}

.faaz-tu-box-icon .faaz-fa {
  display: block;
  font-size: 45px;
}

.faaz-tu-box-content {
  width: 100%;
}

.faaz-tu-box-title {
  margin: 0 0 10px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  color: #1e2132;
}

.faaz-tu-box-text {
  margin: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 27px;
  color: #5a5a5a;
}

/* --------------------------------------------------------------------------
   Sections: dividers, titles, spec list, description, facilities, map.
   -------------------------------------------------------------------------- */
.faaz-tu-div {
  height: 31px;
  padding: 15px 0;
  border-bottom: 1px solid #cacaca;
}

.faaz-tu-sec-title {
  margin: 0;
  font-size: 25px;
  line-height: 1.4;
  font-weight: 600;
  color: #1e2132;
}

/* Live 63bc0e32 — the nine-item spec list: 14px icon, 16px #5a5a5a text,
   10px icon gap, 37px row pitch (32 line + 5 pad + 5 margin). */
.faaz-tu-spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faaz-tu-spec-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  line-height: 27px;
  font-size: 16px;
  color: #5a5a5a;
}

.faaz-tu-spec-list li + li {
  margin-top: 5px;
}

.faaz-tu-spec-list .faaz-fa {
  flex: 0 0 14px;
  width: 14px;
  font-size: 14px;
  text-align: center;
}

.faaz-tu-desc {
  font-size: 16px;
  line-height: 27px;
  color: #5a5a5a;
}

.faaz-tu-desc p {
  margin: 0 0 27px;
}

.faaz-tu-desc h3 {
  margin: 0 0 27px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #1e2132;
}

/* Live 568e168f — facilities: horizontal check-circle list with dashed
   #EAEAEA separators. */
.faaz-tu-fac {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faaz-tu-fac li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  line-height: 28px;
  font-size: 14px;
  color: #555555;
}

.faaz-tu-fac li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  border-left: 1px dashed #eaeaea;
}

.faaz-tu-fac .faaz-fa {
  font-size: 14px;
}

.faaz-tu-map {
  overflow: hidden;
}

.faaz-tu-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

/* --------------------------------------------------------------------------
   Project card (the live right column: project image + title link).
   NOT sticky — the live column scrolls with the page.
   -------------------------------------------------------------------------- */
/* Live 65/35 split of the 1180 box with a 20px gap: both children shrink
   (754/406), matching the measured 753.4/406.6. The card itself is the
   live DCE wrapper 11b4b01a: white box, radius 8, shadow 0 0 10 .2,
   padding 30 top/bottom — sticky top 90 on desktop like the agent/developer
   cards on the other single pages (the live card is not sticky; the user
   wants parity with them). */
.faaz-tu-proj {
  flex: 1 1 35%;
  align-self: stretch; /* full-height column: the card's sticky range is the
                          whole main row, not just the card's own height */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-left: 50px;
}

.faaz-tu-proj-card {
  position: sticky;
  top: 90px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

.faaz-tu-proj-img {
  text-align: center;
}

.faaz-tu-proj-img img {
  display: block;
  max-width: 100px;
  height: auto;
  margin: 0 auto;
}

.faaz-tu-proj-title {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #5a5a5a;
  text-align: center;
}

.faaz-tu-proj-title a {
  color: #5a5a5a;
  text-decoration: none;
  font-weight: 600;
}

.faaz-tu-proj-title a:hover,
.faaz-tu-proj-title a:focus {
  color: #d31010;
}

/* --------------------------------------------------------------------------
   Fixed right-edge share column (live share widget 43e6e334).
   -------------------------------------------------------------------------- */
.faaz-tu-share {
  position: fixed;
  top: 35%;
  right: 15px;
  z-index: 40;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Same behaviour as the other single pages: the white icons invert
     against whatever scrolls behind them (dark on light, light on dark). */
  mix-blend-mode: difference;
}

.faaz-tu-share-btn {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  color: #fff;
  text-decoration: none;
}

.faaz-tu-share .faaz-fa {
  font-size: 22px;
}

/* Fixed Telepon button — same skin/position as the other single pages
   (faaz-pd-tel / faaz-pr-tel). */
.faaz-tu-tel {
  position: fixed;
  right: 84px;
  bottom: 15px;
  z-index: 50;
  display: inline-block;
  background: #d31010;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  padding: 12px 24px;
  border: 1px solid #fff;
  border-radius: 8px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Font Awesome — the glyph codepoints of THIS vendored build (the glyph
   name is the source of truth).
   -------------------------------------------------------------------------- */
.faaz-tu .faaz-fa {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

/* Brand glyphs need the Brands family, never just a weight switch. */
.faaz-tu .faaz-fa.faaz-fa-brands {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* The regular face (Font Awesome 5 Free, weight 400) — list-alt + clock. */
.faaz-tu .faaz-fa.faaz-fa-reg {
  font-weight: 400;
}

.faaz-tu .faaz-tu-fa-pin::before {
  content: "\f3c5";
}
.faaz-tu .faaz-tu-fa-expand-arrows::before {
  content: "\f31e";
}
.faaz-tu .faaz-tu-fa-expand::before {
  content: "\f065";
}
.faaz-tu .faaz-tu-fa-bed::before {
  content: "\f236";
}
.faaz-tu .faaz-tu-fa-bath::before {
  content: "\f2cd";
}
.faaz-tu .faaz-tu-fa-car::before {
  content: "\f1b9";
}
.faaz-tu .faaz-tu-fa-home::before {
  content: "\f015";
}
.faaz-tu .faaz-tu-fa-clock::before {
  content: "\f017";
}
.faaz-tu .faaz-tu-fa-calculator::before {
  content: "\f1ec";
}
.faaz-tu .faaz-tu-fa-list-alt::before {
  content: "\f022";
}
.faaz-tu .faaz-tu-fa-tachometer::before {
  content: "\f3fd";
}
.faaz-tu .faaz-tu-fa-chair::before {
  content: "\f6c0";
}
.faaz-tu .faaz-tu-fa-sort::before {
  content: "\f885";
}
.faaz-tu .faaz-tu-fa-car-alt::before {
  content: "\f5de";
}
.faaz-tu .faaz-tu-fa-check::before {
  content: "\f058";
}
.faaz-tu .faaz-tu-fa-chevron-left::before {
  content: "\f053";
}
.faaz-tu .faaz-tu-fa-chevron-right::before {
  content: "\f054";
}
/* Share glyphs: faaz_share_urls() emits the generic faaz-fa-* classes (the
   same source the other single pages use), so these rules carry them. */
.faaz-tu .faaz-fa-whatsapp::before {
  content: "\f232";
}
.faaz-tu .faaz-fa-envelope::before {
  content: "\f0e0";
}
.faaz-tu .faaz-fa-facebook::before {
  content: "\f09a";
}
.faaz-tu .faaz-fa-twitter::before {
  content: "\f099";
}
.faaz-tu .faaz-fa-linkedin::before {
  content: "\f0e1";
}

/* --------------------------------------------------------------------------
   Responsive (live values per breakpoint).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faaz-tu-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faaz-tu-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .faaz-tu-specs {
    gap: 10px;
  }

  /* The live main goes single-column at 1024 (not 767). Stretch: in column
     mode the cross axis is width, and flex-start fit-content lets the
     gallery's circular widths blow the column to max-content. */
  .faaz-tu-main {
    flex-direction: column;
    align-items: stretch;
    padding-left: 20px;
    padding-right: 20px;
  }

  .faaz-tu-proj {
    padding-left: 0;
    padding-top: 80px;
    align-items: center;
  }

  .faaz-tu-proj-card {
    position: static;
  }

  .faaz-tu-sec-title {
    font-size: 22px;
  }

  .faaz-tu-share {
    z-index: 10;
  }

  .faaz-tu-share .faaz-fa {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .faaz-tu-hero {
    padding-bottom: 180px;
  }

  .faaz-tu-title {
    font-size: 25px;
    margin-top: 120px;
  }

  .faaz-tu-boxes {
    flex-wrap: wrap;
  }

  .faaz-tu-box {
    flex-basis: 100%;
  }

  .faaz-tu-sec-title {
    font-size: 20px;
  }
}

/* ---- Block: faaz-wa-float ---- */
/* ==========================================================================
   faaz/wa-float — the live site-wide floating WhatsApp button (BuddyBoss
   CTC widget): 40px green circle, white WA glyph, fixed bottom 15 / right
   15. The glyph is a ::before content span — this vendored FA5 build ships
   without per-icon :before rules (whatsapp = U+F232, brands 400).
   ========================================================================== */
.faaz-wa-float {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 99999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  text-decoration: none;
}

.faaz-wa-float::before {
  content: "\f232";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

/* The jasa service pages carry the live floating icon instead: a bare
   white glyph (no circle), mix-blend difference so it inverts over any
   section, fixed right 10 / bottom 10 — top 695 on desktop (the live
   Elementor offsets), 45px @T/M, 50px @D. */
.faaz-wa-float--jasa {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  bottom: 10px;
  right: 10px;
  z-index: 1;
  mix-blend-mode: difference;
}
.faaz-wa-float--jasa::before {
  font-size: 45px;
}
@media (min-width: 768px) {
  .faaz-wa-float--jasa::before {
    font-size: 50px;
  }
}

/* ==========================================================================
   The address pin (fas fa-map-marker-alt) in the two card location rows.
   User spec 2026-11-04 (revised: the -2px margin removed): the pin aligns to the
   START/TOP of the row (not centre). Both rows are flex, so align-items:flex-start
   is the top rule (align-items: center would win a single-class icon rule).
   Written after .faaz-pp-loc and .faaz-pb-loc so the pair selectors win the
   cascade. Covers every place the pin is used: faaz_properti_card_html (.faaz-pp-loc
   with .faaz-pp-ic) and the perumahan card (.faaz-pb-loc, icon now carrying
   the shared faaz-pp-ic + faaz-pp-ic-gold classes).
   ========================================================================== */
.faaz-pp-loc,
.faaz-pb-loc {
  align-items: flex-start;
}