/* MDIX Properti Harmoni — audit fixes (auditor 4 + design-QA 2026-10-12). */

:root {
  --mdix-gold: #d29751;        /* brand gold: decoration only (2.5:1 on white) */
  --mdix-gold-dark: #96632b;   /* text + buttons: 5.1:1 with white */
  --mdix-ink: #3c3935;
  --mdix-overlay: rgba(28, 24, 20, 0.62);
}

/* Partner-logo strip only shows grey theme placeholder boxes. */
.brand-area {
  display: none !important;
}

/* ---------- E: AA contrast (D-20: gold darkened for text and buttons) ---------- */
.btn,
.btn.ss-btn,
.apartments nav > div a.nav-item.nav-link.active,
.apartments nav > div a.nav-item.nav-link:hover,
.apartments nav > div a.nav-item.nav-link:focus,
.availability-section .availability-table table thead,
.about-text {
  background-color: var(--mdix-gold-dark);
}
.about-text { box-shadow: 5px 5px 0 0 var(--mdix-gold); }
.s-cta-btn .btn { background: #383838; }
.section-title span,
.second-atitle > span,
.b-meta ul li a.corpo,
.s-single-services.active .second-services-content2 h5,
.contact-info a,
.services-content small {
  color: var(--mdix-gold-dark);
}
.wellcome-text p { color: #5f5f5f; }
.header-cta ul li span { color: #4a4a4a; }
/* menu links sit on the gold ::before bar; give the links the same colour so it is measurable */
@media (min-width: 992px) {
  .main-menu > nav > ul > li > a:not(.top-btn) { background-color: var(--mdix-gold); }
}
/* slick dots are bars without visible text */
.services-active .slick-dots li button { color: transparent; font-size: 0; }

/* About label: theme forces a 110px box, so "TENTANG KAMI" broke over two lines */
.second-atitle > span {
  width: auto;
  height: auto;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 16px;
  background: transparent;
}

/* ---------- Header ---------- */
.responsive {
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  margin-top: -36px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 991px) {
  .responsive { display: inline-flex; }
  /* "Halaman Lain" sub-pages have no toggle on touch: show them under their parent */
  .main-menu .has-sub > ul { display: block !important; float: none; margin-bottom: 0; }
  .main-menu .has-sub > ul li { border-bottom: 0; }
  .main-menu ul li a { min-height: 44px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* 8 links + DAFTAR did not fit: header wrapped to 180px */
  .second-menu .col-lg-2 { flex: 0 0 20%; max-width: 20%; }
  .second-menu .col-lg-9 { flex: 0 0 80%; max-width: 80%; }
  .second-menu .main-menu ul li { margin-left: 18px; }
  .main-menu ul li a { font-size: 14px; }
  .main-menu ul li a.top-btn { display: none; } /* duplicate of "Kontak"; did not fit at 992–1199 */
  .slider-content.s-slider-content h2 { font-size: 72px; }
}

/* ---------- Hero ---------- */
.slider-btn .video-i { display: none; } /* theme-seller YouTube clip */
.slider-content ul li { display: inline-block; white-space: nowrap; }
.btn.ss-btn:hover { color: var(--mdix-gold-dark); }
@media (max-width: 991px) {
  .slider-price { position: relative; margin-top: 24px; padding-left: 30px; }
  .slider-price h2 { font-size: 44px; }
}
@media (max-width: 767px) {
  .slider-btn { display: block; margin-top: 28px; }
  .slider-btn .btn.ss-btn { display: inline-block; }
  .slider-content ul li { margin-bottom: 6px; }
}

/* ---------- Text over photos: overlays ---------- */
.counter-area { position: relative; background-position: center; }
.counter-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.84);
}
.counter-area > .container { position: relative; z-index: 1; }
.single-counter p { color: var(--mdix-ink); font-weight: 500; }

.cta-bg::before,
.testimonial-area::before,
.breadcrumb-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mdix-overlay);
  z-index: 0;
}
.testimonial-area,
.breadcrumb-area { position: relative; background-size: cover; background-position: center; }
.cta-bg > .container,
.testimonial-area > .container,
.breadcrumb-area > .container { position: relative; z-index: 1; }
.cta-title h3 a { color: #fff; white-space: nowrap; }
.breadcrumb li a,
.breadcrumb-item + .breadcrumb-item::before { color: #f2f2f2; }
.breadcrumb > .active { color: #f3c98f; }
.testimonial-area .section-title span,
.cta-title .section-title span { color: #f3c98f; }
.testi-author img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }

/* ---------- Availability table ---------- */
.availability-section .availability-table table td,
.availability-section .availability-table table th { vertical-align: middle; }
.availability-section .availability-table table tbody .name,
.availability-section .availability-table table tbody .price { text-transform: none; }
.availability-section .availability-table .btn { padding: 14px 32px; }
@media (max-width: 767px) {
  .availability-section .availability-table table,
  .availability-section .availability-table tbody,
  .availability-section .availability-table tr { display: block; width: 100%; }
  .availability-section .availability-table thead { display: none; }
  .availability-section .availability-table tr {
    background: #fff;
    border: 1px solid #eaeaea;
    margin-bottom: 16px;
  }
  .availability-section .availability-table table td,
  .availability-section .availability-table table td.name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 16px;
  }
  .availability-section .availability-table table td::before {
    content: attr(data-label);
    color: #666;
    font-weight: 400;
    text-align: left;
  }
  .availability-section .availability-table table td.name { background: #f7efe5; font-size: 16px; }
  .availability-section .availability-table table td:last-child { border-bottom: 0; }
}

/* ---------- Nearby facilities: decorative icon hung half outside the card ---------- */
.services-two .services-icon { right: 24px; top: 50%; transform: translateY(-50%); }
.services-two .services-icon i { font-size: 36px; color: #eadccb; }
.services-two .s-single-services.active .services-icon i { color: var(--mdix-gold); }

/* ---------- Touch targets ---------- */
.services-active .slick-dots li button,
.services-active .slick-dots li.slick-active button {
  height: 24px;
  background: linear-gradient(var(--mdix-gold), var(--mdix-gold)) center / 100% 5px no-repeat;
}
.second-services-content2 a { display: inline-block; padding: 12px 0; }
.b-meta ul li a { display: inline-block; padding: 6px 0; }
.footer-link ul li a { display: inline-block; padding: 6px 0; }
.footer-link ul li { margin-bottom: 4px; }
.footer-social span { display: block; margin-bottom: 6px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 0;
  font-size: 18px;
}
.services-content h4 a { display: inline-block; padding: 6px 0; }

/* ---------- Phone rhythm: theme keeps 120–185px section padding ---------- */
@media (max-width: 767px) {
  .pt-120, .pt-115, .pt-113 { padding-top: 72px; }
  .pb-120, .pb-150 { padding-bottom: 72px; }
  .pb-90 { padding-bottom: 48px; }
  .testimonial-p.pb-185 { padding-bottom: 72px; }
  .about-p .s-about-img { margin-top: 0; }
  .cta-title h2 { font-size: 28px; }
  .cta-title h3 { font-size: 32px; }
  .apartments nav > div a.nav-item.nav-link,
  .apartments nav > div a.nav-item.nav-link.active { margin-bottom: 12px; flex: 1 1 40%; }
  .apartments nav > div.nav { gap: 0 12px; }
  .about-title h2 { font-size: 40px; }
  .breadcrumb-title h2 { font-size: 44px; }
  .breadcrumb-area { min-height: 260px; }
}

/* social icons on team cards and blog sidebar */
.team-social a,
.widget-social a,
.avatar__info-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
}
.page-item a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* pricing cards: gold text/fills darkened for AA */
.pricing-head h4,
.pricing-btn .btn { color: var(--mdix-gold-dark); }
.pricing-btn .btn { background: #fff; }
.pricing-btn .btn:hover,
.pricing-box.active .pricing-btn .btn { background: var(--mdix-gold-dark); border-color: var(--mdix-gold-dark); color: #fff; }
.pricing-box.active { border-color: var(--mdix-gold-dark); }
.pricing-box.active .pricing-head { background: var(--mdix-gold-dark); }
.pricing-box.active .pricing-head h4 { color: #fff; }

/* round 2: remaining touch targets, contrast, phone hero */
.logo a,
.services-thumb a.gallery-link,
.bsingle__post-thumb a,
.blog-thumb a { display: block; }
.logo a { display: inline-block; }
.breadcrumb li a,
.meta-info ul li a,
.meta__info ul li a,
.blog-content h4 a,
.cat__list li a { display: inline-block; padding: 6px 0; }
.post__share ul li a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.services-active .slick-dots li button {
  width: 28px;
  background-size: 20px 5px;
}
.services-active .slick-dots li.slick-active button { width: 50px; background-size: 100% 5px; }
.services-two .s-single-services.active .second-services-content h5 { color: var(--mdix-gold-dark); }
@media (max-width: 575px) {
  .slider-content.s-slider-content h2 { font-size: 40px; }
}

/* CLS: top-bar icons grow when the icon font loads, wrapping the contact line and pushing the page down */
.header-cta ul li i { display: inline-block; width: 16px; text-align: center; }
@media (min-width: 1200px) {
  .header-cta ul { white-space: nowrap; }
  .header-cta ul li { margin-left: 28px; }
}
.header-cta ul li:first-child { margin-left: 0; }
.avatar-name span,
.button-group button.active,
.button-group button:hover { color: var(--mdix-gold-dark); }
.button-group button.active { border-color: var(--mdix-gold-dark); }
.button-group button { min-height: 44px; }
.comment-text .avatar-name span { color: var(--mdix-gold-dark); }

/* Verifikasi ulang akhir 2026-10-13: wordmark SVG lebih besar (PNG lama teks ±10px). */
.logo img, .footer-widget img[src*="mdix-logo"] { width: 232px; height: auto; max-width: 100%; }
@media (max-width: 575px) { .logo img { width: 190px; } }