/* Page-head inline <style> blocks captured from the live /otomotif page
   (https://www.softwareseni.co.id/otomotif). Loaded via <link precedence="page">.
   Generic whatsapp-sticky block + GTM async-hide are intentionally omitted
   (already vendored / not needed). */

body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ===== IX2 fade-up initial-opacity guards (from the first head <style>) =====
   Live hides these data-w-id elements until the IX2 entrance runs. We reveal
   them with the React <Reveal> component, but keep the initial-hide so there
   is no flash before the observer kicks in (mirrors the live media-query set). */
@media (min-width: 992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="ac122d74-c9f2-ab4d-6c6d-98b7c7a5d593"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="ac122d74-c9f2-ab4d-6c6d-98b7c7a5d598"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="f154f278-4817-1007-2dd2-d539967dac52"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af3f7"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af423"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="f154f278-4817-1007-2dd2-d539967dac54"] {
    opacity: 0;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="ac122d74-c9f2-ab4d-6c6d-98b7c7a5d593"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="ac122d74-c9f2-ab4d-6c6d-98b7c7a5d598"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="f154f278-4817-1007-2dd2-d539967dac52"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af3f7"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af423"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="f154f278-4817-1007-2dd2-d539967dac54"] {
    opacity: 0;
  }
}
@media (max-width: 767px) and (min-width: 480px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af3f7"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af423"] {
    opacity: 0;
  }
}
@media (max-width: 479px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af3f7"],
  html.w-mod-js:not(.w-mod-ix) [data-w-id="8807daf0-a335-4905-1ed7-7c2d883af423"] {
    opacity: 0;
  }
}

/* ===== page-specific style block (button + ALP sections + animations) ===== */
.rv-button-with-icon:hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg {
  width: 28px;
  height: 28px;
}
.rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg path {
  transition: fill 0.2s ease;
}
.rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon svg path {
  fill: #ffffff;
}

.alp-homepage-main-hero {
  background-blend-mode: normal, normal, multiply, normal;
}

.alp-hero-heading-typingx {
  animation: typing 15s steps(23, end) infinite, blink-caret 0.5s step-end infinite;
}

.alp-services-item .alp-services-bar {
  width: 0;
  opacity: 0;
}
.alp-services-item:hover .alp-services-bar {
  width: 125px;
  opacity: 1;
}
.alp-services-item:hover .alp-services-image {
  bottom: 30px;
}

.alp-trusted-slider-list .owl-item {
  text-align: center;
}

.alp-featured-slider-list .owl-stage-outer {
  overflow: visible;
}
.alp-featured-slider-list .owl-item:not(.center) .alp-featured-slider-text {
  display: none;
}
.alp-featured-slider-list .owl-item:not(.center) .alp-featured-slider-item {
  transform: perspective(500px) rotateY(20deg) translateX(190px);
}
.alp-featured-slider-list .owl-item.center ~ .owl-item .alp-featured-slider-item {
  transform: perspective(500px) rotateY(-20deg) translateX(-190px);
}
.alp-featured-slider-nav-arrows button {
  background-color: transparent;
}

.rv-blog-post-item .rv-blog-post-item-image-wrapper {
  overflow: hidden;
}
.rv-blog-post-item:hover .rv-blog-post-item-image-wrapper {
  border-color: #4cc7c3;
}
.rv-blog-post-item:hover .rv-blog-post-item-image {
  transform: scale(1.2);
}
.rv-blog-post-item:hover .rv-blog-post-item-title {
  color: #4a748B;
}

.rv-partnership {
  background-color: #f4f9f9;
}

@media (max-width: 479px) {
  .alp-featured-slider-list .owl-item:not(.center) .alp-featured-slider-item {
    transform: perspective(500px) rotateY(20deg);
  }
  .alp-featured-slider-list .owl-item.center ~ .owl-item .alp-featured-slider-item {
    transform: perspective(500px) rotateY(-20deg);
  }
}

@keyframes typing {
  from,
  to {
    width: 0;
  }
  40% {
    width: 100%;
  }
  60% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #969bab;
  }
}

/* ===== navbar style block (.rv-main-navbar-style, scoped scroll states) ===== */
.rv-main-navbar .rv-button-with-icon:hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-main-navbar .rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg {
  width: 28px;
  height: 28px;
}
.rv-main-navbar .rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-main-navbar .rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg path {
  transition: fill 0.2s ease;
}
.rv-main-navbar .rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon svg path {
  fill: #ffffff;
}

.rv-main-hamburger .rv-main-hamburger-content {
  max-height: calc(100vh - 100px);
  overflow-y: scroll;
}

.rv-main-hamburger-mobile.show {
  right: -340px;
}
.rv-main-hamburger-mobile .rv-main-hamburger-mobile-content {
  max-height: calc(100vh - 65px);
  overflow-y: scroll;
}

.rv-main-navbar-nav.scrolled {
  background-color: #fff;
  box-shadow: 0px 5px 40px rgba(10, 10, 10, 0.1);
}
@media (min-width: 768px) {
  .rv-main-navbar-nav.scrolled {
    padding: 12px 20px;
  }
}

.rv-main-navbar-nav.scrolled .rv-main-navbar-hire-us-button-wrapper .rv-button {
  background-color: #f4cd0c;
  border-color: #f4cd0c;
}

.rv-main-navbar-nav.scrolled .rv-main-navbar-logo-dark {
  opacity: 0;
}
.rv-main-navbar-nav:not(.scrolled) .rv-main-navbar-logo-light {
  opacity: 0;
}
.rv-main-navbar-nav:not(.scrolled) .rv-main-navbar-menu-item,
.rv-main-navbar-nav:not(.scrolled) .rv-main-navbar-hire-us-button-wrapper .rv-button-text {
  color: #fff;
}
.rv-main-navbar-nav:not(.scrolled) .rv-main-navbar-menu-item:hover {
  color: #00afaa;
}
.rv-main-navbar-nav:not(.scrolled) .rv-main-navbar-hire-us-button-wrapper .rv-button {
  border: 1.5px solid #fff;
}
.rv-main-navbar-nav:not(.scrolled) .rv-main-navbar-hire-us-button-wrapper .rv-button:hover {
  background-color: #f4cd0c;
  border: 1.5px solid #f4cd0c;
}
.rv-main-navbar-nav:not(.scrolled) .rv-main-navbar-hire-us-button-wrapper .rv-button:hover .rv-button-text {
  color: #10405a;
}

.rv-main-hamburger .rv-main-hamburger-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.rv-main-hamburger .rv-main-hamburger-content::-webkit-scrollbar {
  display: none;
}

/* ===== rv-partnership floating gradient (page-specific embed) ===== */
.rv-partnership .rv-button-with-icon:hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-partnership-floating {
  background: radial-gradient(100% 260.48% at 0% 100%, #16A29F 0%, #13B4A2 100%);
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.05), -10px 0px 40px rgba(0, 0, 0, 0.05);
}

/* ===== Shared-chrome suppression (parallel-safe, guarded) =====
   This route renders its OWN navbar (the `automotive-lp` variant) and its OWN
   `rv-partnership` band (page-specific `alp-partnership` copy). The root layout
   renders the shared `.rv-main-navbar`, `.whatsapp-chat-sticky`, and a shared
   `Footer` (partnership + address + footer). Hide the shared navbar, whatsapp
   widget, and the shared partnership band so only this page's own versions show.
   We KEEP the shared `.rv-footer-address` + `.rv-footer` (identical to live).
   Guarded by body:has(.ss-otomotif-page) so these rules never leak to other
   routes (this stylesheet is hoisted to <head> with precedence and persists
   across client-side navigation). */
/* Hide the SHARED navbar (the layout Header) but NOT this page's own navbar,
   which also carries .rv-main-navbar plus the .ss-otomotif-page marker. */
body:has(.ss-otomotif-page) .rv-main-navbar:not(.ss-otomotif-page) {
  display: none !important;
}
body:has(.ss-otomotif-page) .whatsapp-chat-sticky { display: none !important; }
/* Hide ONLY the shared partnership band (the one the layout Footer renders),
   not this page's own (marked with .alp-partnership-section). */
body:has(.ss-otomotif-page) .rv-partnership:not(.alp-partnership-section) {
  display: none !important;
}

/* Trusted-by: single-row, infinite logo marquee (replaces owl autoplay loop;
   nav:false). The list (7 logos) is duplicated to 14 items and scrolled left
   forever; translating by one copy's width (-50%) lands on an identical frame,
   so the loop is seamless. The double-class selector beats webflow's
   `.alp-trusted-slider-list { flex-wrap:wrap; width:100% }`, which would
   otherwise wrap the row. Each item is a fixed 170px box (120px logo + gap) so
   -50% maps to exactly 7 items — no jitter at the loop point. */
.alp-trusted-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.alp-trusted-slider-list.alp-trusted-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  column-gap: 0;
  row-gap: 0;
  justify-content: flex-start;
  align-items: center;
  animation: alp-trusted-scroll 30s linear infinite;
}
.alp-trusted-slider-list.alp-trusted-track .alp-trusted-slider-item {
  flex: 0 0 170px;
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes alp-trusted-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .alp-trusted-slider-list.alp-trusted-track { animation: none; }
}