/*
 Theme Name: MUF Corporate 2025
 Theme URI: https://www.muf.co.id
 Description: Theme for Mandiri Utama Finance 2025
 Author: Cakradigital
 Author URI: https://www.cakradigital.com
 Template: Divi
 Version: 1.0.0
*/
 
.top-nav, .top-nav-right {
    list-style: none;
    margin: 0;
    padding: 0!important;
    display: flex;
    align-items: center;
}

.top-nav li, .top-nav-right li {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.top-nav li:not(:last-child)::after, .top-nav-right li:first-child::after {
    content: '|';
    color: #DBDBDC;
    margin: 0 14px;
    font-size:20px;
}

.top-nav a, .top-nav-right a {
    text-decoration: none;
    padding: 12px 0;
    position: relative;
    color: #999;
}

.top-nav a.active, .top-nav a.visited {
    color: #003D79;
}

.top-nav a.active::after, .top-nav a:hover:not(.active)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 4px;
    background-color: #FFB700;
    border-radius: 2px;
}

.top-nav a:hover:not(.active), .top-nav-right a:hover, .top-nav-right img:hover {
    color: #003D79;
    font-weight: 600;
}

.top-nav-right {
    justify-content: flex-end;
}

.top-nav-right a {
    display: flex;
    align-items: center;  
    gap: 4px;            
    text-decoration: none;
    font-size: 14px;
}

.top-nav-right .svg-fill {
    width: 16px;
    height: 16px;
    flex-shrink: 0;     
}

.search-container {
    position: absolute;
    top: 0%;
    right: 0;
    background: white;
    border-radius: 10px;
    border: 1px solid #DBDBDC;
    padding: 0 10px;
    width: 300px;
    max-width: 90vw;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000!important;
}

.search-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}

.search-input-wrapper {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 15px 15px 15px 40px;
    border: none;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input:focus {
    border-color: #003D79;
    background-color: white;
}

.search-input::placeholder {
    color: #999;
    font-size: 14px;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

/* Hamburger Menu Button */
.hamburger-btn {
    background-color: #ffc107;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    position: relative;
}

.hamburger-btn:hover {
    background-color: #ffb300;
}

.hamburger-btn.active {
    background-color: #ffb300;
}

.hamburger-btn span {
    width: 18px;
    height: 2px;
    background-color: #000;
    border-radius: 2px;
    transition: all 0.3s ease;
    position: absolute;
}

.hamburger-btn span:nth-child(1) {
    top: 9px;
}

.hamburger-btn span:nth-child(2) {
    top: 15px;
}

.hamburger-btn span:nth-child(3) {
    top: 21px;
}

.hamburger-btn.active span:nth-child(1) {
    top: 14px;
    transform: rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    top: 14px;
    transform: rotate(-45deg);
}

.sidebar-mobile-menu {
    position: fixed;
    left: 0;
    top: 90px;
    width: 100%;
    height: auto;
    background-color: #f8f8f8!important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 999;
    overflow-y: auto;
    max-height: 90vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 10px 0;
}

.sidebar-mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Menu Items */
.menu-section {
    border-bottom: 1px solid #e0e0e0;
}

.menu-section:last-child {
    border-bottom: none;
}

.menu-title {
    padding: 15px 20px;
    font-weight: 600;
    color: #003366;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.menu-title:hover {
    background-color: #f9f9f9;
}

.menu-title.active {
    background-color: #f0f0f0;
}

.arrow {
    transition: transform 0.3s ease;
    color: #999;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-title.active .arrow {
    transform: rotate(180deg);
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #f9f9f9;
}

.submenu.active {
    max-height: 500px;
}

.submenu-item {
    padding: 12px 20px 12px 40px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-left: 3px solid transparent;
}

.submenu-item:hover {
    background-color: #efefef;
    border-left-color: #ffc107;
}
/*end hamburger*/



.et_pb_column.header-col-1 {
    width: 8% !important;
}
.et_pb_column.header-col-2 {
    width: 70% !important;
}
.et_pb_column.header-col-3 {
    width: 16% !important;
}
.et_pb_menu .et-menu-nav>ul ul {
    padding: 20px 0 0 0;
    width: 250px;
}
.nav li li {
    padding: 0;
    margin: 0;
}
.nav li li:not(:last-child) {
    border-bottom: 1px solid #DBDBDC;
}
.et-menu li li a {
    width: 250px;
    padding: 8px 15px;
}
.et-menu li li a:hover {
    background-color: #E5ECF2;
    color: #003D79!important;
}
.home-menu-simulasi:hover {
    background-color: #E5ECF2;
}
.et-menu li li:last-child a:hover {
    background-color: #E5ECF2;
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
}
.et-menu a {
    color: #5C5C5C;
}
.et_pb_menu_0_tb_header.et_pb_menu ul li a:hover, #menu-menu-korporasi-id .et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li.current-menu-item a {
    color: #003D79!important;
}
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
    box-shadow: none;
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
}
.et_mobile_menu li a, .nav li li a {
    -webkit-transition: none;
    transition: none;
}

.contact-info {
    list-style: none;
    margin: 0;
    padding: 0!important;
    border-radius: 8px;
    font-family: Arial, sans-serif;
}

.contact-info li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 16px;
    color: #003D79;
}

.contact-info li:last-child {
    margin-bottom: 0;
}

.contact-info .icon {
    width: 22px;
    height: 22px;
    margin-right: 12px;
    flex-shrink: 0;
}

.contact-info .text {
    font-weight: 500;
    color: #003D79;
}

.footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0!important;
}
.footer-menu ul li a, .contact-info.mona a, .contact-info.mona .text {
    color: #333333!important;
}
.sosmed img {margin-right: 4px;}
#simulasi-home {
    box-shadow: 1px 3px 10px 0 rgba(11, 24, 38, 0.10);
}
.et_pb_main_blurb_image {
    margin-bottom: 14px;
}
.simulasi-home-blurb .et_pb_blurb {
padding: 8px 24px;
border-radius: 12px;
border: 1px solid #809EBC;
}
.produk-1 {
 background: 
    linear-gradient(to bottom, transparent, #DBDBDC) right/1px 100% no-repeat,
    linear-gradient(to right, transparent, #DBDBDC) bottom/100% 1px no-repeat;
}
.produk-2 {
border-right: 1px solid;
border-image: linear-gradient(to bottom, transparent, #DBDBDC) 1;
border-bottom: 1px solid #DBDBDC;
}
.produk-3 {
border-bottom: 1px solid;
border-image: linear-gradient(to left, transparent, #DBDBDC) 1;
}
.produk-4 {
border-right: 1px solid #DBDBDC;
border-bottom: 1px solid #DBDBDC;
}
.produk-5 {
border-right: 1px solid;
border-image: linear-gradient(to top, transparent, #DBDBDC) 1;
}
.produk-6 {
  background: 
    linear-gradient(#DBDBDC, #DBDBDC) right/1px 100% no-repeat,
    linear-gradient(to right, transparent, #DBDBDC) bottom/100% 1px no-repeat;
}
.produk-1:hover, .produk-2:hover, .produk-3:hover, .produk-4:hover, .produk-5:hover, .produk-6:hover {
    background: #FFF;
box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.24);
}
.home-produk ul {
    list-style: none;
    margin: 0;
    margin-top: 10px;
    padding: 0!important;
}
.home-produk ul li {
    margin-bottom: 10px;
}
.home-produk ul li a {
    color: #003D79!important;
}


/*slider*/
.slider-navigation {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.nav-btn {
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 1px 3px 10px 0 rgba(11, 24, 38, 0.10);
    border: none;
}

.nav-btn:hover {
    background-color: #E5ECF2;
}

.nav-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 20px;
}

.slide {
    min-width: calc(25% - 15px);
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slide-image img {
    border-radius: 8px;
}

.slide-content {
    margin-top: 20px
}

.slide-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    overflow: hidden;
}

.slide-date {
    color: #5c5c5c;
    font-size: 16px;
}

.slide-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: #2c5aa0;
    transform: scale(1.3);
}

.indicator:hover {
    background: #4472ca;
    transform: scale(1.2);
}

.promo-text {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

.promo-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.2;
}

.layanan-konsumen-left, .vertical-column-middle {
    align-self: center;
}

/* Tablet styles */
@media (max-width: 1024px) {
    .slide {
        min-width: calc(33.333% - 13.33px);
    }
    
    .slider-container {
        padding: 25px;
    }
    
    .slider-title {
        font-size: 28px;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .slide {
        min-width: 100%;
    }
    
    .slider-title {
        font-size: 24px;
    }
    
    .slider-container {
        padding: 20px;
        margin: 10px;
    }
    
    .slider-header {
        margin-bottom: 20px;
    }
    
    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .slide-image {
        height: 240px;
    }
    
    .slide-title {
        font-size: 15px;
    }
    
    .promo-title {
        font-size: 16px;
    }
    
    .promo-subtitle {
        font-size: 11px;
    }
}

/* Progress bar */
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2c5aa0, #4472ca);
    transition: width 0.1s ease;
    border-radius: 0 3px 3px 0;
}

.slider-wrapper {
    position: relative;
}

.slider-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(44, 90, 160, 0.1);
    border-radius: 0 0 12px 12px;
}

/* Loading animation */
.slide-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(44, 90, 160, 0.1);
    border-top: 3px solid #2c5aa0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/*slider*/

/*home news*/
.news-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 1px 3px 10px 0 rgba(11, 24, 38, 0.10);
    display: flex;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.news-image {
    flex: 0 0 200px;
    height: 150px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-title {
    font-size: 18px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-date {
    font-size: 16px;
    color: #5c5c5c;
    font-weight: 400;
}

.news-highlight, .regular-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 1px 3px 10px 0 rgba(11, 24, 38, 0.10);
}

.regular-card {
    padding-bottom: 24px;
}

.news-highlight-content {
    padding: 16px;
}

.news-highlight-title {
    font-size: 20px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-highlight-date {
    font-size: 16px;
    color: #5c5c5c;
    font-weight: 400;
}

.et_pb_main_blurb_image {
    margin-bottom: 0;
}

/*breadcrumb*/
.breadcrumb-wrapper {
    max-width: 1200px!important;
}
.breadcrumb {
    padding: 0
}

.breadcrumb-list {
    list-style: none!important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0!important;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 12px;
    position: relative;
}

.breadcrumb-link:hover {
    color: #ffffff;
}

.breadcrumb-link.active, .breadcrumb-link.visited {
  color: #ffffff;
}

.breadcrumb-separator {
    color: #ffffff;
    font-size: 14px;
    margin: 0 4px;
    user-select: none;
}

.breadcrumb.minimal {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.breadcrumb.minimal .breadcrumb-link {
    padding: 0;
    font-size: 14px;
}
.headline-hero-section {
    line-height: 64px;
}
#korporat-socmed {
    text-align:center;
}
.img-socmed {
    display: inline-block;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #CCD8E4;
    margin-right: 8px;
}

/*visi-misi*/
.blue-section-text {
    line-height: 130%; 
    max-width: 740px;
    position: relative;
    margin: 0 auto;
}
.blue-section-text img.left {
    position: absolute;
    top:0;
    left:0;
}
.blue-section-text img.right {
    position: absolute;
    bottom:0;
    right:0;
}
.akhlak-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #C5C6C8;
}
.akhlak-item {
    display: flex;
    width: 290px;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}
.akhlak-item-left {
    display: flex;
    width: 56px;
    height: 56px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background:  #F0F1F1;
    color: #003D79;
    text-align: center;
    font-family: 'myriadpro-light';
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; 
    flex-shrink: 0; 
}
.akhlak-item-right {
    padding-left: 18px;
}
.akhlak-item-right h3 {
    color: #003D79;
    font-family: 'myriadpro-light';
    font-size: 28px;
    font-style: normal;
    font-weight: 300!important;
    line-height: 100%; /* 28px */
    margin-bottom: 8px;
    padding-bottom: 0;
}
.akhlak-item-right p {
    color: #333333;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
}
.akhlak-item-description {
    color: #333333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}
.muf-fancy-row ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.muf-fancy-row ul li {
    position: relative;
    padding-left: 30px; 
    font-size: 18px;
    margin-bottom: 4px;
}

.muf-fancy-row ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;  
    height: 20px; 
    background-image: url('/wp-content/themes/MUF-Corporate/images/icon-fancy-list.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.muf-fancy-row ul li.long::before {
    top: 10%;
}

.muf-floating-image-box {
    position: relative;
}
.muf-floating-image .et_pb_image_0 {
    position: absolute;
    top: 50px;
    left:-150px;
    border: 1px solid #DBDBDC;
}
.muf-floating-image.alt2 .et_pb_image_0 {
    position: absolute;
    top: 27%;
    left:-210px;
    border: 1px solid #DBDBDC;
    padding: 0;
}
.muf-floating-image.alt3 .et_pb_image_0 {
    position: absolute;
    top: 24%;
    left:-170px;
    border: 1px solid #DBDBDC;
    padding: 0;
}
.menu-split {
    width:320px;
    float:right;
}
.menu-split ul {
    list-style-type: none;
}
.menu-split ul li a, .menu-split ul li a:visited {
    padding: 32px;
    color: #5C5C5C;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
    display:block;
}
.menu-split ul li a.active, .menu-split ul li a:hover {
    padding: 32px;
    color: #333333;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
    border-radius: 99px 0 0 99px;
    background: #FFF;
}
#menu-split-right {
    max-width:870px;
}
#menu-split-right .toolset_divi_view {
    margin-bottom: 48px!important
}

.dewan-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap; /* Tambahkan ini untuk wrapping */
}
.dewan-slider {
    display: flex;
    padding-right: 16px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 calc(33.333% - 11px); /* 3 kolom di desktop, minus gap */
    min-width: 0; /* Mencegah overflow */
}
.dewan-foto {
    display: flex;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}
.dewan-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}
.dewan-jabatan {
    color: #003D79;
    font-family: 'myriadpro-light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; 
    text-transform: uppercase;
    margin-bottom: 5px;
}
.dewan-row.syariah .dewan-jabatan {
    min-height: 45px;
}
.dewan-nama {
    color: #333333;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.4px;
}
.tabel-muf .footable.table-bordered>thead>tr>th, .tabel-muf .bootstrap4 .table-bordered.ninja_footable {
    border: none!important;
}
.tabel-muf th {
    background: #FFB700!important;
    color: #003D79!important;
    font-weight: 600;
}
.tabel-muf th:first-child {
    border-top-left-radius: 8px;
}
.tabel-muf th:last-child {
    border-top-right-radius: 8px;
}
.tabel-muf th, .tabel-muf td {
    text-align: left;
    padding: 8px 24px!important;
    border-collapse:collapse!important;
    border: 1px solid #E4EAF0;
}
.tabel-muf td {
    background: #ffffff!important;
}
.tabel-muf td:first-child {
    background-color: #F9FAFB!important;
    text-align: center;
    border-bottom: none;
}

/*general card*/
.pa-add-accordion-icon .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block;
	content: "\e04f";
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.et_pb_toggle_open, .et_pb_toggle_close {
    padding: 20px 20px 20px 0!important;
}
.general-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap; 
}
.general-card-item {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 calc(33.333% - 11px); 
    min-width: 0;
    border-radius: 8px;
    border: 1px solid #D3DCE5;
}
.general-card-item img {
    margin-bottom: 10px;
}
.general-card-item h4 {
    color: #003D79;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; 
    margin-bottom:0;
    min-height: 64px;
}
.general-card-description {
    color: #5C5C5C;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    min-height: 80px;
}
.general-card-item button, .button-yellow {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    padding: 8px 24px;
    border-radius: 8px;
    background: #FFB700;
    border: none;
}
/*general card*/

/*tabred*/
.floatright {
    float: right;
}
#tabred-content {
    z-index: 1;
}
.tabred-menu {
    float:right;
}
.tabred-menu ul {
    list-style-type: none;
    margin-top: 64px;
    margin-right: 64px;
}
.tabred-menu ul li {
    border-bottom: 1px solid #D6D6D6;
}
.tabred-menu ul li a, .tabred-menu ul li a:visited {
    padding: 16px 0 16px 16px;
    color: #5C5C5C;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
    display:block;
}
.tabred-menu ul li a.active, .tabred-menu ul li a:hover {
    color: #333333;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
}

.tabred-menu .et_pb_text_inner ul li a {
    display: block;
    padding: 12px 40px 12px 15px; 
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    cursor: pointer;
}

.tabred-menu .et_pb_text_inner ul li a:hover::after {
    content: '';
    position: absolute;
    right: -95px;
    top: 50%;
    transform: translateY(-50%);
    width: 74px;
    height: 12px;
    background-image: url('/wp-content/themes/MUF-Corporate/images/tab-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    z-index: 2;
}

.tabred-menu .et_pb_text_inner ul li a.active::after {
    content: '';
    position: absolute;
    right: -95px;
    top: 50%;
    transform: translateY(-50%);
    width: 74px;
    height: 12px;
    background-image: url('/wp-content/themes/MUF-Corporate/images/tab-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    z-index: 2;
}

#tabred-content h4 {
    color: #293962;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 56px */
}
#tabred-content p {
    color: #333;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; 
    margin-bottom: 24px;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.tab-content-container {
    max-width: 650px;
}

.tab-content.active {
    display: block;
}

.accordion-cara-pembayaran h4 {
    padding-left:10px!important;
    font-size: 18px!important;
}
#tabred-content ol, .accordion-cara-pembayaran ol {
    list-style: none;
    counter-reset: custom-counter;
    padding-left: 0;
}

#tabred-content ol > li, .accordion-cara-pembayaran ol > li {
    counter-increment: custom-counter;
    margin: 15px 0;
    padding-left: 50px;
    position: relative;
    font-size: 18px;
}

#tabred-content ol > li::before, .accordion-cara-pembayaran ol > li::before {
    content: counter(custom-counter);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #F0F1F1;
    color: #003D79;
}

#tabred-content ul {
    list-style: disc;
    margin: 10px 0;
    padding-left: 20px;
}

#tabred-content ul li {
    counter-increment: none; /* Reset counter increment */
    margin: 5px 0;
    padding-left: 0;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

#tabred-content ul li::before {
    display: none; /* Sembunyikan custom counter */
}

/* Animasi fade in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/*tabred*/


/*home tab*/
.highlight-menu-list {
    list-style: none!important;
    display: flex;
    padding: 0!important;
}

.highlight-menu-item {
    cursor: pointer;
    transition: all 0.3s ease;
    color: #5C5C5C;
    padding-right: 32px;
    font-size: 24px;
}

.highlight-menu-item:hover {
    color: #003D79;
}

.highlight-menu-item.active {
    color: #003D79;
}

.highlight-content {
    display: none!important;
    animation: fadeIn 0.3s ease-in-out;
}

.highlight-content.show {
    display: block!important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*laporan tata kelola */
.laporan-list ul {
    list-style: none;
    padding:0;
    border-radius: 8px;
    border: 1px solid #D3DCE5;
    background: #ffffff;
}
.laporan-list ul li:not(:last-child) {
    border-bottom: 1px solid #D3DCE5;
}
.laporan-list ul li {
    padding: 12px 20px;
    position: relative;
}
.laporan-list ul li:hover {
    background: #E5ECF2;
}
.laporan-list-header {
    color: #333333;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; 
    margin-bottom: 4px;
}
.laporan-list-type {
    color: var(--Color-Neutral-Black-50, #999);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 14px */
    letter-spacing: -0.14px;
}
.laporan-list ul li::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;  
    height: 20px; 
    background-image: url('/wp-content/themes/MUF-Corporate/images/icon-download.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.whistleblowing-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-radius: 8px;
}

.whistleblowing-item {
    flex: 1 1 calc(50% - 10px); 
    display: flex;
    transition: all 0.3s ease;
}
.whistleblowing-item p {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; 
    display: block;
    width: 100%;
    margin-bottom: 4px;
}
.whistleblowing-item div {
    flex: 1;
}
.whistleblowing-item input, .whistleblowing-item textarea, .pengaduan input, .pengaduan textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 12px 16px;
}
.whistleblowing-consent {
     margin-top: 20px;margin-bottom:20px;font-size:12px;font-style:italic;
     line-height: 16px;
}
.whistleblowing-consent .wpcf7-list-item {
    margin-left: 0;
}
.wpcf7-submit {
    border-radius: 6px;
    border: 1px solid #003D79;
    background: #003D79;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    width: 100%;
    padding: 8px 24px;
}
.pengaduan input, .pengaduan textarea {
    font-size: 16px;
}
.pengaduan input.wpcf7-submit {
     width: inherit;
    padding: 8px 24px;
    border-radius: 8px;
    order: 1px solid #003D79;
    color:  #003D79;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    margin : 0 auto;
    display: block;
}
/*keterbukaan*/
.bullet-menu ul {
    list-style-type: none;
    text-align:center;
    padding:0!important
}
.bullet-menu ul li {
    display: inline;
    margin-right: 5px;
}
.bullet-menu ul li a, .bullet-menu ul li a:visited {
    border-radius: 99px;
    border: 1px solid #003D79;
    padding: 8px 24px;
    color: #003D79;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
}
.bullet-menu ul li a:hover, .bullet-menu ul li a.active {
    background: rgba(0, 61, 121, 0.10);
}

/*home tab*/

/* news container */
.news-4-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    margin-bottom: 32px;
}

.promo-4-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    margin-bottom: 32px;
}

/* Individual News Card */
.news-4-card {
    flex: 0 0 calc(25% - 18px); /* 0 grow, 0 shrink, 25% basis */
    min-width: 260px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 260px; 
}

/* News Image */
.news-4-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    margin-bottom: 8px;
}

.news-4-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.news-4-date {
    color:  #5C5C5C;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}

.news-4-title {
    color: #333;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 28px */
    text-overflow: ellipsis;
    min-height: 5em; /* Maintain consistent height */
}
.single-edukasi .news-4-title {
    min-height: inherit;
    margin-top:8px;
    font-size: 16px;
    font-weight: 500;
}
.et_pb_gutter.et_pb_gutters2 #left-area {
    width: 100%!important;
}
.et_pb_gutters2.et_right_sidebar #left-area {
    padding-right : 0!important;
}
.mbot-10 {
    margin-bottom: 1rem;
}
.promo-4-container .news-4-card{
border-radius: 8px;
background: #FFF;
box-shadow: 1px 3px 10px 0 rgba(11, 24, 38, 0.10);
padding: 16px;
}
.promo-4-container .news-4-title {
    border-bottom: 1px solid #DBDBDC;
    margin-bottom: 12px;
}
.promo-4-container .text-periode {
    color: #999;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
}
.promo-4-container .news-4-date {
    color: #5C5C5C;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    margin-bottom:12px;
}
.promo-4-container .button-yellow {
    font-size: 16px;
    width: 100%!important;
    display:block!important;
}
/* news container */
/*cabang*/
.muf-cabang-wrapper {
    margin-top: 16px;
    height: 500px;
    overflow-y : auto;
    scrollbar-width: thin;
    scrollbar-color: #003D79 #f1f1f1;
}

/* Webkit browsers */
.muf-cabang-wrapper::-webkit-scrollbar {
  width: 10px;
}

.muf-cabang-wrapper::-webkit-scrollbar-track {
  background: #F0F1F1;
  border-radius: 4px;
}

.muf-cabang-wrapper::-webkit-scrollbar-thumb {
  background: #003D79;
  border-radius: 4px;
}

.muf-cabang-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.location-list {
    padding: 20px 24px;
    border-radius: 8px;
    border: 1px solid #DBDBDC;
    background: rgba(255, 255, 255, 0.90);
    margin-right: 16px;
    margin-bottom: 10px;
}
.location-name {
    color: #003D79;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
    margin-bottom: 5px;
}
.location-address {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin-bottom: 10px;
}
.location-info {
    color: #5C5C5C;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.location-search select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #A5A5A5;
    background: #FFF;
    font-size: 16px;
      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNSA2TDguNSAxMEwxMi41IDYiIHN0cm9rZT0iIzFFMUUxRSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K) no-repeat;
        background-position: right 16px top 50%; 
        -moz-appearance: none; 
        -webkit-appearance: none; 
        appearance: none;
}
    .map-container {
        flex: 1;
        background: white;
        position: relative;
        height: 550px;
    }

    .map-frame {
        width: 100%;
        height: 100%;
        border: none;
        transition: opacity 0.3s ease;
    }
/*cabang*/
/*usp-card*/
    .usp-card {
        padding: 12px;
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background: #E5ECF2;
    }

    .usp-card-content {
        padding: 12px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        z-index: 1;
    }

    .usp-card-icon {
        width: 24px;
        height: 24px;
        color: #4a67d6;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .usp-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .usp-text-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .usp-card-title {
    color: #003D79;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    }

    .usp-card-description {
        color: #5C5C5C;
        font-size: 16px;
        line-height: 1.5;
    }
    .usp-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        transition: all 0.3s ease;
    }
    #accordion-produk .et_pb_toggle_content {
        padding: 12px 16px;
        border-radius: 8px;
        border: 1px solid #D3DCE5;
        background: #F8F8F8;
        margin-top:10px;
    }
    .tabel-angsuran th, .tabel-biaya th {
        font-weight: 500;
        background: #5c5c5c;
        color:#ffffff!important;
        vertical-align: top;
    }
    .tabel-angsuran {
        width: 50%!important;
    }
    .tabel-angsuran td, .tabel-biaya td {
        border:1px solid #5c5c5c!important;
    }
/*usp-card*/
    .cara-pembayaran-item {
        display: flex;
        align-items: center;
        transition: background-color 0.2s ease;
        border: 1px solid #D3DCE5;
    }
    .cara-pembayaran-item:hover {
        background-color: #f8f9fa;
    }
    .cara-pembayaran-item:first-child {
        -webkit-border-top-left-radius: 8px;
        -webkit-border-top-right-radius: 8px;
        -moz-border-radius-topleft: 8px;
        -moz-border-radius-topright: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .cara-pembayaran-item:last-child {
        -webkit-border-bottom-left-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-bottomleft: 8px;
        -moz-border-radius-bottomright: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .item-number {
        font-size: 18px;
        color: #333333;
        margin-right: 20px;
        width: 48px;
        background: #F8F8F8;
        padding: 20px 0;
        text-align: center;
    }

    .pembayaran-image {
        width: 75px;
        height: 30px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        text-transform: uppercase;
    }

    .pembayaran-title {
        flex: 1;
        font-size: 18px;
        color: #003D79;
    }

    .pembayaran-button {
        border-radius: 6px;
        background: #FFB700;
        padding: 4px 7px 0 7px;
        margin-right: 16px;
    }

    .pembayaran-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
    }

    .pembayaran-button:active {
        transform: translateY(0);
    }

   .pembayaran-button svg {
        width: 14px;
        height: 14px;
    }
    #accordion-infokonsumen .et_pb_toggle_content {
        padding: 12px 16px;
        margin-top:10px;
    }
    #accordion-infokonsumeninner .et_pb_toggle_title {
        font-size: 18px;
    }
    #accordion-infokonsumeninner .et_pb_accordion_item {
        padding: 12px 16px!important;
        border-radius: 8px;
        border: 1px solid #D3DCE5;
        background: #F8F8F8;
    }
    .scrolltable {
        width: 640px;
        overflow:auto;
        margin-bottom: 12px;
    }

@media (max-width: 768px) {
    .et_pb_heading_0 .et_pb_heading_container h1, .et_pb_heading_container h2 {
        font-size: 28px!important;
    }
    
    #search-mobile {
        padding: 0 10px 10px 10px;
    }

    .location-menu {
        margin: 20px 0;
        font-weight: 600;
        color: #003D79;
        text-align: center;
    }

    /* Mobile Navigation */
    .mobile-navigation {
        max-width: 100%;
        background-color: #fff;
    }

    .mobile-menu {
        list-style: none;
    }

    .menu-item {
        border-bottom: 1px solid #e0e0e0;
    }

    .menu-item > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px;
        text-decoration: none;
        color: #333;
        font-size: 16px;
        font-weight: 500;
        background-color: #fff;
        transition: background-color 0.2s;
    }

    .menu-item > a:hover {
        background-color: #f8f8f8;
    }

    .menu-item-has-children > a::after {
        content: '';
        width: 12px;
        height: 12px;
        border-right: 2px solid #0066cc;
        border-bottom: 2px solid #0066cc;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

    .menu-item-has-children.active > a::after {
        transform: rotate(-135deg);
    }

    .sub-menu {
        list-style: none;
        background-color: #f8f8f8;
        display: none; /* Ini tetap none, tapi akan di-handle oleh jQuery */
    }

    .sub-menu .menu-item {
        border-bottom: none;
    }

    .sub-menu .menu-item a {
        display: block;
        padding: 14px 20px 14px 40px;
        text-decoration: none;
        color: #0066cc;
        font-size: 15px;
        font-weight: 400;
        transition: background-color 0.2s;
    }

    .sub-menu .menu-item a:hover {
        background-color: #e8f4ff;
    }

    .menu-item:not(.menu-item-has-children) > a {
        color: #333;
    }

    .menu-list {
        flex-direction: column;
        gap: 10px;
    }

    /* tab menu */
    .floatright {
        float: none;
    }
    .tabred-menu {
        float:none;
    }
    .tabred-menu ul {
        list-style-type: none;
        display: none;
    }
    .tabred-menu ul li {
        border-bottom: 1px solid #D6D6D6;
    }
    .tabred-menu ul li a, .tabred-menu ul li a:visited {
        padding: 16px 0 16px 16px;
        color: #5C5C5C;
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 24px */
        display:block;
    }
    .tabred-menu ul li a.active, .tabred-menu ul li a:hover {
        color: #333333;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 24px */
    }

    .tabred-menu .et_pb_text_inner ul li a {
        display: block;
        padding: 12px 40px 12px 15px; 
        position: relative;
        text-decoration: none;
        transition: all 0.3s ease;
        border-radius: 4px;
        cursor: pointer;
    }

    .tabred-menu .et_pb_text_inner ul li a:hover::after {
        content: '';
        position: absolute;
        right: -95px;
        top: 50%;
        transform: translateY(-50%);
        width: 74px;
        height: 12px;
        background-image: url('/wp-content/themes/MUF-Corporate/images/tab-arrow.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;
        z-index: 2;
    }

    .tabred-menu .et_pb_text_inner ul li a.active::after {
        content: '';
        position: absolute;
        right: -95px;
        top: 50%;
        transform: translateY(-50%);
        width: 74px;
        height: 12px;
        background-image: url('/wp-content/themes/MUF-Corporate/images/tab-arrow.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;
        z-index: 2;
    }

    #tabred-content h4 {
        color: #293962;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 56px */
    }
    #tabred-content p {
        color: #333;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; 
        margin-bottom: 24px;
    }
    /* tab menu */

    .news-card {
        flex-direction: column;
    }

    .news-image {
        flex: none;
        height: 200px;
    }

    .news-title {
        font-size: 16px;
    }

    .dewan-slider {
        flex: 1 0 calc(50% - 8px); /* 2 kolom di mobile, minus gap */
    }

    .whistleblowing-item {
        flex: 1 1 100%; /* Full width di mobile */
    }
    .news-4-container {
        gap: 20px;
    }
    
    .news-4-card {
        flex: 1 1 calc(50% - 10px); /* 2 kolom di tablet kecil */
        min-width: 240px;
    }

    .news-4-image {
        height: 180px;
    }

    #page-hero {
        padding: 20px;
    }
    #page-hero .et_pb_row_1.et_pb_row {
        padding-top: 30px!important;
        padding-bottom: 30px!important;
    }
}

@media (max-width: 480px) {
    .top-nav li {
        flex: 1;
        text-align: center;
        padding: 0 10px;
    }
    .top-nav li:not(:last-child)::after {
        content: none;
    }

    .top-nav a {
        text-decoration: none;
        padding: 12px 0;
        position: relative;
        color: #999;
        font-weight: 500;
        width: 100%;
    }

    .top-nav a.active::after, .top-nav a:hover:not(.active)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 4px;
        background-color: #FFB700;
        border-radius: 2px;
    }

    .produk-1, .produk-2, .produk-3, .produk-4, .produk-5, .produk-6{
    border : none;
    background: 
        linear-gradient(to right, transparent, #DBDBDC) bottom/100% 1px no-repeat;
    }

    .slide-content {
    margin-top: 80px;
}

    .dewan-row {
        gap: 12px; /* Gap lebih kecil di mobile */
    }
    
    .dewan-slider, .general-card-item {
        flex: 1 0 calc(50% - 6px);
        padding-right: 8px; /* Padding lebih kecil */
    }
    .news-4-container {
        gap: 16px;
    }

    .news-4-card {
        flex: 1 1 100%; /* 1 kolom di mobile */
        min-width: auto;
    }

    .news-4-image {
        height: 160px;
    }

    .news-4-content {
        padding: 16px;
    }
    .usp-card {
        margin: 0 16px;
        padding: 20px;
    }

}