/* MDIX Logistik Utama — per-template fixes (design QA 2026-10-12) */

/* Client logo carousel only held grey "97x65" placeholders. */
.home-clients-carousel, .home-clients-buttons, .home-clients-carousel-hline,
.home-clients-carousel-vline1, .home-clients-carousel-vline2 { display: none !important; }

/* Testimonials all reused one grey "40x40" placeholder avatar. */
img[src*="media/avatars/avatar1.png"] { display: none !important; }

/* ---------- Brand colour: theme cyan #00c0e2 fails AA with white text (2.18:1).
   The rules below are the theme colour scheme (css/blue.css) re-coloured to #007a94. ---------- */
a { color: #007a94; }
.color-primary { color: #007a94 !important; }
.with-square:before { background-color: #007a94; }
.my-btn-primary { border: 1px solid #007a94; background-color: #007a94; }
.my-btn-primary:hover { color: #007a94; }
.btn-primary { background-color: #007a94; border-color: #007a94; }
.btn-primary.disabled { background-color: #5a9fb0; }
.pagination .active a { background-color: #007a94; border-color: #007a94; }
.pagination .active a:hover, .pagination .active a:focus { background-color: #007a94; border-color: #007a94; }
.breadcrumb > li > a:hover, .breadcrumb > li > a:focus { color: #007a94; }
.breadcrumb > .active { color: #007a94; }
.my-blockquote-quote div { background-color: #007a94; }
.media-body-top .media-info .media-date { color: #007a94; }
.media-body-top .media-reply .my-btn-default { color: #007a94; border-color: #007a94; }
.media-body-top .media-reply .my-btn-default .my-btn-bg-top, .media-body-top .media-reply .my-btn-default .my-btn-bg-bottom { background-color: #007a94; }
.media-body-top .media-reply .my-btn-default:hover { border-color: #007a94; }
.cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool::after { border-left-color: #007a94; }
.top-bar { background-color: #007a94; }
.main-menu .navbar-nav > li > a:hover, .main-menu .navbar-nav > li > a:focus { color: #007a94; }
.main-menu .navbar-nav > li > a.active { color: #007a94; }
.main-menu .navbar-nav > li.active > a { color: #007a94; }
.main-menu .dropdown-menu { background-color: #007a94; }
.main-menu .dropdown-menu > li > a:hover, .main-menu .dropdown-menu > li > a:focus { color: #007a94; }
.main-menu .dropdown-menu > li > a.active { color: #007a94; }
.main-menu .dropdown-menu > li.active > a { color: #007a94; }
.main-menu .dropdown-menu:after { border-bottom-color: #007a94; }
.main-slider .my-btn-default { border-color: #007a94; }
.main-slider .my-btn-default .my-btn-bg-top, .main-slider .my-btn-default .my-btn-bg-bottom { background-color: #007a94; }
.service-mark { background-color: #007a94; }
.service-mark .my-btn-default .my-btn-bg-top, .service-mark .my-btn-default .my-btn-bg-bottom { background-color: #007a94; }
.service-mark-border-top { background-color: #007a94; }
.service-mark-border-right { background-color: #007a94; }
.service-mark-border-bottom { background-color: #007a94; }
.service-mark-border-left { background-color: #007a94; }
.section-bg-right { background-color: #007a94; }
.get-quote { background-color: #007a94; }
.home-review-carousel-quote div { background-color: #007a94; }
.stat-item-icon { background-color: #007a94; }
.stat-item-mark { background-color: #007a94; }
.home-blog-item-desc-info .comments-icon { color: #007a94; }
.home-blog-item-mark { background-color: #007a94; }
.home-blog-item-mark .home-blog-item-date { background-color: #007a94; }
.home-blog-item-mark .home-blog-item-desc { background-color: #007a94; }
.home-subscribe { background-color: #007a94; }
.home-subscribe-form-button .my-btn-primary { background-color: #3e4f59; }
.bottom .color-primary a { color: #007a94; }
.service-menu > li > a:hover, .service-menu > li > a:focus { background-color: #007a94; }
.service-menu > li.active > a { background-color: #007a94; }
.service-detail .service-related h3 a:hover, .service-detail .service-related h3 a:focus { color: #007a94; }
.about-text h2:before { color: #007a94; }
.team-item-image-overlay { background-color: #007a94; }
.team-item:hover .team-item-name { color: #007a94; }
.blog-item-info .author-icon { color: #007a94; }
.blog-item-info .date-icon { color: #007a94; }
.blog-item-title h3:before { background-color: #007a94; }
.blog-item-mark .blog-item-date { background-color: #007a94; }
.blog-right-bar-item:before { background-color: #007a94; }
.recent-post-date .date-icon { color: #007a94; }
.blog-categories li a:hover, .blog-categories li a:focus { color: #007a94; }
.blog-categories li.active a { color: #007a94; }
.blog-tags a.active { background-color: #007a94; }
.blog-tags a:hover, .blog-tags a:focus { background-color: #007a94; }
.single-post-date { background-color: #007a94; }
.single-post-info .author-icon { color: #007a94; }
.single-post-info .date-icon { color: #007a94; }
.single-post-title h3:before { background-color: #007a94; }
.single-post-author-info-socials .my-btn-default .my-btn-bg-top, .single-post-author-info-socials .my-btn-default .my-btn-bg-bottom { background-color: #007a94; }
.single-post-author-info-socials .my-btn-default:hover { border-color: #007a94; }
.single-post-comments h3:before { background-color: #007a94; }
.single-post-leave-comment h3:before { background-color: #007a94; }
.contacts-info-title { background-color: #007a94; }
.contact-details { background-color: #007a94; }
.contact-detail-mark .contact-detail-icon { color: #007a94; }
.contact-detail-mark .contact-detail-title h3:before { background-color: #007a94; }
.slide-menu .close-menu:hover { color: #007a94; }
.slide-menu .left-menu > li > a:hover, .slide-menu .left-menu > li > a:focus { color: #007a94; }
.home-blog-item-mark, .home-blog-item-mark .home-blog-item-date, .home-blog-item-mark .home-blog-item-desc,
.stat-item-mark, .service-mark, .get-quote, .section-bg-right, .home-subscribe, .contacts-info-title,
.contact-details, .single-post-date, .blog-item-mark .blog-item-date, .top-bar, .main-menu .dropdown-menu,
.stat-item-icon, .home-review-carousel-quote div, .my-blockquote-quote div,
.service-mark-border-top, .service-mark-border-right, .service-mark-border-bottom, .service-mark-border-left,
.team-item-image-overlay, .service-menu > li.active > a, .service-menu > li > a:hover, .service-menu > li > a:focus,
.blog-tags a.active, .blog-tags a:hover, .blog-tags a:focus { background-color: #007a94; }
.stat-item-mark .stat-item-icon { background-color: #3e4f59; }
.main-menu .dropdown-menu:after { border-bottom-color: #007a94; }
.main-menu .dropdown-menu > li > a:hover, .main-menu .dropdown-menu > li > a:focus,
.main-menu .dropdown-menu > li.active > a { color: #007a94; }
.home-blog-item-desc-info .comments-icon, .blog-item-info .author-icon, .blog-item-info .date-icon,
.recent-post-date .date-icon, .single-post-info .author-icon, .single-post-info .date-icon,
.media-body-top .media-info .media-date, .contact-detail-mark .contact-detail-icon,
.blog-categories li a:hover, .blog-categories li.active a, .team-item:hover .team-item-name { color: #007a94; }
.media-body-top .media-reply .my-btn-default { color: #007a94; border-color: #007a94; }
.home-subscribe-form-button .my-btn-primary { background-color: #3e4f59; border-color: #3e4f59; }
.home-subscribe-form-button .my-btn-primary:hover { color: #fff; }
/* Inputs inside the dark quote/comment forms: darker field, white text. */
.get-quote input[type=text], .get-quote textarea { background-color: #0b6f86; }
/* On dark backgrounds the bright brand cyan stays (contrast ≥ 3.9 on photos/overlay, ≥ 4.8 below). */
.main-navbar-1 .color-primary, .main-slider .color-primary, .page-header .breadcrumb > .active,
.page-header .breadcrumb > li > a:hover { color: #00c0e2 !important; }
.main-navbar-1 .main-menu .navbar-nav > li.active > a, .main-navbar-1 .main-menu .navbar-nav > li > a.active,
.main-navbar-1 .main-menu .navbar-nav > li > a:hover, .main-navbar-1 .main-menu .navbar-nav > li > a:focus { color: #00c0e2; }
.footer .color-primary, .bottom .color-primary, .bottom .color-primary a { color: #5fd3e8 !important; }
.footer a:hover, .footer a:focus { color: #5fd3e8; }

/* Text over photos: the dark overlays are painted as image layers (same look) and the
   transparent header over the hero/page header gets a soft top scrim for legibility. */
.main-slider-overlay { background-color: transparent; background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)); }
.page-header-overlay { background-color: transparent; background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)); }
.main-navbar-1 { background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)); }

/* Muted labels were #bfbfbf-ish (2.1:1). */
.team-item-position, .single-post-author-info-label { color: #5c6b74; }

/* Small print in the bottom bar and subscribe button. */
.bottom { font-size: 12px; }
.home-subscribe-form-button .my-btn-primary { font-size: 12px; }
.footer-3 a { display: inline-block; padding: 3px 0; }
.home-blog-item-desc-title a { display: inline-block; padding: 4px 0; }

/* ---------- Layout ---------- */
/* Hero: reserve the slider height before slider-pro initialises on window.load (CLS 0.5). */
#main-slider-1 { height: 50vw; overflow: hidden; }
#main-slider-2 { height: 42.1875vw; overflow: hidden; }
@media (max-width: 640px) {
  #main-slider-1 { height: 78.125vw !important; }
  #main-slider-2 { height: 57.8125vw; }
}
/* Hero button text fits its box. */
.main-slider .my-btn-primary { width: auto; min-width: 176px; white-space: nowrap; padding-left: 24px; padding-right: 24px; }
.page-header-button .my-btn-primary { width: auto; min-width: 176px; white-space: nowrap; padding-left: 20px; padding-right: 20px; }

/* Parallax (stellar.js) shifts the backgrounds out of view in many states; keep them still. */
.stats, .home-big-image, .page-header { background-position: center center !important; background-attachment: scroll !important; }

/* "Tentang Kami" photo that replaces the toy-truck video. */
.home-about-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Blog cards: two per row without float jams. */
@media (min-width: 992px) {
  .home-blog > .container > .row > .col-lg-6:nth-of-type(2n) { clear: left; }
}
.home-blog-item { margin-bottom: 30px; }
/* Services list (04): rows of three, no float jams. */
@media (min-width: 768px) {
  .services-1 .row > .col-lg-4:nth-of-type(3n+1) { clear: left; }
}

/* Team photos come in two aspect ratios. */
.team-item-image img { width: 100%; aspect-ratio: 170 / 151; object-fit: cover; }

/* Justified paragraphs in narrow columns left wide gaps (768). */
.home-about p, .get-quote p, .home-clients p, .about-text p, .service-1-text p, .service-2-text p,
.service-detail p, .service-related-text p, .blog-item-text p, .single-post-text p, .contacts-info-text,
.home-review-carousel-text p, .blog-about, .media-body, .single-post-author-info-text { text-align: left !important; }

/* Footer */
.footer h4.with-border-bottom { min-width: 100px; }
.footer-4-hours { padding-top: 7px; font-family: Montserrat; font-size: 14px; color: #fff; }
.footer-4-hours p { margin: 0 0 12px; line-height: 1.5; }
.footer-4-hours strong { color: #5fd3e8; font-weight: 400; }
.footer-3 a, .top-bar a, .contact-details a { color: #fff; text-decoration: none; }
.top-bar a:hover, .contact-details a:hover { text-decoration: underline; }
.footer-2-links a { display: inline-block; padding: 4px 0; }
.bottom-2 a { display: inline-block; margin: 2px 1px; }
/* Stat cards: equal height whether the label wraps or not. */
@media (min-width: 992px) { .stat-item { min-height: 120px; } }
.bottom-2 .my-btn { width: 40px; height: 40px; line-height: 40px; font-size: 16px; }
@media (min-width: 768px) and (max-width: 991px) {
  .bottom-2 .my-btn { width: 36px; height: 36px; line-height: 36px; }
}

/* Contact person avatar (real photo instead of grey placeholder). */
.contacts-info-people-avatar img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }

/* Map iframe (keyless embed instead of the seller's Maps API key). */
#contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Readability & touch targets ---------- */
.subtitle, .home-blog-item-date, .home-review-carousel-company, .single-post-date, .blog-item-date,
.media-body-top .media-info .media-date, .media-body-top .media-reply .my-btn-default { font-size: 12px !important; }
.home-blog-item-date-number, .single-post-date-number, .blog-item-date-number { font-size: 22px; }
.home-blog-item-date, .single-post-date, .blog-item-date { width: 48px; height: 50px; }
a:has(> .my-btn):not(.close-search), button:has(> .my-btn) { display: inline-block; }
.show-menu .my-btn, .show-search .my-btn, .close-search .my-btn { width: 44px; height: 44px; line-height: 44px; }
.home-blog-item-desc-info a, .blog-item-info a, .single-post-info a, .recent-post-date a,
.recent-post-title a, .blog-categories li a { display: inline-block; padding: 4px 0; min-width: 24px; }
.blog-tags a { min-height: 32px; }
.top-bar a, .contact-details a, .breadcrumb > li > a, .service-related-title a { display: inline-block; padding: 4px 0; }
.service-related-title a { padding: 6px 0; }
.team-item-icons a { display: inline-block; min-width: 32px; min-height: 32px; line-height: 32px; text-align: center; }
.team-item-position, .blog-tags a, .contacts-info-people-company { font-size: 12px !important; }

.close-menu { min-height: 44px; display: flex !important; align-items: center; justify-content: center; }
.slide-menu .left-menu > li > a { display: inline-block; padding: 4px 0; }
.slide-menu .left-menu .slide-menu-child a { display: inline-block; padding: 6px 0; }
@media (max-width: 768px) {
  .main-slider .my-btn-primary { font-size: 12px; padding: 10px 18px; min-width: 0; }
  .main-slider .my-btn-default { width: 32px; height: 32px; line-height: 30px; }
  .main-slider-buttons a, .main-slider-1-buttons a { display: inline-block; }
  .service-button .my-btn, .service-1-button .my-btn, .home-about-button .my-btn { min-height: 44px; }
}
@media (max-width: 767px) {
  .team-item-image { max-width: 260px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  /* Comments: avatar above the text instead of a 90px-wide text column. */
  .single-post-comments .media > .pull-left { float: none !important; margin: 0 0 15px; }
  .single-post-comments .media-body { display: block; width: auto; text-align: left; }
  .single-post-comments .media-heading { white-space: normal; }
  .main-slider .my-btn-primary { font-size: 12px; }
  /* 44px header buttons + logo must share one row at 360–390px. */
  .main-navbar .logo-text { font-size: 14px; padding: 15px 6px; }
  .main-navbar .logo-image img { max-width: 38px; height: auto; }
  .search-control, .show-menu-control { padding-right: 6px; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* 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; text-align: center; position: relative; z-index: 2; }
#home-stats .mdix-sample-note { color: #fff; }