/* MDIX audit — agensi-kreatif */
/* Theme colour/cursor configurator (demo tooling). */
.tf-left-bar,
#settingColorMenu { display: none !important; }
/* Flat blue-grey placeholders that never got real artwork: globe, spotlight bars, the hero's
   first shape and the small floating box in the design card. (Cubes, shield, tool tiles and the
   design card were redrawn as real graphics in design-qa 2026-10-13 and are visible again.) */
.section-about-us .col-left > img,
.light-top,
.light-bot,
.section-hero .title-icon-wrap .img-1,
.benefits-design-inner .item-img-3 { visibility: hidden !important; }
/* Real photos replaced the flat placeholder backgrounds: veil them so the dark headline stays readable. */
.section-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(244, 246, 249, 0.78);
}
.section-hero .content-wrap { position: relative; z-index: 1; }
.section-contact .contact-image { position: absolute; }
.section-contact .contact-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(244, 246, 249, 0.72);
  pointer-events: none;
}

/* design-qa 2026-10-13 ------------------------------------------------------------------ */
/* AA contrast: theme grey #71717A was 4.40:1 on the light cards. */
.text-secondary { color: #5f5f67 !important; }
.process-card .number .text-neutral-400 { color: #52525b !important; }
.process-card .number .text-neutral-200 { color: #85858d !important; }
/* Phone menu button: 44px target (was 40px). */
.tf-header .mobile-menu { width: 44px; height: 44px; }
/* Featured-work facts: three narrow columns clipped "Pembersihan data & embedding" at 768–1199px. */
@media (min-width: 768px) and (max-width: 1199px) {
  .featured-works-item .content .grid-text { gap: 12px 20px; width: 62%; }
  .featured-works-item .content .grid-text .item:nth-child(1) { width: 38%; }
  .featured-works-item .content .grid-text .item:nth-child(2),
  .featured-works-item .content .grid-text .item:nth-child(3) { width: 31%; }
}
.featured-works-item .content .grid-text .item > div { overflow-wrap: break-word; }
/* Blog banner: dark title on a dark desk photo -> light veil like the other heroes. */
.section-page-title { position: relative; isolation: isolate; }
.section-page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 246, 249, 0.8);
  z-index: -1;
  pointer-events: none;
}
/* "8–10 minggu" estimate in the review box is real information now (was a faint decorative counter). */
.review-box .counter { color: #6b6b73 !important; }
/* work.html "Kenapa Jangan Menunda" bars: GSAP grows the dark bar from 15%, so the white label
   started on the light track. Label gets its own dark backing (same colour as the bar). */
.delay-item .delay-progress .progress-line { min-width: 150px; }
.delay-item .delay-progress .number-progress { background-color: #18181b; padding: 2px 6px; border-radius: 8px; }
/* Design card on phones: the theme hides the photo below 576px and leaves an empty white card.
   Keep the photo, centred on the card. */
@media (max-width: 575px) {
  .benefits-design .benefits-design-inner .item-img-2 { display: block; top: 48px; right: auto; left: 50%; margin-left: -115px; width: 230px; height: auto; border-radius: 12px; }
}
/* Tool tiles float around the heading; below 1200px they cover the text and the CTA -> hide there. */
@media (max-width: 1199px) {
  .section-tools > img { display: none !important; }
}
/* Floating scroll-top button (48px, right 20px) sat on "Kembali ke atas" at the end of the page. */
@media (min-width: 576px) {
  footer .footer-bottom { padding-right: 76px; }
}