/* MDIX Industri Sentosa — per-template fixes */

/* Theme demo tooling: colour/layout switcher injected by script.js. */
.style-switcher-box { display: none !important; }

/* Submenus faded "all" properties, so they flashed visible while the layout settled. */
@media screen and (min-width: 992px) {
  .site-header #navbar > ul .sub-menu { transition: opacity .3s, top .3s; }
}

/* Partner strip only had grey "150x122" placeholder logos. */
.partners-section { display: none; }

/* Testimonials share one placeholder avatar; show name and company only. */
.testimonial-section .client-pic { display: none; }

/* Google Maps has no API key ("For development purposes only" + error dialog).
   Hide it and show an industrial photo behind the contact form instead. */
.contact-section .contact-map { visibility: hidden; }
.contact-section {
  background: linear-gradient(rgba(21, 25, 31, .55), rgba(21, 25, 31, .55)),
              url("images/body-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
  .contact-section .contact-map { display: none; }
}

/* ===== Design-QA 2026-10-12 ===== */

/* Contrast (D-20): theme orange #ff8e31 gives 2.3:1 with white text and as text on white.
   Darker burnt orange #b84f00 (5.0:1 with white) for text on light backgrounds and
   for orange panels that carry white text. Bright orange stays for icons and text on dark. */
.site-header .topbar .client-login a,
.hero-slider-s1 .slide-caption .trending,
.theme-btn, .theme-btn-s2,
.theme-accordion-s2 .panel-heading a,
.client-login-area .form button,
.pg-title-btm-menu,
.pagination ul li a:hover, .pagination ul li.current a,
.sidebar .link-widget ul .active a,
.sidebar .download-widget ul li a,
.testimonial-section .testimonials-slider .grid,
.contact-section .contact-form,
.services-grids .grid:hover .service-details,
.site-footer .newsletter-widget .form > div button,
.blog-single-main-content .post-title-meta .btn,
.blog-single-main-content .comment-respond .theme-btn-s2 { background-color: #b84f00; }
.theme-btn-s2:hover, .theme-btn-s1:hover { border-color: #b84f00; }
.faq-blog .entry-body .read-more,
.theme-accordion .panel-default .panel-body .read-more,
.blog-s2-grids .entry-footer .comments,
.blog-s2-grids .entry-footer .read-more,
.services-s2-grids .grid .read-more,
.section-title-s6 h2 span,
.latest-projects .gallery-grid .gallery-button.color li a.active,
.latest-projects .gallery-grid .gallery-button.color li a:hover,
.blog-single-main-content .comments .replay button,
.contact-section .contact-form .submit button,
.site-header #navbar > ul .sub-menu a:hover { color: #b84f00; }
@media (max-width: 991px) {
  .site-header #navbar ul li.current a, .site-header #navbar ul li.current-menu-item > a { color: #b84f00; }
}
.contact-section .contact-form a { color: #fff; text-decoration: underline; }

/* Phone filter list: the "/" separators stuck out at the right edge. */
@media (max-width: 767px) {
  .latest-projects .gallery-grid .gallery-button li:after,
  .latest-projects .gallery-grid .gallery-button li:before { display: none !important; }
}

/* Testimonials page 2: the avatar was a grey "40x40" placeholder (same as on the home page). */
.testimonials-s2-faq .client-info .client-pic { display: none; }
.testimonials-s2-faq .client-info .client-details { padding-left: 0; margin-left: 0; }

/* Clients: the logos were unrelated stock badges ("Mountain Explorer", "fine art"…); show the text only. */
.clients-section .client-pic { display: none; }
.clients-section .client { border: 1px solid #e3dfdc; border-left: 4px solid #b84f00; }
.clients-section .client-details { width: 100%; float: none; }

/* Project archive slider mixes two photo sizes: keep one crop. */
.latest-porjects-s3 .grid .img-holder img { width: 100%; aspect-ratio: 460 / 325; object-fit: cover; }

/* Team: names only appeared on hover, so touch visitors never saw them. */
@media (hover: none), (max-width: 1199px) {
  .team-section .member-details { top: auto; bottom: 0; height: auto; opacity: 1; padding: 14px 10px; }
  .team-section .member-details .info { position: static; transform: none; }
}

/* Contact page: keyless map embed behind the form (home page keeps the photo). */
.contact-section.contact-section-page { background: none; }
.contact-section.contact-section-page .contact-map { visibility: visible; }
.contact-section.contact-section-page .contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) {
  .contact-section.contact-section-page .contact-map { display: block; height: 280px; }
}
.contact-section .contact-form ul li i.fa-envelope, .contact-section .contact-form ul li i.fa-clock-o { width: 14px; }

/* Footer copyright line (the theme had none). */
.site-footer .mdix-copyright { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding: 22px 0; }
.site-footer .mdix-copyright p { margin: 0; color: #c9ccd1; font-size: 14px; text-align: center; }

/* Touch targets (>= 24px; 44px for social icons on touch screens). */
.site-footer .site-map-widget ul li a { display: block; min-height: 24px; }
.site-footer .news-widget .entry-media img { width: 50px; height: 50px; object-fit: cover; }
.site-footer .news-widget li h5 a { display: inline-block; min-height: 24px; }
.latest-projects .project-title h3 a { min-height: 24px; }
@media (hover: none), (max-width: 1199px) {
  .social-links li a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}
.careers-section .job-search-form .form button,
.careers-section .job .apply-share a:first-child,
.services-single-pg .service-single-content .service-single-tab .nav .active a,
.blog-details-page .blog-single-content .post-title-meta .btn { background-color: #b84f00; }
.careers-section .job .apply-share a:first-child { background: #b84f00; }
.testimonials-s2-faq .client-info h4,
.time-line-section .timeline-tab .tablist li.active a,
.team-section .tablist li.active a,
.careers-section .job-lists .job-footer ul li:last-child,
.blog-details-page .blog-single-content .comments .article .replay button { color: #b84f00; }
.team-section .tablist li.active a { border-bottom-color: #b84f00; }

/* Title Case (text-transform: capitalize) on Indonesian headings → sentence case as written. */
.section-title-s4 h2, .section-title-s5 h2, .section-title-s7 h2, .section-title-s6 h2,
.sidebar .widget h3, .blog-sidebar .recent-post-widget .details h4,
.blog-details-page .blog-single-content .comments .article h4 { text-transform: none; }

/* Dark text on the darker orange panels fell to 3:1 → white. */
.testimonial-section .testimonials-slider .client-details h4,
.testimonial-section .testimonials-slider .client-details > span,
.contact-section .contact-form h3,
.contact-section .contact-form h4 { color: #fff; }

/* Round 2 touch targets: phone menu button 44px, slider dots, card links. */
@media (max-width: 991px) {
  .site-header .navbar-header button { width: 44px; height: 44px; top: 9px; padding: 8px 11px; }
}
.dots-style-1 .owl-controls .owl-dots .owl-dot { display: inline-block; padding: 5px; }
.services-grids .grid .service-details h3 a { display: inline-block; min-height: 24px; }
.read-more { display: inline-block; min-height: 24px; line-height: 24px; }

/* Round 2 contrast (inner pages) */
.site-header .topbar .contact-info ul li { color: #4f545c; }
@media (max-width: 991px) {
  .header-style-1 #navbar > ul > li.current-menu-item > a, .header-style-3 #navbar > ul > li.current-menu-item > a,
  .header-style-2 .navigation #navbar > ul > li.current-menu-item > a,
  .header-style-2 .navigation #navbar .current-menu-ancestor > a,
  .header-style-2 .navigation #navbar .current-menu-parent > a,
  .site-header #navbar ul a:hover { color: #b84f00; }
}
@media (max-width: 767px) {
  .pg-title-btm-menu li.current a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
}
.latest-projects .gallery-grid .gallery-button.color li a.active { color: #a34600; }
.careers-section .job-header .date { color: #5f646b; }
.blog-s2-grids .entry-date { color: #666; }
.blog-sidebar .tag-widget .all-tags a { color: #5c5c5c; }
.blog-details-page .blog-single-content .post-title-meta ul li a { color: #666; }
.blog-details-page .blog-single-content .comments .article .date span { color: #666; }
.blog-details-page .blog-single-content .tag-share .share li:nth-child(2) a { background-color: #1a6fa3; }

/* Team: names and roles always visible as a caption bar (were hover-only overlays). */
.team-section .member-details { top: auto; bottom: 0; height: auto; opacity: 1; background-color: #15191f; padding: 12px 10px; }
.team-section .member-details .info { position: static; transform: none; }

/* Round 2 touch targets (inner pages) */
.latest-projects-s2 .grid h3 a, .latest-porjects-s3 .grid h3 a,
.careers-section .job-header h3 a,
.time-line-section .timeline-tab .tablist li a,
.blog-s2-grids .entry-footer .comments,
.blog-details-page .blog-single-content .post-title-meta ul li a,
.contact-section .contact-form ul li a { display: inline-block; min-height: 24px; line-height: 24px; }
.site-header .bottom-topbar .logo-holder a { display: inline-block; }
/* Phones: the three info items pushed the menu 430px down on inner pages. */
@media (max-width: 767px) {
  .site-header .bottom-topbar .bottom-topbar-info-wrapper { display: none; }
}
.team-section .member-details .social-links { position: static; transform: none; margin: 6px 0 0; }
.team-section .member-details .social-links li a { color: #fff; }
.careers-section .job-lists .job-header .date { color: #5f646b; }
/* Hero dots (phones/tablets): 24px hit area, same 14px dot drawn inside. */
@media (max-width: 991px) {
  .hero .slick-dots li, .hero .slick-dots li button { width: 24px; height: 24px; }
  .hero .slick-dots li button { border: 5px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px #fff; padding: 0; }
}
.latest-projects .gallery-grid .gallery-button li a { display: inline-block; min-height: 24px; line-height: 24px; }
.blog-sidebar .recent-post-widget .details h4 a { display: inline-block; min-height: 24px; }
.site-footer { padding-bottom: 0; }
@media (max-width: 767px) {
  .site-footer .mdix-copyright { padding: 22px 0 70px; }
}
/* Avatar is hidden, so centre the name block (it kept 40–50px left padding and a 200px cap). */
.testimonial-section .client-info { padding-left: 0; max-width: 320px; }
.testimonials-s2-faq .client-info { padding-left: 0; }

/* Verifikasi ulang akhir 2026-10-13: keterangan data contoh */
.mdix-sample-note { display: block; width: 100%; margin: 16px 0 0; font-size: 13px; line-height: 1.4; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; text-align: center; }
.time-line-section .content > .mdix-sample-note { text-align: left; margin: 0 0 24px; }