/* --- Custom Variables & Theme --- */
  :root {
    --showcase-road-overlap: 76px; /* Overlap grid stats ke atas video agar roda pas menempel di border-top */
    --showcase-desc-shift: 45px; /* Jarak menggeser teks deskripsi ke bawah mendekati pagination (desktop) */
  }

  /* --- GLOBAL GRID LAYOUT ALIGNMENT (1500px max-width) --- */
  .press-container,
  .footer-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Desktop / Monitor Besar (>= 1440px) */
  @media screen and (min-width: 1440px) {
    .press-container,
    .footer-container {
      padding-left: 190px !important;
      padding-right: 190px !important;
    }
  }

  /* Laptop (992px - 1439px) */
  @media screen and (max-width: 1439px) and (min-width: 992px) {
    .press-container,
    .footer-container {
      padding-left: 120px !important;
      padding-right: 120px !important;
    }
  }

  /* Tablet (max-width: 991px) */
  @media screen and (max-width: 991px) {
    .press-container,
    .footer-container {
      padding-left: 40px !important;
      padding-right: 40px !important;
    }
  }

  /* Mobile (max-width: 479px) */
  @media screen and (max-width: 479px) {
    .press-container,
    .footer-container {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }

  html,
  body {
    background-color: #000000 !important;
  }

  /* --- Mencegah FLEET & TACTIMOD Jadi 2 Baris --- */
  .hero-text-fleet,
  .hero-text-tactimod {
    white-space: nowrap !important;
  }

  /* --- GSAP Pinned Auto-Slide Stack (No DOM manipulation) --- */
  .hero-pin-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
  }

  .underground-pin-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    transform: translateY(100%); /* Mulai tersembunyi di bawah */
    transition: none !important; /* Mencegah bentrokan transisi CSS dengan GSAP */
  }

  /* ==============================================
     FIX TRANSPARANSI & KURSOR KUSTOM (CINEMATIC REVEAL)
     ============================================== */

  /* 1. Logo T di background. Opacity dikontrol oleh GSAP. */
  .underground-massive-t {
    /* Opacity dikontrol penuh oleh GSAP */
  }

  /* 2. Container Swiper & Panel. Opacity dikontrol oleh GSAP. */
  .underground-swiper-container {
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .underground-spec-panel {
    /* Opacity dikontrol penuh oleh GSAP */
  }

  /* 3. Padding slide dipertahankan 60px agar posisi konten tetap rapi di tengah. */
  .underground-pin-wrapper .swiper-slide {
    visibility: visible !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
  }

  /* 4. TOMBOL NAVIGASI SWIPER CUSTOM (PANAH DI KIRI & KANAN) */
  .underground-swiper-container .swiper-button-prev,
  .underground-swiper-container .swiper-button-next {
    color: #b21f27 !important; /* Warna Gold */
    background: none !important; /* Tanpa background */
    border: none !important; /* Tanpa border */
    box-shadow: none !important; /* Tanpa shadow */
    width: auto !important; /* Ukuran menyesuaikan konten */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 10 !important;
  }

  .underground-swiper-container .swiper-button-prev::after,
  .underground-swiper-container .swiper-button-next::after {
    font-size: 32px !important;
    font-weight: bold !important;
  }

  .underground-swiper-container .swiper-button-prev {
    left: 20px !important;
  }

  .underground-swiper-container .swiper-button-next {
    right: 20px !important;
  }

  .underground-swiper-container .swiper-button-prev:hover,
  .underground-swiper-container .swiper-button-next:hover {
    color: #ffffff !important;
    transform: scale(1.2) !important;
  }

  .underground-swiper-container .swiper-button-disabled {
    opacity: 0.15 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: scale(0.9) !important;
  }

  /* 5. SOLUSI UTAMA LOGO T TEMBUS:
     Warna background solid (#262626) pada foto mobil. */
  .underground-pin-wrapper .img-left,
  .underground-pin-wrapper .img-right {
    opacity: 1 !important;
    background-color: #262626 !important;
    mix-blend-mode: normal !important;
  }

  /* 6. PENCEGAHAN KLIPING LOGO SEAMLESS */
  .hero-content-wrap,
  .view-a-heading,
  .grid-col-center {
    overflow: visible !important;
  }

  /* Kursor berkedip Typed.js */
  .typed-cursor {
    color: #b21f27;
    opacity: 1;
    animation: blink 0.7s infinite;
  }

  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* ==============================================
     SECTION 3 & 4: VAULT DOOR & MRO SHOWCASE STYLE
     ============================================== */

  /* Pintu Vault Terbelah (Section 3) */
  .vault-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    display: none;
  }

  .t-half-left,
  .t-half-right {
    position: absolute;
    inset: 0;
    background-image: url('../cdn.prod.website-files.com/6a1c6408b320862ea490a332/6a22bfff0c898281e46dd40d_Frame%20639.svg') !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  .t-half-left {
    clip-path: inset(0 50% 0 0);
  }

  .t-half-right {
    clip-path: inset(0 0 0 50%);
  }

  /* Section 4 Wrapper (MRO Showcase) */
  .section-four-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 103vh;
    z-index: 1;
    background-color: #000000 !important;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 12vh 40px 60px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  .section-four-wrapper > .w-embed {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 5vh !important;
    flex-shrink: 0 !important;
  }

  .section-four-wrapper.active {
    z-index: 4;
    opacity: 1;
    pointer-events: auto;
  }

  /* Judul & Flashing Dot */
  .mro-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 5vh;
  }

  .mro-title-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    text-transform: uppercase;
  }

  .mro-flashing-dot {
    font-size: 32px;
    color: #b21f27;
    animation: mro-dot-flash 1.2s infinite ease-in-out;
  }

  @keyframes mro-dot-flash {
    0%,
    100% {
      opacity: 0.2;
    }
    50% {
      opacity: 1;
    }
  }

  /* Layout 2 Kolom MRO */
  .mro-showcase-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    height: auto;
    min-height: 50vh;
    margin-bottom: 4vh;
    gap: 60px;
  }

  /* Kolom Kiri - Teks List */
  .mro-left-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Menjaga teks tetap di tengah secara vertikal */
    gap: 12px;
    position: relative;
    padding-left: 45px !important;
    z-index: 10;
    background-color: #000000;
    align-self: stretch; /* Meregangkan kolom kiri dari atas sampai bawah agar menutup video sepenuhnya */
  }

  .mro-scroll-line-container {
    position: absolute !important;
    left: 15px !important;
    top: 0;
    bottom: 0;
    width: 2px !important;
    pointer-events: none !important;
    display: block !important;
  }

  .mro-scroll-line-bg {
    width: 1px !important;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .mro-scroll-line-progress {
    width: 1.5px !important;
    height: 0;
    background-color: #b21f27 !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 0 4px rgba(178, 31, 39, 0.4) !important;
  }

  .mro-scroll-marker {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #b21f27 !important;
    left: 50% !important;
    margin-left: -4px !important;
    margin-top: -4px !important;
    top: 0;
    box-shadow: 0 0 8px rgba(178, 31, 39, 0.8) !important;
  }

  .mro-text-item {
    opacity: 0.5;
    transform: translateY(0);
    transition:
      opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
      transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .mro-text-item.active {
    opacity: 1;
  }

  /* Kolom Kanan - Pinned Blueprints */
  .mro-right-col {
    width: 45%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .mro-right-col::before,
  .mro-right-col::after,
  .mro-video-wrapper::before,
  .mro-video-wrapper::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: rgba(178, 31, 39, 0.4);
    border-style: solid;
    pointer-events: none;
    z-index: 10;
  }

  .mro-right-col::before {
    top: 0;
    left: 0;
    border-width: 1.5px 0 0 1.5px;
  }
  .mro-right-col::after {
    top: 0;
    right: 0;
    border-width: 1.5px 1.5px 0 0;
  }
  .mro-video-wrapper::before {
    bottom: 0;
    left: 0;
    border-width: 0 0 1.5px 1.5px;
  }
  .mro-video-wrapper::after {
    bottom: 0;
    right: 0;
    border-width: 0 1.5px 1.5px 0;
  }

  .mro-video-wrapper {
    position: relative;
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mro-video-item,
  .mro-video-item-active {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(0.95);
    transition:
      opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
      transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
  }

  .mro-video-item {
    opacity: 0;
  }

  .mro-video-item-active,
  .mro-video-item.active {
    opacity: 1;
    transform: scale(1);
  }

  /* Skala & potongan khusus di desktop/tablet agar selaras */
  @media screen and (min-width: 768px) {
    .mro-video-item[data-index="1"] {
      clip-path: inset(8.5% 22% 17.3% 22%) !important;
    }
    .mro-video-item[data-index="2"] {
      transform: scale(0.85) translateY(120px) !important; /* Nilai scale desktop diubah ke 0.8 agar ukuran tangki selaras */
    }
  }

  /* Centered Paragraph di Bawah */
  .mro-centered-text-wrap {
    width: 90%;
    max-width: 850px;
    text-align: center;
    border-top: 1px solid rgba(178, 31, 39, 0.15);
    padding-top: 3.5vh;
  }

  .mro-bottom-centered-text {
    font-family: 'Raleway', sans-serif !important;
    color: #d9d9d9 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    letter-spacing: 0.5px;
  }

  /* ==============================================
     INTERACTIVE VEHICLE SHOWCASE STYLE (SECTION 5)
     ============================================== */
  .vehicle-showcase-section {
    background-color: #000000 !important;
    color: #ffffff !important;
    position: relative;
    width: 100% !important;
    overflow: hidden;
  }

  /* --- Pembungkus Konten Showcase (Membatasi Lebar & Posisi Tengah) --- */
  .vehicle-showcase-container {
    width: 90% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* --- Visual Wrapper (Wadah Video) --- */
  .showcase-visual-wrap {
    position: relative !important;
    width: 100% !important;
    height: 420px !important; /* Tinggi default desktop */
    overflow: hidden !important;
    background-color: transparent !important; /* Dibuat transparent agar tidak menutupi teks saat overlap */
    margin-top: calc(-40px - var(--showcase-desc-shift)) !important; /* Tarik visual wrap ke atas untuk kompensasi pergeseran teks */
    margin-bottom: 5px !important; /* Jarak bawah diperkecil */
    z-index: 1 !important; /* Set stack order di bawah teks deskripsi */
  }

  /* Responsive Visual Wrapper Height */
  @media screen and (max-width: 991px) {
    .showcase-desc-text {
      margin-top: 0px !important; /* Reset pergeseran teks di tablet/mobile */
    }
    .showcase-visual-wrap {
      height: 280px !important;
      margin-top: 0px !important; /* Reset overlap di tablet/mobile */
    }
  }
  @media screen and (max-width: 767px) {
    .showcase-visual-wrap {
      height: 200px !important;
      margin-top: 0px !important;
    }
  }
  @media screen and (max-width: 479px) {
    .showcase-visual-wrap {
      height: 150px !important;
      margin-top: 0px !important;
    }
  }

  /* --- Video Embed Items --- */
  .vehicle-video-item {
    position: absolute !important;
    top: 40px !important; /* Menggeser video turun 40px agar area overlap di atas bersih dan transparan */
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 40px) !important; /* Kompensasi tinggi agar video tidak terpotong di bawah */
    display: none; /* Menggunakan display: none agar tidak memakan memori browser */
    align-items: center !important;
    justify-content: center !important;
    opacity: 0; /* Mulai tersembunyi */
    pointer-events: none;
    /* transform dihapus dari stylesheet CSS agar tidak crash saat rendering ulang GSAP */
    transition: none !important;
  }

  .vehicle-video-item.active {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
  }

  .showcase-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* --- Top Page Indicator (Segmen garis dinamis di atas video) --- */
  .showcase-page-indicator {
    position: absolute !important;
    top: 100px !important; /* Berada di atas video (sesuai setting manual Anda) */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  .indicator-dash {
    width: 25px !important;
    height: 2px !important;
    background-color: rgba(255, 255, 255, 0.15) !important; /*/ Abu-abu redup */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }

  .indicator-dash.active {
    background-color: #ffffff !important; /*/ Aktif menyala putih */
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6) !important;
  }

  /* --- Stats Grid & Cards --- */
  .showcase-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 5 !important; /* Supaya border-top berada di atas visual wrap */
    margin-top: calc(-1 * var(--showcase-road-overlap)) !important; /* Overlap ke area video agar roda pas menempel */
  }

  @media screen and (max-width: 991px) {
    :root {
      --showcase-road-overlap: 52px;
    }
    .vehicle-video-item {
      top: 0px !important;
      height: 100% !important;
    }
    .showcase-page-indicator {
      top: 20px !important;
    }
  }

  @media screen and (max-width: 767px) {
    :root {
      --showcase-road-overlap: 37px;
    }
    .showcase-stats-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 20px !important;
    }
    .showcase-page-indicator {
      top: 15px !important;
    }
  }

  @media screen and (max-width: 479px) {
    :root {
      --showcase-road-overlap: 28px;
    }
    .showcase-page-indicator {
      top: 10px !important;
    }
  }

  .showcase-stat-card {
    display: flex !important;
    flex-direction: column !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important; /* Garis jalan */
    padding-top: 20px !important; /* Jarak dari garis ke teks statistik */
    border-left: none !important; /* Dihapus divider vertical */
    padding-left: 0 !important; /* Padding kiri di-reset agar rapi sejajar */
    box-sizing: border-box !important;
  }

  .showcase-stat-label {
    margin-top: auto !important; /* Memaksa seluruh label sejajar lurus di paling bawah */
    padding-top: 8px !important; /* Jarak aman di atas label */
  }
  
  .showcase-stat-value,
  .showcase-price-value {
    height: auto !important; /* Menghilangkan batasan tinggi agar teks tidak bertumpuk */
    min-height: 0 !important;
  }

  /* Ukuran font khusus untuk TACTIMOD price (TBD - BASED ON REQUIREMENTS) agar rapi */
  .is-tactimod-price {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  @media screen and (max-width: 479px) {
    .is-tactimod-price {
      font-size: 18px !important;
    }
  }

  /* --- Spacing & Typography for Stats Grid --- 
     NOTE: We removed font-family, sizes, margins, and line-heights from here 
     so that they are NOT locked by CSS. You can edit them 100% natively in Webflow Designer! */

  /* --- Categories Wrap (Button Grid) --- */
  .showcase-categories-wrap {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
    position: relative !important;
    width: 100% !important;
  }

  @media screen and (max-width: 991px) {
    .showcase-categories-wrap {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }
  @media screen and (max-width: 479px) {
    .showcase-categories-wrap {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
    }
  }

  .category-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 20px !important;
    border: 3px solid #36332f !important;
    background-color: rgba(255, 255, 255, 0.01) !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .category-btn:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
  }

  .category-btn.active {
    border-color: #b21f27 !important; /*/ Gold */
    background-color: rgba(178, 31, 39, 0.05) !important;
    color: #ffffff !important;
  }

  /* Mencegah warna text macet */
  .category-btn-text,
  .category-btn > div {
    color: inherit !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    white-space: nowrap !important;
  }

  /* --- Sliding Underline Indicator --- */
  .showcase-indicator-line {
    position: absolute !important;
    height: 2px !important;
    background-color: transparent !important; /*/ Dibuat transparan agar kontainer luar tidak memiliki garis tajam */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
  .showcase-indicator-line::after {
    content: '' !important;
    position: absolute !important;
    left: 15px !important; /*/ Geser ke dalam 15px agar tidak menembus lengkungan border */
    right: 15px !important; /*/ Geser ke dalam 15px agar tidak menembus lengkungan border */
    top: 0 !important;
    bottom: 0 !important;
    background-color: #b21f27 !important; /*/ Warna emas indikator aktif */
    border-radius: 2px !important; /*/ Sudut ujung garis dibuat membulat halus */
  }

  /* ==============================================
     FIX UNTUK KONTEN SCROLLABLE DI BAWAH SECTION 4
     ============================================== */
  .normal-content-wrapper {
    position: relative !important;
    z-index: 5 !important; /*/ Harus lebih tinggi dari section-four-wrapper (z-index: 4) */
    width: 100% !important;
    background-color: #000000 !important; /*/ Solid background hitam agar tidak tembus */
    box-sizing: border-box !important;
  }

  /* Centering Showcase Desc Text & Header Wrap */
  .showcase-header-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 8 !important; /*/ Agar teks deskripsi berada di atas video */
  }

  .showcase-desc-text {
    text-align: center !important;
    max-width: 850px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--showcase-desc-shift) !important; /*/ Geser teks deskripsi ke bawah mendekati pagination */
  }

  /* --- HIDE DEFAULT SCROLLBARS FOR A CLEANER LOOK --- */
  ::-webkit-scrollbar {
    display: none !important;
  }
  html {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* ========================================================
     RESPONSIVE OVERRIDES (MOBILE & TABLET BREAKPOINTS)
     ======================================================== */
  @media screen and (max-width: 991px) {
    .category-btn {
      padding: 10px 12px !important;
    }
    .category-btn-text,
    .category-btn > div {
      font-size: 11px !important;
    }
  }

  @media screen and (max-width: 767px) {
    /* --- SECTION 1: HERO MOUNTAINS MOBILE FIX --- */
    .hero-text-fleet,
    .hero-text-tactimod {
      font-size: 6vw !important; /*/ Mencegah teks meluber keluar layar HP */
    }

    /* --- SECTION 4: MRO SHOWCASE VERTICAL STACK --- */
    .mro-title-text {
      font-size: 20px !important; /*/ Mengecilkan judul utama di HP */
    }

    /* Tumpuk susunan kolom kiri-kanan menjadi atas-bawah (vertikal) */
    .mro-showcase-container {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      gap: 3rem !important; /*/ Jarak antara teks atas dan animasi bawah */
    }

    /* Kolom kiri (Teks 3 Section) berada di atas sebagai viewport vertical slider */
    .mro-left-col {
      width: 100% !important;
      padding-left: 20px !important; /*/ Ruang aman dipersempit agar teks lebih mepet ke kiri */
      padding-right: 4px !important; /*/ Tambah ruang aman kanan agar teks tidak melebihi batas layar */
      overflow: hidden !important;
      position: relative !important;
      height: 200px !important; /*/ Fixed height to prevent JS layout bugs */
      gap: 0px !important; /*/ Prevent gap-induced layout drift on translation */
      justify-content: flex-start !important; /*/ Mencegah centering flexbox yang menyembunyikan item pertama */
    }

    /* Tiap teks spesifikasi menempati tinggi penuh slider */
    .mro-text-item {
      width: 100% !important;
      height: 150px !important; /*/ Must match parent container */
      flex-shrink: 0 !important; /*/ Prevent flexbox from shrinking the height to fit the viewport */
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 0.5;
      transform: translateY(0);
      transition: opacity 0.4s ease-in-out !important;
    }

    .mro-text-item.active {
      opacity: 1 !important;
    }

    /* Kolom kanan (Animasi Blueprint) otomatis turun di bawah teks dan berukuran besar */
    .mro-right-col {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 9 !important; /*/ Menjaga rasio video besar memenuhi lebar layar */
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      position: relative !important;
      margin-top: 10px !important;
    }

    /* Pastikan video wrapper dan canvas terisi penuh mengikuti pembatas */
    .mro-video-wrapper {
      width: 100% !important;
      height: 100% !important;
      position: relative !important;
    }

    .mro-canvas-element {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
    }

    /* Memaksa skala tank di HP agar tampil 1.5x lebih besar mengisi frame */
    .mro-video-item,
    .mro-video-item-active {
      width: 100% !important;
      height: 100% !important;
      transform: scale(1.5) !important; /*/ Diperbesar dari 1.25 ke 1.5 */
    }

    .mro-video-item[data-index="1"] {
      clip-path: none !important; /*/ Matikan efek pemotongan desktop pada mobile */
    }

    .mro-video-item[data-index="2"] {
      /* scale(1.05) untuk menyeimbangkan ukuran tangki dengan skala 1.5x baru */
      transform: scale(1.05) translateY(15px) !important; 
    }
    
    /* Sesuaikan ukuran font teks spesifikasi agar muat rapi di HP */
    .mro-item-title {
      font-size: 16px !important;
    }

    .mro-item-desc {
      font-size: 12px !important;
      line-height: 1.6 !important;
    }

    /* ============================================
       SECTION FOUR — MRO Showcase (responsive fix)
       Tujuan: judul + 3 blok teks + animasi blueprint
       muat & ke-center dalam layar
       ============================================ */

    /* 1. Section pembungkus — center vertikal, hapus padding atas yang kaku, kurangi padding kiri/kanan */
    .section-four-wrapper {
      justify-content: center !important;   /* sebelumnya flex-start */
      padding-top: 16px !important;         /* sebelumnya ~112px */
      padding-bottom: 16px !important;
      padding-left: 12px !important;        /*/ Kurangi padding kiri agar lebih mepet tepi layar */
      padding-right: 12px !important;       /*/ Kurangi padding kanan agar lebih mepet tepi layar */
    }

    /* 2. Container konten — jangan dorong animasi ke bawah; tinggi auto */
    .mro-showcase-container {
      justify-content: center !important;   /* sebelumnya space-between */
      height: auto !important;              /* sebelumnya ~642px terkunci */
      min-height: 0 !important;             /* sebelumnya 466px */
    }

    /* 3. Judul "REPA FLEET MRO MODERNIZATION" — rapatkan ke konten bawah */
    .section-four-wrapper .w-embed.w-script {
      margin-bottom: 1px !important;       /* sebelumnya 46.6px */
    }

    /* Hide flashing dot pada judul khusus di mobile */
    .mro-dot-container {
      display: none !important;
    }

    /* 4. Jalur track line indikator vertikal di mobile */
    .mro-scroll-line-container {
      position: absolute !important;
      left: 6px !important;                /*/ Digeser mepet ke tepi kiri */
      top: 50px !important;                /*/ Diturunkan agar sejajar dengan baris pertama teks/judul */
      width: 2px !important;
      height: 400px !important;            /*/ Tinggi track disesuaikan agar proporsional */
      display: block !important;
    }

    /* --- SECTION 2: MOBILE SWIPER FIX (PREVENT DRIFT & SQUISHED PADDING) --- */
    .underground-swiper-container .swiper-wrapper {
      gap: 0 !important;
      column-gap: 0 !important;
      row-gap: 0 !important;
      display: flex !important;
    }
    .underground-pin-wrapper .swiper-slide {
      padding-left: 40px !important;
      padding-right: 40px !important;
    }
  }