@import url('base.css');

.hide-on-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-on-mobile {
        display: block !important;
        /* atau flex, inline-block sesuai kebutuhan */
    }
}

/* Hilangkan scroll horizontal */
/* html,
body {
    overflow-x: hidden;
} */

body {
    font-family: var(--font-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    font-weight: 700;
    margin: 0px 0px 16px;
}


h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    transition: 0.2s linear;
    line-height: inherit;
}

/* link a  */
a {
    color: rgb(34, 34, 34);
    display: inline-block;
    font-size: calc(14.8px + .0625vw);
    font-weight: 400;
    letter-spacing: .03em;
}

a,
a:hover {
    text-decoration: none;
    transition: .4s ease;
}

/* gap jarak-item (khususs elemen mengandung flex / grid */
.gap-8 {
    gap: 0.5rem !important;
}

.gap-12 {
    gap: 0.75rem !important;
}

.gap-14 {
    gap: 1rem !important;
}

.gap-15 {
    gap: 2.3rem !important;
}

.gap-16 {
    gap: 3rem !important;
}

.gap-20 {
    gap: 8rem !important;
}

.gap-24 {
    gap: 1.5rem !important;
}

/* Pading atas-bawah  */
.py-10 {
    padding-block: 0.625rem !important;
}

.py-14 {
    padding-block: 0.875rem !important;
}

.py-16 {
    padding-block: 1rem !important;
}

.py-26 {
    padding-block: 1.625rem !important;
}

.py-52 {
    padding-block: 3.25rem !important;
}

.py-80 {
    padding-block: 5rem !important;
}

/* Pading kiri-kanan  */
.px-14 {
    padding-inline: 0.725rem !important;
}

.px-15 {
    padding-inline: 1rem !important;
}

.px-20 {
    padding-inline: 1.25rem !important;
}

.px-32 {
    padding-inline: 2rem !important;
}

.px-40 {
    padding-inline: 4rem !important;
}

.px-80 {
    padding-inline: 5rem !important;
}


/* margin sisi akhir elemen  */
.me-6 {
    margin-inline-end: 0.27rem !important;
}

/* rounded  */
.rounded-6 {
    border-radius: 0.375rem !important;
}

.rounded-16 {
    border-radius: 1rem !important;
}

.rounded-4 {
    border-radius: 0.25rem !important;
}

.rounded-8 {
    border-radius: 0.5rem !important;
}

.rounded-16 {
    border-radius: 1rem !important;
}

.rounded-24 {
    border-radius: 1.5rem !important;
}

/* flex atur posisi didalemnya / child  */
.flex-between {
    display: flex;
    justify-content: space-between;
    /*secara horizontal (kiri–kanan).*/
    align-items: center;
    /* secara vertikal (atas–bawah).*/
}

.flex-align {
    display: flex;
    align-items: center !important;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-align-colom {
    display: flex;
    align-items: left;
    flex-direction: column;
    justify-content: center;
    /* rata tengah secara vertical */
    flex-flow: column wrap;
}

.text-4xl {
    font-size: 2rem !important;
}

.button-menu {
    border: 0;
    background-color: transparent;
    color: #fff;
}

/* Opsional: saat hover */
.button-menu:hover {
    color: #727272;
    /* biru bootstrap */
}


.box-shadow-3xl {
    box-shadow: 0px 5px 13px 0px #00000012;
}

.w-40 {
    width: 2.5rem !important;
}

.mt-16 {
    margin-block-start: 1rem !important;
}

.hover-border-main-100:hover {
    background-color: #ffd90031;
    border-color: #ffd90031 !important;
}


.pt-32 {
    padding-block-start: 2rem !important;
}

.pt-50 {
    padding-block-start: 4rem !important;
}

.mt-32 {
    margin-block-start: 2rem !important;
}


.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: .1rem;
    content: var(--bs-breadcrumb-divider, "/");
}

.breadcrumb-chevron {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    gap: .2rem;
}

.breadcrumb-chevron .breadcrumb-item {
    display: flex;
    gap: inherit;
    align-items: center;
    padding-left: 0;
    line-height: 1;
}

.mb-16 {
    margin-block-end: 1rem !important;
}

.mb-1 {
    margin-block-end: .1rem !important;
}


.max-w-340 {
    max-width: 340px;
}


.hover-bg-main-600:hover {
    background-color: #ffc9285b !important;
}

.w-120 {
    width: 7.5rem !important;
}


.text-lg {
    font-size: 1.125rem !important;
}


.p-8 {
    padding: 0.5rem !important;
}

.section-heading {
    margin-bottom: 0px;
}

.section-heading h2 {
    font-family: var(--font-heading);
    font-size: 40px;
}

.max-w-unset {
    max-width: unset !important;
}

.heading-text2 {
    font-family: var(--font-heading);
    font-size: 40px;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .heading-text2 {
        font-family: var(--font-heading);
        font-size: 20px;
    }
}


/* Produk Card */
.product-card__content {
    width: 100%;
}

.produk-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.produk-card.style-two {
    flex-direction: row;
}

.flex-item {
    flex: 1;
    /* semua anak fleksibel dan sama besar */
    background: lightblue;
    text-align: center;
    padding: 20px;
    border: 1px solid #333;
}

.produk-card.style-two .product-card-thumb {
    width: 200px;
    height: 160px;
}


.produk-card_btn {
    transition: transform 0.3s ease;
    /* durasi & efek smooth */
}

.produk-card_btn:hover {
    transform: scale(1.05);
    /* sedikit membesar 5% */
}

/* harga coret */
.price-wrap {
    display: flex;
    flex-direction: column;
    /* Supaya harga lama & baru vertikal */
    align-items: flex-start;
    /* Rata kiri */
    gap: 0px;
    /* Jarak antar baris */
    margin-bottom: 5px;
}

.price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
}

.price-new {
    font-weight: bold;
    color: 235 49% 14%;
    font-size: 16px;
}

/* end harga coret */
/* produk card end */

/* blog content */
.entry-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    /* jarak kiri */
    margin-bottom: 1rem;
}

.entry-content ol {
    list-style: decimal !important;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.entry-content ul,
.entry-content ol {
    list-style: initial !important;
    /* kembalikan bullet/number default */
    padding-left: 20px !important;
    /* beri jarak supaya bullet kelihatan */
}

/* Batasi lebar maksimum container gambar */
.entry-content .wp-caption,
.entry-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Pastikan gambar tidak keluar dari konten */
.entry-content img {
    display: block;
    margin: 12px auto;
    border-radius: 6px;
}


/* end blog content */

.p-32 {
    padding: 2rem !important;
}

.pb-32 {
    padding-block-end: 2rem !important;
}

.mb-32 {
    margin-block-end: 2rem !important;
}

.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-2xl {
    font-size: 1.5rem !important;
}

.max-w-184 {
    max-width: 184px;
}




.ps-40 {
    padding-inline-start: 2.5rem !important;
}

.p-16 {
    padding: 1rem !important;
}

.bg-gray-50 {
    background-color: #F1F1F1 !important;
}

.my-20 {
    margin-block: 1.25rem !important;
}




.hover_border-wa {
    transition: transform 0.3s ease;
    /* durasi & efek smooth */
}

.hover_border-wa:hover {
    transform: scale(1.05);
    /* sedikit membesar 5% */
}

/* kategori konten */
.list-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

.produk_card_thubnail {
    height: 232px;
    width: 100%;
    transition: 0s !important;
}

.produk_card_thubnail img {
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

.produk_card_thubnail:hover img {
    /* transform: scale(1.08); */
    transform: scale(1.2);
}

/* .max-h-540 {
    max-height: 540px !important;
} */

.max-h-540 ul,
.max-h-540 {
    display: block !important;
    /* pastikan ul tetap block */
}

.max-h-540 li {
    display: block !important;
    /* setiap item satu baris */
    margin-bottom: 6px;
    /* jarak antar item */
}

.max-h-540 a {
    display: inline-block;
}

.product-category-list a.active-category {
    font-weight: bold;
    color: #0056b3;
    position: relative;
}

.product-category-list a.active-category::before {
    content: "•";
    color: #0056b3;
    position: absolute;
    left: -14px;
}

.entry-content ul,
.entry-content ol {
    display: block !important;
    /* pastikan block */
    list-style-position: outside !important;
    list-style-type: disc !important;
    /* bullet bulat */
    padding-left: 1.5em !important;
    /* jarak bullet ke teks */
    margin: 0 0 1em 0 !important;
}

.entry-content li {
    display: list-item !important;
    /* ini penting biar bullet muncul */
    list-style-type: inherit !important;
    /* ikuti type dari UL/OL */
    margin-bottom: 5px;
}

/* end kategori konten */



.inset-block-start-0 {
    inset-block-start: 0 !important;
}

.inset-inline-start-0 {
    inset-inline-start: 0 !important;
}


/* HEADER  */
.logo img {
    max-height: 60px;
}

.custom-logo-link img {
    max-height: 50px !important;
    width: auto;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .custom-logo-link img {
        max-height: 45px !important;
    }
}

.header-atas .text-sosmed {
    border-right: 2px solid #808080;
    /* warna hitam, tebal 2px */
    padding-right: 8px;
}

.header-atas .flag-lang {
    border-left: 2px solid #808080;
    /* warna hitam, tebal 2px */
    padding-left: 8px;
}



.header-utama {
    /* position: sticky; */
    /* Menempel saat scroll */
    top: 0;
    /* total tinggi header di atasnya */
    z-index: 98;
    background: #000000;
    padding-block: 0.4rem !important;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        /* mulai dari atas layar */
    }

    to {
        transform: translateY(0);
        /* turun ke posisi normal */
    }
}


.header-utama {
    transition: 0.2s linear;
}

.fixed-header {
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 100%;
    z-index: 8;
    backdrop-filter: blur(24px);
    animation: slideDown 0.50s ease-out;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
}




/* END HEADER  */

/* NAVIGASI MENU  */
.nav-menu {
    display: flex !important;
    align-items: center;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0;

}

.nav-menu a {
    color: #FFFFFF !important;
}

/* pastikan parent flex jadi patokan */
.flex-between {
    position: relative;
}

/* styling submenu agar horizontal dan nempel di bawah flex-between */
.header-utama .submenu {}


/* link submenu */
.header-utama .submenu li a {
    white-space: nowrap;
    color: #000 !important;
    /* paksa teks hitam */
    font-weight: 500;
}

.header-utama .submenu {
    display: flex !important;
}

.header-utama .submenu {
    top: calc(100% + 1rem);
    /* geser submenu turun 10px */
}

.bg-link-produk {
    background: #e5f3ff;
    /* biru */
    height: 35px;
}

/* Target khusus link di header-utama */
.header-utama a {
    text-decoration: none;
    /* hilangkan underline default */
    transition: all 0.3s ease;
    /* animasi halus */
}

/* Hover effect */
.header-utama a:hover {
    color: #bababa !important;
    /* text-decoration: underline; */
}

.menu-item {}

.menu-item .submenu {}


.header-utama .menu-item a:hover {
    /* color: #000000!important;  */
    text-decoration: underline;
}

.menu-item.active>a {
    color: #0073aa;
    font-weight: bold;
}

.submenu .active>a {
    /* font-weight: 700!important; */
    text-decoration: underline;
    text-underline-offset: 2px;
    /* jarak underline dari teks */
}

.nav-menu.hide-on-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .nav-menu.hide-on-mobile {
        display: flex !important;
    }
}

.nav-menu__item .active {
    font-weight: 700;
}

/* END NAVIGASI MENU  */



/* FOOTER  */
.footer {
    background: #111;
    color: #fff;
    padding: 40px 20px;
    font-size: 14px;
    line-height: 1.6;
}

.footer-block h4 {
    margin-bottom: 12px;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 6px;
}

.footer-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-block ul li {
    margin: 6px 0;
}

.footer-block ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-block ul li a:hover {
    color: #bababa;
    text-decoration: underline;
}

/* END FOOTER  */

/* Google Maps  */
.google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* end Google Maps  */


/* Slider  */
.hero-section {
    /* background: url('http://ikamewatergear.test/wp-content/uploads/2025/09/background.webp') no-repeat center center; */
    /* background-size: cover; */
    height: 80vh;
    height: 80dvh;
    /* fallback untuk mobile */
    /* bisa diubah sesuai kebutuhan */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 2rem;
    font-family: var(--font-heading);
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .title-headline {
        font-size: 1rem !important;
    }

}

/* Overlay hitam transparan */
.hero-overlay {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.7),
            /* sisi kiri lebih gelap */
            rgba(0, 0, 0, 0.3),
            /* tengah agak transparan */
            rgba(0, 0, 0, 0.0)
            /* sisi kanan transparan */
        );
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-items: baseline;
    z-index: 1;
    /* gradient di bawah teks */
}


/* Mobile: 2 kolom */
@media (max-width: 768px) {
    .hero-overlay .hero-content {
        position: absolute;
        bottom: 100px;
        /* jarak dari bawah */
        left: 20px;
        /* jarak dari kiri */
    }

}


.title-headline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* full width */
    background: rgba(0, 0, 0, 0.718);
    /* warna background (bisa diganti) */
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 1.6rem;
    font-family: var(--font-heading) !important;
}

/* end Slider  */

/* best produk  */
.best-produk {}

.bg-wg {
    background-color: #0a4461 !important;
}

.section-produk {
    /* jarak antar item */
}

.produk-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.produk-item .bi {
    font-size: 20px;
    font-weight: 700;
}

.produk-item h5 {
    margin-bottom: 12px;
    font-size: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-bottom: 14px;
}

.produk-item img {
    transition: transform 1.5s ease;
    /* durasi & efek smooth */
}

.produk-item img:hover {
    transform: scale(1.05);
    /* sedikit membesar 5% */
    transform-origin: center;
    transition: transform 1.5s cubic-bezier(.22, 1, .36, 1);
}

.best_produk_thubnail {
    height: auto;
    width: 100%;
}

.best_produk_thubnail img {
    height: auto;
    width: 100%;
}

/* list gambar produk  */
.section-gambar-produk {
    position: relative;
    text-align: center;
    padding: 50px 20px;
    background: linear-gradient(to bottom, #ffffff 40%, #dedede 40%);
}


/* Mobile: 2 kolom */
@media (max-width: 768px) {
    .section-gambar-produk {
        position: relative;
        text-align: center;
        padding: 50px 20px;
        background: linear-gradient(to bottom, #ffffff 20%, #dedede 20%);
    }

}


.gambar-produk-list-two {}

.gambar-produk-list {
    display: grid;
    gap: 20px;
    margin: 0 auto 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
    justify-content: center;
    /* ⬅️ ini kunci agar grid tidak stretch dan tetap di tengah */
}

.gambar-produk-list img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    justify-self: center;
}

/* Mobile: 2 kolom */
@media (max-width: 768px) {
    .gambar-produk-list {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        /* tetap tengah di mobile */
    }

    .gambar-produk-list img {
        width: 100%;
        height: 200px;
    }
}

.deskripsi-gambar ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.deskripsi-gambar li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    color: #0a4461;
    font-weight: 700;
}

.deskripsi-gambar li .bi {
    font-size: 26px;
    font-weight: 700;
    padding: 0;
}

.section2-gambar-produk .produk-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    /* posisi elemen di tengah vertical */
    gap: 30px;
    /* jarak antar gambar */
}

.section2-gambar-produk .produk-list img {
    width: 100%;
    /* ikuti lebar kolom, bukan fixed */
    /* ukuran tetap */
    /* biar gambar tidak gepeng */
    border-radius: 8px;
}

.section2-gambar-produk .produk-list>div {
    flex: 0 0 calc(50% - 30px);
    /* 2 kolom (dikurangi gap biar pas) */
    box-sizing: border-box;
}

.produk-point {
    display: flex;
    justify-content: center;
    /* biar rata tengah */
    gap: 30px;
    /* jarak antar item */
    flex-wrap: wrap;
    /* responsif (turun kalau layar kecil) */
}

.produk-point .feature-point {
    display: flex;
    align-items: center;
    background: #c2c2c2;
    /* warna abu */
    border-radius: 30px;
    /* sudut membulat */
    padding: 5px 20px 5px 40px;
    /* kasih padding kiri lebih besar */
    position: relative;
    /* supaya icon bisa absolute */
}

.produk-point .feature-point .icon {
    position: absolute;
    left: -10px;
    /* geser keluar */
    top: 50%;
    transform: translateY(-50%);

    background: #c2c2c2;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 8px;
    /* jarak dengan teks */
}

.produk-point .feature-point .icon .bi {
    font-size: 32px;
    /* perbesar ukuran ikon */
    color: #ffffff;
    /* opsional: ubah warna */
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor,
        0 1px 0 currentColor, 0 -1px 0 currentColor;
}

.produk-point .feature-point .text {
    font-weight: 600;
}

/* Button Mobile  */
@media (max-width: 768px) {
    .produk-point .feature-point .icon {
        font-size: 12px !important;
        width: 40px;
        height: 40px;
    }

    .produk-point .feature-point .text {
        font-weight: 500;
        font-size: 14px;
    }

    .produk-point .feature-point .icon .bi {
        font-size: 20px;
    }

    .produk-point .feature-point {
        border-radius: 20px;
        padding: 5px 10px 5px 30px;
    }

    .btn-m-p {
        font-weight: 400;
        font-size: 11px;
        padding-block: 0.1rem !important;
    }

    .btn-m-p2 {
        font-weight: 400;
        font-size: 12px;
        padding-block: 0.1rem !important;
    }



}


.gambar-section-kanan img {
    flex: 1 1 300px;
    /* lebar minimal 300px, sisanya bagi rata */
    max-width: 100%;
    /* biar tidak overflow */
    /* tinggi seragam */
    object-fit: cover;
    /* gambar tetap proporsional */
}

.bg-abu1 {
    background: #f2f2f2;
}

.deskrisi-produk-sec3 ul {
    display: flex;
    justify-content: center;
    gap: 0px;
    flex-direction: column;
}

.deskrisi-produk-sec3 ul li {
    display: flex;
    gap: 10px;
    font-size: 18px;
    font-weight: 450;
    color: #0a4461;
}

.deskrisi-produk-sec3 ul li .bi {
    color: #0a4461;
}

/* end best produk  */

/* Mengapa kami  */
.wrap-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* default desktop: 3 kolom */
    gap: 15px;
}

.point-why {
    height: 270px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}

.point-why .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0));
}

.point-why .overlay h4 {
    margin: 0;
    padding-top: 60px;
    font-size: 20px;
    /* font-weight: bold; */
    font-style: var(--font-main-light);
}

.point-why p {
    margin: 5px 0 0;
    font-size: 14px;
}

/* Tablet: 2 kolom */
@media (max-width: 1024px) {
    .wrap-why {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* HP: 1 kolom */
@media (max-width: 768px) {
    .wrap-why {
        grid-template-columns: repeat(2, 1fr);
    }

    .point-why {
        height: 170px;
    }

    .point-why .overlay h4 {
        margin: 0;
        padding-top: 40px;
        font-size: 12px;
        font-weight: bold;
    }

    .point-why p {
        margin: 5px 0 0;
        font-size: 9px;
        line-height: 1.2;
    }

    .point-why .overlay {
        padding: 5px;
        background: linear-gradient(to top, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
    }
}

/* End Mengapa kami  */

/* section footer headline  */
.headline-footer {
    display: flex;
    justify-content: center;
    /* horizontal center */
    align-items: center;
    /* vertical center */
    text-align: center;
    /* biar teksnya rata tengah */
    min-height: 60px;
    /* kasih tinggi minimal (bisa kamu ubah sesuai kebutuhan) */
}

.headline-footer h5 {
    margin: 0px;
}

.section-headline-footer .overlay-bg {
    background: linear-gradient(to right, orange, yellow);
}

/* Mobile (<=768px) */
@media (max-width: 768px) {

    .section-headline-footer h5 {
        font-size: 14px;
    }
}

/* Section Warning  */
.section-warning {
    border-top: 1px solid #f44336;
    /* Border atas */
    border-bottom: 1px solid #f44336;
    /* Border bawah */
    background-color: #fdecec;
    /* Merah muda background */
    color: #e53935;
}

.warning-bar {
    text-align: center;
    /* Tengah horizontal */
    padding: 15px;
    /* Spasi dalam */
    margin: 20px 0;
    /* Jarak atas bawah */
    border-radius: 6px;
    /* Sudut agak rounded */
    font-family: inherit;
}

.warning-title {
    display: block;
    font-weight: 700;
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.warning-bar p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}


/* TESTIMONI  */
.teman-samudra {
    text-align: center;
    padding: 40px 20px;
}

.teman-samudra .section-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
}

.teman-samudra .section-subtitle {
    font-style: italic;
    color: #555;
    margin-bottom: 30px;
}

.testimonial-card {
    background: #f4f4f4;
    padding: 30px;
    border-radius: 10px;
    max-width: 90%;
    margin: auto;
}

.testimonial-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.testimonial-card .location {
    display: block;
    color: #777;
    margin-bottom: 10px;
}

.testimonial-card blockquote {
    font-style: italic;
    color: #333;
    margin: 0;
}

/* Swiper nav buttons */
.swiper-button-prev,
.swiper-button-next {
    color: #555;
}

.swiper-pagination-bullet-active {
    background: #000;
}


/* END TESTIMONI  */

/* Belanja  */
.banner-belanja {
    height: 450px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}

.banner-belanja .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0));
    height: 50%;
}

.section-belanja .link-shop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.section-belanja .link-shop a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.link-shop img {
    max-width: 50%;
}

/* COLLECTION KONTEN  */
.collection-content header {
    height: 500px;
}

.collection-content header .judul-video {
    font-weight: 700px !important;
    font-size: 40px !important;
    color: white;
}

/* SECTION PRODUK DI COLLECTION  */
.collection-content .section-produk-card {
    display: flex;
    align-items: center;
    gap: 30px;
    background: #f9f9f9;
    /* padding: 20px 25px; */
    border-radius: 12px;
    max-width: 900px;
    margin: 20px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.product-image img {
    width: 300px;
    border-radius: 8px;
}

.product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.product-info h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #222;
}

.product-info ul {
    margin: 0 0 15px;
    padding-left: 18px;
    list-style: none;
}

.product-info ul li {
    margin-bottom: 6px;
    position: relative;
    padding-left: 20px;
}

.product-info ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #009688;
    font-weight: bold;
}

.price {
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.price span {
    font-size: 20px;
    color: #000;
}

.bg-split {
    background: linear-gradient(to left, #f8f9fa 30%, #ffffff 30%);
    padding: 20px;
}

/* Collection Hero  */
.hero-collection-image {
    height: 70vh;
    position: relative;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.hero-collection-image .hero-overlay-two {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgb(0, 0, 0),
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.0));
    z-index: 10;
}

.hero-collection-image .hero-overlay-two h1 {
    position: absolute;
    /* top: 100%!important; */
    text-align: center;
    color: white;
    margin: 0;
    padding: 0 0px;
    /* biar ada ruang di kiri kanan */
}

.hero-collection-videodesc {
    background-color: #000;
}

.hero-collection-videodesc .highlight-video {
    display: flex;
    justify-content: center;
}

.hero-collection-videodesc .highlight-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.hero-collection-videodesc a {
    color: white;
}

.hero-collection-videodesc a:hover {
    color: rgb(179, 179, 179);
    text-decoration: underline;
}

/* header versi 2  */
/* Video */
.product-video {
    width: 100%;
    height: 400px;
    /* tentukan tinggi sesuai kebutuhan */
    overflow: hidden;
}

.product-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ini yang membuat efek cover */
    object-position: center;
    display: block;
}

@media (max-width: 768px) {
    .product-video {
        height: 220px;
        /* tinggi versi mobile */
    }
}

.hero-collection-video {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(135, 206, 250, 0.855),
            rgba(135, 206, 250, 0.36),
            rgba(135, 206, 250, 0));
    z-index: 1;
}

.hero-collection-video video {
    width: 100%;
    height: auto;
    /* max-height: 500px; */
    display: block;
    /* border-radius: 8px; */
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero-collection-video a:hover {
    color: rgb(104, 104, 104);
    text-decoration: underline;
}

/* end Collection Hero  */

/* header versi 3  */
.hero-collection-image-white {
    height: 63vh;
    height: 63dvh;
    position: relative;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.hero-collection-image-white .hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgb(255, 255, 255),
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0));
    z-index: 1;
}

.deskripsi {
    text-align: center;
    color: #0056b3;
    padding: 20px;
}

/* end header versi 3  */

/* banner promo  */
.banner-promo-image {
    position: relative;
}

.banner-promo-image img {
    width: 100%;
    display: block;
}

.banner-promo-image .promo-btn {
    position: absolute;
    bottom: 20px;
    left: 40px;
    padding-inline: 2rem !important;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .banner-promo-image .promo-btn {
        position: absolute;
        font-size: 12px;
        bottom: 10px;
        left: 20px;
        padding-inline: 1rem !important;
    }
}

/* end banner promo  */

/* Banner Demo  */
.banner-demo-wrap .hero-overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}

.banner-demo-wrap .hero-overlay .hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* biar item turun ke bawah kalau sempit */
    text-align: center;
    /* biar konten rata tengah saat turun */
}

.banner-demo {
    height: 40vh;
    /* bisa diubah sesuai kebutuhan */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* End Banner Demo  */

/* POINT SERVICE  */
.point-service-wrap {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    /* biar item turun ke bawah kalau sempit */
    text-align: center;
    /* biar konten rata tengah saat turun */
}

.point-service-wrap .point-service {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.point-service-wrap .point-service span {
    font-size: 20px;
    color: #0a4461;
}

.point-service-wrap .point-service img {
    max-width: 40px;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .point-service-wrap .point-service span {
        font-size: 16px;
        color: #0a4461;
    }

    .point-service-wrap .point-service img {
        max-width: 30px;
    }

}

/* END POINT SERVICE  */

/* header hero 4  */
.hero-video-wrap {
    position: relative;
    width: 100%;
    height: 80vh;
    height: 80dvh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
    /* buang extra space */
}

.hero-video-wrap .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    object-fit: cover;
    /* cover penuh tanpa geser */
    z-index: 0;
    padding-bottom: 90px;
}

.hero-video-wrap .hero-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0);
    /* optional overlay transparan */
}

.hero-video-wrap .hero-overlay h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

.hero-video-desc a {
    color: white;
}

.hero-video-desc a:hover {
    color: rgb(179, 179, 179);
    text-decoration: underline;
}

.hero-video-wrap .header-title-overlay-wrap {
    position: relative;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0);
    /* optional overlay transparan */
}

.header-title-overlay-wrap h1 {}

.header-title-hero-two {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000000;
    color: #fff;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 50px;
    font-size: 2rem;
    font-style: italic;
}

/* end header hero 4  */

/* Compare Tabel  */
.compare-table {}

.compare-table th,
.compare-table td {
    border: 0px solid #333;
    /* garis border */
    padding: 5px;
    /* jarak dalam sel */
}

.compare-table td {
    border-bottom: 1px solid #40404076;
    /* garis border */
    padding: 5px 10px 5px 20px;
    /* jarak dalam sel */
}

.compare-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* ini kunci agar kolom rata */
}

.compare-table th {}

.bg-th {
    background: linear-gradient(to top, #4b4b4b15 70%, #ffffff 55%);
}


/* Mobile (<=768px) */
@media (max-width: 768px) {
    .compare-table {
        font-family: var(--font-main-light);
    }

    .compare-table td {
        border-bottom: 1px solid #40404076;
        /* garis border */
        padding: 2px 2px 2px 2px;
        /* jarak dalam sel */
    }

    .compare-price .old-price {
        font-size: 9px;
    }

    .compare-price .new-price {
        font-size: 11px;
    }

}

th .header-box {
    display: flex;
    flex-direction: column;
    /* urut: gambar → judul → tombol */
    align-items: center;
    justify-content: center;
}

th .header-box .image-box {
    display: flex;
    align-items: center;
}

th .header-box .title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

th .header-box img {
    width: 100%;
    height: auto;
    margin-bottom: 8px;
}

.compare-produk .produk2 img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.compare-produk .produk-spesifikasi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {

    th .header-box .title-box h5 {
        font-size: 10px;
        margin-bottom: 1px;
    }

    th .header-box .title-box .px-15 {
        padding-inline: 0.5rem !important;
    }

    .compare-table tbody {
        font-size: 11px;
    }

    .btn-produk-compare {
        font-size: 10px;
        padding: 0px 0px;
        /* normal di desktop */
    }
}

/* End Compare Tabel  */

/* Spek Box  */
.spek-box {}

.box-spesifikasi {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

/* End Spek Box  */

/* Produk Page */
.product-page {
    display: flex;
    gap: 60px;
}

.product-page>div {
    flex: 1;
}

@media (max-width: 768px) {
    .product-page {
        flex-direction: column;
        /* tumpuk ke atas bawah */
        gap: 20px;
    }
}

.product-gallery {
    display: flex;
    align-items: stretch;
    /* Biar tinggi anak-anak sejajar */
    gap: 16px;
    margin: auto;
}

.product-gallery .thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* penting */
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-right: 5px;
    max-height: 500px;
    /* ikut main image */
    /* tambahkan ini untuk sembunyikan scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge lama */
}

.product-gallery .thumbnails::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .product-gallery .thumbnails {
        max-height: 370px !important;
        /* ikut main image */
    }
}

.product-gallery .thumbnails img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.product-gallery .thumbnails img:hover {
    border: 2px solid #f5c400;
}

.product-gallery .main-image {
    flex: 1;
    max-height: 600px;
    /* batas fix */
}

.product-gallery .main-image a {
    display: flex;
}

.product-gallery .main-image img {
    width: 100% !important;
    max-height: 600px;
    object-fit: contain;
}

.product-deskripsi .brand {
    color: #696969;
    font-weight: 700;
    text-transform: lowercase;
    margin-bottom: 3px;
}

.product-deskripsi .price {
    display: flex;
    flex-direction: column;
}

.product-deskripsi .old-price {
    text-decoration: line-through;
    color: #888;
    font-size: 14px;
    margin: 0;
}

.product-deskripsi .new-price {
    font-weight: bold;
    color: #1a1a1a;
    font-size: 20px;
    margin: 5px 0 0 0;
}

.btn-order-produk {
    /* display: flex; */
}

.product-deskripsi .btn img {
    max-width: 20px;
    height: 100%;
}

.product-deskripsi .btn .d-flex {
    align-items: center;
}

.produk-include {
    /* display: flex;
    justify-content:start; */
}

/* End Produk Page */

/* MENU MOBILE  */
/* Modal Overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    justify-content: flex-end;
}

/* Konten Menu */
.mobile-menu-content {
    width: 80%;
    max-width: 300px;
    background-color: #fff;
    height: 100%;
    padding: 0px;
    position: relative;
    /* animation: slideIn 0.3s ease-in-out; */
    animation: slideInLeft 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: 0;
    /* posisi kiri */
    margin-right: auto;
    /* dorong ke kiri */
}

/* Tombol Close */
/* .close-mobile-menu {
    background: none;
    border: none;
    font-size: 24px;
    align-self: flex-end;
    cursor: pointer;
} */
.close-mobile-menu {
    border: none;
    background: none;
    width: 40px;
    /* kasih lebar & tinggi sama */
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.close-mobile-menu i {
    color: #fff;
    /* putih */
}


/* Navigasi */
.mobile-nav {
    list-style: none;
    padding: 0;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-nav li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.common-input {
    padding: 17px 24px !important;
    margin-block-start: 16px;
}

.submenu_mobile {
    display: flex;
    flex-direction: column;
    /* ⬅️ Ini bikin vertikal */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    /* background: #f9f9f9; */
    padding-left: 0;
    margin: 0;
    list-style: none;
    margin-inline-start: 16px;
}

.submenu_mobile li {
    display: block;
    width: 100%;
}

.submenu_mobile li a {
    display: block;
    padding: 7px 0px;
    color: #333;
    text-decoration: none;
    font-weight: 400;

}

.menu-item_mobile.open .submenu_mobile {
    max-height: 500px;
    /* cukup besar agar muat isi */
}

.menu-item_mobile.open .arrow2 {
    transform: rotate(180deg);
}


/* Navigasi mobile */
.nav-menu_mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 3px;
    margin: 0;
    gap: 0;
}

.menu-item_mobile {
    /* border-bottom: 1px solid #eee; */
    padding: 3px 8px;
    position: relative;
}

.menu-item_mobile a {
    text-decoration: none;
    color: #333;
    display: block;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}

.submenu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    padding: 0px 0px;
    font-weight: 500;

}

.arrow2 {
    transition: transform 0.3s ease;
}

.submenu_mobile {
    display: flex;
    flex-direction: column;
    /* ⬅️ Ini bikin vertikal */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    /* background: #f9f9f9; */
    padding-left: 0;
    margin: 0;
    list-style: none;
    margin-inline-start: 16px;
}

.submenu_mobile li {
    display: block;
    width: 100%;
}

.submenu_mobile li a {
    display: block;
    padding: 0px 0px;
    color: #333;
    text-decoration: none;
    font-weight: 400;

}

.menu-item_mobile.open .submenu_mobile {
    max-height: 500px;
    /* cukup besar agar muat isi */
}

.menu-item_mobile.open .arrow2 {
    transform: rotate(180deg);
}


/* End Navigasi mobile */
/* AND MENU MOBILE  */


/* TEST  */
.produk-gallery {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.main-slider img {
    max-width: 500px;
    border-radius: 8px;
}

.thumbnail-slider {
    max-height: 500px;
    width: 100px;
}

.thumbnail-slider img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
}

.thumbnail-slider .slick-current img {
    border-color: #ff9800;
}

/* Produk Scrool  */
.produk-banner {
    position: relative;
    border-radius: 12px;
    /* biar rounded */
    overflow: hidden;
    width: 100%;
    height: auto;
    /* tinggi bisa disesuaikan */
}

.produk-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* biar rapi, gambar tidak melar */
    display: block;
}

.produk-banner .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    color: white;
}

.produk-banner h4 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
}

.produk-banner p {
    margin: 4px 0 0;
    font-size: 18px;
}

/* Produk Scroll Horizontal  */
.produk-scroll-h .produk-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding: 15px;
}


.produk-scroll-h .produk-card img {
    width: 100%;
}

.swiper-button-next,
.swiper-button-prev {
    align-items: center;
    z-index: 11 !important;
    color: #555555 !important;
    height: 30px !important;
    width: 30px !important;
}

.swip-produk {
    margin-left: 2rem !important;
    /* 16px */
    margin-right: 2rem !important;
    /* 16px */
}

/* Mobile (<=768px) */
@media (max-width: 768px) {

    .swiper-button-next,
    .swiper-button-prev {
        height: 20px !important;
    }

    .swip-produk {
        margin-left: 1rem !important;
        /* 16px */
        margin-right: 1rem !important;
        /* 16px */
    }

    .produk-scroll-h .mySwiper1 .btn {
        font-size: 10px;
        padding-block: 0.0rem !important;
    }

    .produk-scroll-h .product-card__content h6 {
        font-size: 11px !important;
    }

    .produk-scroll-h .product-card__content .price-new {
        font-size: 11px !important;
    }

    .produk-scroll-h .produk-card {
        padding: 5px;
    }

}

.produk-scrool-wrap {}


.produk-scrool {
    /* height: 70vh; */
    /* bisa diubah sesuai kebutuhan */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Banner Demo  */
.produk-scrool-wrap .hero-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.611), rgba(0, 0, 0, 0.14));
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}

/* Button mobile order */
.btn-beli-detail {
    padding-inline: 4rem;
    /* normal di desktop */
}


/* Mobile (<=768px) */
@media (max-width: 768px) {
    .btn-beli-detail {
        font-size: 14px;
        padding: 0px 0px;
        padding-inline: 2rem !important;
        /* normal di desktop */
    }

    .price .price_new {
        font-size: 16px;
    }

    .card-body .btn {
        font-size: 11px !important;
        padding-block: 0.1rem !important;
    }

    .card-body .card-title {
        font-size: 13px !important;
    }

    .card-body {
        padding: 0.4rem !important;
    }

    .border-2 {
        border-width: 1px !important;
    }

    .section-headline-footer {}
}

/* End Button  */


/* Produk List Landingpage  */
.produk-list-landingpage {}

.produk-list-landingpage img {
    width: 100%;
}

.produk-list-landingpage h5 {
    font-size: 25px;
    padding: 10px;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .produk-list-landingpage h5 {
        font-size: 14px;
        padding: 10px;
    }
}

.bahasa-wp a.active {
    border: 2px solid #007bff;
    /* contoh: kasih border */
    background: #f0f8ff;
    border-radius: 50%;
}


.menu-wraper28 {
    width: 100vw;
    /* penuh layar */
    margin-left: calc(-50vw + 50%);
    /* geser supaya sejajar dengan section */
    background: #ccc;
    /* contoh warna biar kelihatan */
    padding: 20px;
}


/* Menu Utama  */
.nav-menu-am {
    gap: 32px;
}

.header-nav-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}

.header-nav-menu ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-menu-am {}

/* Hover  */
.on-hover-item {
    position: relative;
}

.has-submenu .nav-menu__link {
    padding-inline-end: 16px;
}

.has-submenu>a {
    position: relative;
}

.has-submenu>a {
    position: relative;
    padding-right: 20px !important;
    /* tambah ruang antara teks dan ikon */
}

.has-submenu>a::before {
    position: absolute;
    content: "\e136";
    inset-inline-end: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-family: "Phosphor";
    font-weight: 900;
    color: #535353;
    transition: 0.2s linear;
}

.on-hover-dropdown {
    visibility: hidden;
    opacity: 0;
    margin-block-start: 16px;
}

.on-hover-item {
    position: relative;
}

.on-hover-item:hover .on-hover-dropdown {
    visibility: visible;
    opacity: 100;
    margin-block-start: 0;
}


.common-dropdown__item {
    display: block;
    border-radius: 4px;
    transition: 0.2s linear;
    position: relative;
}


/* Submenu Start */
.common-dropdown {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 100%;
    width: max-content;
    background-color: #000000;
    border-radius: 6px;
    min-width: 190px;
    overflow: hidden;
    padding: 8px !important;
    transition: 0.2s linear;
    z-index: 99;
}



.common-dropdown--sm {
    width: 132px;
    min-width: unset;
}

.common-dropdown__item {
    display: block;
    border-radius: 4px;
    transition: 0.2s linear;
    position: relative;
}

.common-dropdown__item.activePage .common-dropdown__link {
    color: #000 !important;
}

.common-dropdown__link {
    color: #010101;
    font-weight: 500;
    width: 100%;
    padding-inline-end: 16px;
    width: 100%;
    padding: 8px 14px;
    border-radius: inherit;
}

.common-dropdown__link:hover {
    color: #131313 !important;
}

.common-dropdown__link::before {
    position: absolute;
}

/* Submenu End */

.hover-bg-neutral-100:hover {
    background-color: #707070 !important;
}

.text-heading-two,
.select-style-one .select2-container--default .select2-selection--single .select2-selection__arrow b::before {
    color: #ffffff !important;
}

.common-dropdown {
    box-shadow: 0px 7px 21px -5px rgba(219, 219, 219, 0.1), 0 4px 21px -4px rgba(139, 139, 139, 0.1);
}

.on-hover-item:hover>a::before {
    color: #ffffff;
    transform: translateY(-50%) rotate(180deg);
}

/* Menu Utama End */


/* Scrool navigasi di bawah utama  */
.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}


.nav-scroller .nav {
    color: rgba(255, 255, 255, .75);
}

.nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    /* font-size: .875rem; */
    color: #121212;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .swiper-navsecondary .nav-link {
        font-size: .875rem;
    }

    .nav-link {
        padding: 0.4rem 0.5rem;

    }
}

.nav-scroller .nav-link:hover {
    color: #007bff;
}

.nav-scroller .active {
    font-weight: 500;
    color: #343a40;
}


.link {
    display: flex;
    align-items: center;
    margin-left: auto;
    /* pastikan dorong ke kanan */
}

.toggle-mobileMenu {
    margin-left: auto;
    padding: 0;
    /* hilangkan jarak ekstra jika ada */
}

/* Tab spesifikasi  */

/* 🌟 Custom Tabs Style */
.custom-tabs .nav-tabs {
    border-bottom: none;
    justify-content: center;
    margin-bottom: 0;
}

.custom-tabs .nav-link {
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: #f8f9fa;
    color: #555;
    margin: 0 4px;
    padding: 10px 20px;
    transition: all 0.2s ease-in-out;
}

.custom-tabs .nav-link:hover {
    background-color: #f1f3f5;
    color: #0d6efd;
}

.custom-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6;
    border-bottom-color: transparent !important;
    /* 🔥 ini kunci hilangkan garis bawah tab aktif */
    color: #0d6efd;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.custom-tabs .tab-content {
    border: 1px solid #dee2e6;
    /* border-top: none !important; 🔥 Hilangkan garis atas */
    border-radius: 0.5rem;
    background-color: #fff;
    position: relative;
    z-index: 1;
    margin-top: -1px;
}


/* Tab spesifikasi end */



/* === POSISI HEADER KANAN ATAS === */
.header-top-kanan {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
}

/* === ITEM UTAMA DROPDOWN === */
.lang-dropdown {
    position: relative;
}

.selected-language {

    font-size: 13px;
    transition: color 0.2s ease;
}

.selected-language:hover {
    color: #000;
}

/* === PANAH === */
.has-submenu-lang>a::before {
    position: absolute;
    content: "\e136";
    inset-inline-end: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-family: "Phosphor";
    font-weight: 900;
    color: #535353;
    transition: 0.2s linear;
}

.on-hover-item-lang:hover>a::before {
    color: #535353;
    transform: translateY(-50%) rotate(180deg);
}


/* === DROPDOWN LIST === */
.dropdown-list {
    position: absolute;
    top: 100%;
    /* langsung nempel di bawah tombol */
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    min-width: 130px;
    padding: 6px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all 0.2s ease;
    z-index: 9999;
}

/* === ITEM DI DALAM DROPDOWN === */
.lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: #555;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.lang-item:hover {
    background: #f5f5f5;
    color: #000;
}

.flag-icon {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    border: 0px solid #ddd;
    object-fit: cover;
}

/* === AKTIF SAAT HOVER === */
.lang-dropdown:hover .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* === CEGAH HILANG SAAT PINDAH KE SUB === */
.lang-dropdown:hover,
.lang-dropdown .dropdown-list:hover {
    pointer-events: auto;
}

/* === UNTUK PERANGKAT KECIL === */
@media (max-width: 768px) {
    .header-top-kanan {
        top: 4px;
        right: 8px;
    }

    .selected-language {
        font-size: 12px;
        margin-right: 10px;
    }
}


.navsecondary-prev {
    align-items: center;
    z-index: 11 !important;
    color: #555555 !important;
    height: 20px !important;
    width: 20px !important;
}

.navsecondary-next {
    align-items: center;
    z-index: 11 !important;
    color: #555555 !important;
    height: 20px !important;
    width: 20px !important;
}


@media (min-width: 768px) {
    .swiper-navsecondary .swiper-slide {
        width: auto;
    }
}

@media (max-width: 767px) {
    .swiper-navsecondary .swiper-slide {
        width: auto;
    }
}




/* Mobile (<=768px) */
@media (max-width: 768px) {
    .slider-wrapper-home1 .produk-item {
        font-size: 10px;
    }

    .produk-item .bi {
        font-size: 14px;
        font-weight: 700;
    }

    .produk-item h5 {
        font-size: 16px;
    }

    .spesifikasi-tabel {
        font-size: 11px;
    }

    .spesifikasi-tabel .judul-spesifikasi {
        font-size: 16px !important;
        color: #000;
    }



}


/* Faq */
.accordion-collapse a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Teks List  */
.text-list {
    font-size: 16px;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .produk-spesifikasi ul {
        padding: 0px;
    }

    .text-list {
        font-size: 11px !important;
    }

    .product-info h5 {
        font-size: 12px !important;
    }

    .text-heading h1 {
        font-size: 18px;
    }
}


.button-transf {
    border: 0;
    background-color: transparent;
}

.quantity__input {
    outline: none;
    /* Hilangkan outline default */
    box-shadow: none;
    /* Hilangkan shadow ketika fokus */
    border: 1px solid #ddd;
    /* Tetap ada border normal */
    border-radius: 6px;
    /* Opsional, biar bulat */
}

.quantity__input:focus {
    outline: none;
    box-shadow: none;
    border-color: #ddd;
    /* Atau warna border tetap sama */
}

.btn-order-produk form {
    flex: 1;
}

.quantity__input {
    width: 70px;
    min-width: 2.5em;
    text-align: center;
    flex: 0 0 auto;
    /* mencegah input melebar */
}

.icon-add-to-cart {
    height: auto !important;
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .icon-add-to-cart {
        width: 15px;
        height: auto !important;
    }

    .quantity__input {
        width: 50px;
    }
}

.btn-order-produk {
    align-items: stretch !important;
    /* pastikan anak flex punya tinggi sama */
}

.btn-order-produk .btn {
    height: 100%;
    /* bikin tombol isi penuh form */
}