/* MDIX Korporat Korporat — template-specific fixes */

/* Client strip: the theme shipped blank grey "sample" pills; show client names as wordmarks. */
.mdix-client {
  display: inline-block;
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5f6b7a;
  white-space: nowrap;
}

/* Footer: the logo has dark text, so give it a light plate on the dark background. */
footer .in-header-logo .uk-logo img {
  background: #fff;
  padding: 6px 10px;
  border-radius: 4px;
}

/* On phones/tablets show client names two per row instead of a long single column. */
@media (max-width: 959px) {
  .uk-grid:has(> * > .mdix-client) > * {
    width: 50%;
  }
}

/* ---- Design QA 2026-10-13 ---- */

/* CLS: the phone-menu modal is plain markup until UIkit adds .uk-modal, so it rendered
   (≈750px tall) inside the header on desktop for the first frame. Hide it until init. */
#mobile-nav-modal:not(.uk-modal) { display: none; }

/* CLS: the navbar is only flex after UIkit adds .uk-navbar; before that left/right stacked (+50px). */
nav[data-uk-navbar] { display: flex; position: relative; }
/* CLS: slideshow had 0 height until UIkit measured it (16:9, min 310, max 420 in js/config.js). */
.in-slideshow .uk-slideshow-items { width: 100%; aspect-ratio: 16 / 9; min-height: 310px; max-height: 420px; }

/* Contrast (WCAG AA). Theme greys #8f8f8f/#999/#bcbcbc on white = 1.9–3.2:1 → #666 (5.7:1). */
html,
.uk-card-default,
.uk-text-lead,
.uk-card-default .uk-card-title,
.uk-article-meta,
.uk-comment-meta,
.uk-form-label,
.uk-link-muted a, a.uk-link-muted,
.uk-description-list > dt,
.uk-table th,
.uk-nav-default > li > a,
.uk-nav-default .uk-nav-sub a,
.uk-search-input,
.uk-input, .uk-select, .uk-textarea { color: #666; }
.uk-input::placeholder, .uk-textarea::placeholder, .uk-search-input::placeholder { color: #707070; }
.uk-icon-link { color: #6b6b6b; }
.uk-text-muted { color: #666 !important; }
/* Slide lead text on the dark slide panel: #808080 on #2f3640 = 3.1:1 → light grey 6.5:1. */
.in-slide-container .uk-slideshow-items li .uk-text-lead { color: #c3c8cf; }

/* Orange brand (#e47d2e) as text on white = 2.9:1 → darker shade #b35a14 (4.8:1) for text,
   filled buttons get the darker shade too (white text 4.8:1). On dark panels keep a light orange. */
a, .uk-link, .uk-button-secondary, .uk-button-link, .in-breadcrumb h2,
.uk-navbar-nav > li.uk-active > a, .uk-navbar-nav > li > a:hover,
.uk-nav-primary > li.uk-active > a { color: #b35a14; }
.uk-button-secondary { border-left-color: #b35a14; }
.uk-button-primary,
footer .uk-light .uk-button-primary { background-color: #b35a14; color: #fff; }
.uk-button-primary:hover, .uk-button-primary:focus,
footer .uk-light .uk-button-primary:hover { background-color: #94490f; color: #fff; }
.uk-light .uk-button-secondary,
.uk-light a.uk-button-secondary { color: #f2a65e; border-left-color: #e47d2e; }
/* Blue labels: white on #2788ed = 3.6:1 → #1a6fcf (5.0:1). */
.uk-label, footer .uk-light .uk-label { background-color: #1a6fcf; color: #fff; }
footer .uk-light .uk-label { font-size: 12px; }

/* Touch targets: slideshow dots 12px → 24px hit area with the same 12px visual square. */
.in-slideshow .uk-dotnav { margin-left: 0; }
.in-slideshow .uk-dotnav > * { padding-left: 0; }
.in-slideshow .uk-dotnav > * > * { width: 24px; height: 24px; padding: 6px; background-clip: content-box; }
.in-slide-container .uk-slidenav-container .uk-slideshow-nav { margin: 0 14px 0 0; }
/* Footer and sidebar text links were 17px tall on phones → at least 24px. */
footer .uk-list > li > a,
.uk-list > li > a { display: block; padding: 3px 0; min-height: 24px; box-sizing: border-box; }
.in-header-socials a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
/* Phone menu toggle: 44px minimum. */
.in-mobile-nav .uk-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Inner pages (design QA 2026-10-13) */
/* Rupiah prices are longer than "$10": keep them inside the 1/3 cards. */
.in-pricing .uk-card-header h4 { font-size: clamp(28px, 2.6vw, 36px); white-space: nowrap; margin-bottom: 6px; }
.in-pricing .uk-card-header h4 span.in-pricing-currency { font-size: 16px; top: -12px; margin-right: 2px; }
.in-pricing .uk-card-header .uk-label { color: #4f4f4f; }
/* Testimonial avatars are now photos: round them. */
.in-customer-card img[src*="in-testi-sample"] { border-radius: 50%; object-fit: cover; }
.in-customer-card blockquote { color: #666; }
.in-customer-card cite { color: #6b6b6b; }
/* Blog quote post (no seller photo any more) and link post contrast. */
.in-quote-post { background-color: #2f3640; }
.in-quote-post blockquote footer cite,
.in-quote-post blockquote footer::before { color: #c3c8cf; }
.in-link-post h3 a, .in-link-post .uk-text-truncate { color: #5c4a1e; }
/* Sign-in: dark logo on a dark photo → white plate like the footer. */
.uk-background-cover .in-header-logo .uk-logo img { background: #fff; padding: 6px 10px; border-radius: 4px; }
/* Masonry gallery photos keep their ratio when scaled. */
[data-uk-grid*="masonry"] img { height: auto; }
/* CLS: UIkit's lazy-image placeholder used the 138×72 attributes, then the SVG (138×43) loaded → header jumped 29px. */
.in-header-logo .uk-logo img { height: auto !important; }
/* Theme capitalises every word on buttons (Title Case reads wrong in Indonesian) → keep the authored case. */
.uk-button { text-transform: none; }
.in-icon-wrapper { flex-shrink: 0; }
/* More contrast fixes found on inner pages */
.uk-breadcrumb > * > * { color: #666; }
.uk-breadcrumb > :last-child > * { color: #333; }
.uk-label-warning { background-color: #b35a14; color: #fff; }
.uk-article-meta a { color: #555; }
.in-widget-category a, .in-widget-popular a, .in-widget-archive a { color: #666; }
.in-widget-popular a span { color: #b35a14; }
.in-pricing .uk-card-header p, .in-pricing .uk-card-body { color: #666; }
.in-pricing.in-pricing-highlight .uk-card-header .uk-label { background-color: #b35a14; color: #fff; }
.in-blog p.uk-article-meta span.uk-label { background-color: #b35a14; font-size: 12px; }
.in-widget-category li a, .in-widget-popular li a, .in-widget-archive li a { color: #666; }
.in-widget-popular li a span { color: #b35a14; }
.uk-comment-body a.uk-link-muted { color: #b35a14; }
/* Touch targets ≥ 24px on inner pages */
.uk-button-link, .uk-button-text { padding-top: 2px; padding-bottom: 2px; }
.uk-card a.uk-icon:not(.uk-icon-button) { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.in-colored-card .uk-card-body > a { display: block; padding: 2px 0; }
.in-widget-tag a { display: inline-block; padding: 2px 0; }
.in-widget-tag a .uk-label { display: inline-block; }
a.uk-link-reset.uk-text-small { display: inline-block; padding: 4px 0; }
.uk-flex .uk-margin-small-left p a { display: inline-block; padding: 2px 0; }
.uk-comment-body .uk-position-top-right { white-space: nowrap; }
.uk-comment-body .uk-position-top-right a { display: inline-block; padding: 2px 0; }
/* Sticky header showed the theme seller's icon logo (img/logo-alt.svg) → keep the MDIX logo, smaller. */
.in-sticky .in-header-logo { width: auto; height: auto; background: none; margin-top: 16px; }
.in-sticky .in-header-logo img { display: block; width: 110px; }
.in-link-post .uk-text-truncate { white-space: normal; }
/* Phone menu: grey links (#999 ≈ 2.8:1) → darker; sub-links get a 24px+ hit area. */
.uk-nav-primary > li > a { color: #4f4f4f; }
.uk-nav-primary > li.uk-active > a, .uk-nav-primary > li > a:hover { color: #b35a14; }
.uk-nav-primary .uk-nav-sub a { color: #666; display: block; padding: 4px 0; }
/* Phones: the service card squeezed its text into a ~150px column beside the icon → stack icon above text. */
@media (max-width: 639px) {
  .in-agivee-card .uk-grid-small > .uk-width-expand { width: 100%; flex: none; }
  .in-agivee-card .uk-card-body { padding: 24px 20px; }
}
.uk-label-success { background-color: #1e7a48; color: #fff; }