html, body {overflow-x: hidden;}body, h1, h2, h3, h4, h5, h6, p, a, button {font-family: 'Switzer', 'Segoe UI', sans-serif;}@font-face {font-family: 'Switzer';src: url('/assets/fonts/Switzer-Regular.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap;}@font-face {font-family: 'Switzer';src: url('/assets/fonts/Switzer-Semibold.woff2') format('woff2');font-weight: 600;font-style: normal;font-display: swap;}@font-face {font-family: 'bootstrap-icons-subset';src: url('/assets/fonts/bootstrap-icons-subset.woff2') format('woff2');font-display: swap;unicode-range: U+000-5FF;}.bi {font-family: 'bootstrap-icons', 'bootstrap-icons-subset', system-ui, sans-serif;}@font-face {font-family: 'Switzer';src: url('/assets/fonts/Switzer-Bold-fixed.woff2') format('woff2');font-weight: 700;font-style: normal;font-display: swap;}@font-face {font-family: 'bootstrap-icons';src: url('/assets/fonts/bootstrap-icons.woff2') format('woff2');font-display: swap;}h1 {font-size: 2em;}h2 {font-size: 1.5rem;font-weight: 700;}p {font-size: 1rem;line-height: 1.6;font-weight: 400;color: #111;}section h1, article h1, aside h1, nav h1, main h1 {font-size: 2em !important;margin-top: 0.67em !important;margin-bottom: 0.67em !important;}h1.display-4 {font-size: 2.5rem;}section h1:not([class*="fs-"]) {font-size: 2rem !important;}.fs-2 {font-size: 2em;}.top-tagbar .col-9 {font-size: 15px;font-weight: 600;line-height: 1.4;text-transform: uppercase;min-height: 40px;display: flex;align-items: center;}.top-tagbar .bi {font-size: 16px;min-width: 1em;}.navbar, .btn {background-color: #ffffff;color: #000000;}.menu-link {display: inline-block;padding: 10px 12px;margin: 4px;font-size: 16px;}#blogs-page .content {min-height: 160px;}img {display: block;max-width: 100%;height: auto;}.img-fixed-ratio {aspect-ratio: 640 / 500;display: block;max-width: 100%;height: auto;}.img-aspect-cta {aspect-ratio: 640 / 500;width: 100%;height: auto;display: block;}.gallery-product img {aspect-ratio: 4 / 3;object-fit: cover;}.gallery-wrapper {min-height: 1000px;will-change: transform, opacity;contain: layout paint;}.categories {display: inline-block;background-color: #d1d8e0;color: #111;padding: 12px 20px;border-radius: 6px;font-weight: 600;margin: 8px;font-size: 1rem;transition: background-color 0.3s ease, color 0.3s ease;text-decoration: none;}.categories:hover {background-color: #cbd5e1;color: #000;}.categories.active {background-color: #0f172a;color: #fff;}.card-hover:hover, .about-image-custom:hover, .gallery-image:hover, .capacity-image:hover {transform: scale(1.02);transition: all 0.3s ease;box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);}.card-hover {color: #212529;}.card-hover h2.heading-highlight {background-color: #198754;color: #f8f9fa;font-weight: 700;font-size: 1.1rem;padding: 10px 16px;border-radius: 8px;display: inline-block;margin-bottom: 1rem;box-shadow: 0 1px 3px rgba(0,0,0,0.2);text-shadow: 0 1px 1px rgba(0,0,0,0.3);}.card-hover:hover {transform: scale(1.03);box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);}.card-hover h2.fs-5:not(.heading-highlight) {color: #111;}.card-hover p {color: #1a1a1a;font-size: 1rem;line-height: 1.6;font-weight: 400;margin-bottom: 0.75rem;}.footer-landing {background-color: #1a1a1a;color: #ffffff;}.footer-link a, .footer-desc, .footer-social a, .footer-area a {color: #f2f2f2;font-weight: 500;transition: color 0.3s ease;}.footer-link a:hover, .footer-social a:hover, .footer-area a:hover {color: #ffffff;font-weight: 600;text-decoration: none ;}.footer-area {color: #f2f2f2;font-weight: 600;font-size: 1.1rem;}.contrast-fix {color: #111 !important;font-weight: 600 !important;}.bg-dark .contrast-fix, .footer-dark .contrast-fix {color: #ffffff !important;}.cta-overlay {background: rgba(0, 0, 0, 0.6);padding: 30px;border-radius: 12px;text-align: center;color: white;max-width: 90%;}.cta-overlay h3, .cta-overlay p {color: #fff !important;font-weight: 600;}.cta-overlay h3 {font-size: 1.5rem;}.cta-overlay p {font-size: 1rem;margin-top: 10px;font-weight: 400;}.btn-primary {background-color: #007bff;color: white;border-radius: 8px;padding: 12px 24px;transition: background-color 0.3s ease, transform 0.3s ease;}.btn-primary:hover {background-color: #0056b3;transform: scale(1.05);}.cta-button:active {background-color: #c12d17;}.cta-button {padding: 10px 20px;}.insta-img {position: relative;overflow: hidden;}.insta-img img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;display: block;}.insta-img i {position: absolute;bottom: 15px;right: 15px;color: #ffffff;font-size: 24px;background-color: rgba(0,0,0,0.5);padding: 6px;border-radius: 50%;transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0;}.insta-img:hover img {transform: scale(1.05);}.insta-img:hover i {opacity: 1;transform: scale(1.1);}.row.g-0 {display: flex;flex-wrap: wrap;}.ecommerce-about img, .about-image-custom {width: 100%;height: auto;object-fit: cover;border-radius: 12px;}.section .col-lg-6 {margin-bottom: 30px;}.section.bg-light, .section {padding-top: 60px;padding-bottom: 60px;}.container .row {display: flex;flex-wrap: wrap;justify-content: space-between;}h2.footer-title, .text-start {font-size: 1.25rem;font-weight: 700;color: #343a40;}.text-muted {color: #363636 !important;}.fs-15 {font-size: 15px;line-height: 1.4;min-height: 1.5em;}.col-md-4.col-9 p {margin-bottom: 0;}.text-muted.fs-15 {color: #495057 !important;}.footer-link a, .footer-desc, .footer-title {color: #343a40;}.text-white-75 {color: rgba(255, 255, 255, 0.75);}h1.text-white {font-size: 2rem;margin-bottom: 20px;}@media (max-width: 768px) {.ecommerce-about .container, .section.bg-light .container {padding-left: 15px;padding-right: 15px;}.ecommerce-about .row {flex-direction: column;align-items: center;}.text-center h1 {font-size: 1.8rem;}.cta-overlay {padding: 20px;}.cta-button {padding: 10px 20px;}}.table {width: 100%;margin-top: 20px;border-collapse: collapse;}.table th, .table td {padding: 10px;text-align: left;border: 1px solid #ddd;}.table th {background-color: #f8f9fa;font-weight: bold;}.table tbody tr:hover {background-color: #f1f1f1;}@media (max-width: 768px) {.table th, .table td {font-size: 14px;}}.row.g-0 .col {padding: 3px;}.col-4, .col-sm-3, .col-md-2 {padding-left: 3px;padding-right: 3px;}.ecommerce-effect {z-index: -1;position: absolute;}.listblog-body .listblog-title {font-weight: 500;font-size: 0.85rem;margin-top: 5px;}.listblog-body .listblog-text {font-size: 0.7rem;color: #6c757d;margin-bottom: 5px;line-height: 1.2;}.listblog-body .btn {font-size: 0.7rem;padding: 5px 10px;background-color: #007bff;color: #fff;border-radius: 6px;transition: background-color 0.3s;}.row.justify-content-center {justify-content: center;}.gallery-image {max-width: 100%;height: auto;object-fit: cover;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);}.listblog img {max-width: 100%;height: auto;object-fit: cover;border-radius: 6px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);}.blog-main-image img {border-radius: 12px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);width: 100%;height: auto;}.img-fluid {max-width: 400px;width: 100%;height: auto;margin: 0 auto;display: block;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}.rounded {border-radius: 8px;}.shadow-sm {box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}.col-md-12.text-center img {max-width: 400px;width: 100%;height: auto;}.dropdown-hover:hover .dropdown-menu {opacity: 1 !important;visibility: visible !important;}.dropdown-menu {opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;}.slider-container {aspect-ratio: 1920 / 720;width: 100%;position: relative;}.slider-img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}.ecommerce-about {background-image: url('/assets/images/profile-bg.webp');background-position: center;background-size: cover;}.badge.bg-primary {background-color: #0051A8;color: #ffffff;}.badge.bg-primary .fs-11 {color: #ffffff !important;}.fs-11 {color: #ffffff !important;}.badge.bg-primary .fw-medium {font-weight: bold;}@media (max-width: 768px) {.touch-link {padding: 15px 25px;font-size: 18px;}}@media (max-width: 768px) {ul.footer-link .touch-link {padding: 15px 25px;font-size: 18px;text-decoration: none !important;}}ul.link-list {padding-left: 0;list-style-type: none;}ul.link-list li {margin-bottom: 5px;}h4.h4-kategori {font-size: 14px;margin-bottom: 10px;padding: 0;color: #333;line-height: 1.5;}.categories:focus-visible, .btn:focus-visible, .cta-button:focus-visible {outline: 2px solid #0056b3;outline-offset: 4px;border-radius: 6px;background-color: #004080;color: #ffffff !important;box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.2);text-decoration: none;}.rotate-hover {display: block;transition: transform 0.6s ease-in-out;}.rotate-hover:hover {transform: rotate(360deg);}.icon-hover-rotate {display: inline-block;transition: transform 0.6s ease-in-out;}.icon-hover-rotate:hover {transform: rotate(360deg);}.touch-link {display: inline-block;padding: 12px 20px;margin: 6px 0;font-size: 16px;font-weight: 600;text-align: center;line-height: 1.5;border-radius: 6px;color: #002040;background-color:#ffffff;border: 1px solid #004080;text-decoration: none;transition: all 0.3s ease-in-out;}.touch-link:focus-visible, .touch-link:hover {background-color: #004080;color: #ffffff !important;box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.2);text-decoration: none;}.touch-link-dark {display: inline-block;padding: 12px 20px;margin: 6px 0;font-size: 16px;font-weight: 600;text-align: center;line-height: 1.5;border-radius: 6px;color: #ffffff;background-color: transparent;text-decoration: none;transition: all 0.3s ease-in-out;}.touch-link-dark:focus-visible, .touch-link-dark:hover {background-color: #ffffff;color: #000000 !important;text-decoration: none;}.touch-link-dark:hover {background-color: #e5e5e5;color: #000 !important;}.touch-link-light {color: #002861;background-color: #ffffff;font-weight: 600;border-radius: 6px;display: inline-block;padding: 10px 18px;text-decoration: none;transition: all 0.3s ease;}.touch-link-light:focus-visible, .touch-link-light:hover {background-color: #004080;color: #ffffff !important;box-shadow: 0 0 0 4px rgba(0, 64, 128, 0.2);text-decoration: none;}ul.footer-link {padding-left: 0;list-style: none;margin: 0;}ul.footer-link li {margin-bottom: 6px;}ul.footer-link .touch-link {display: inline-block;padding: 8px 16px;margin: 0;font-size: 15px;line-height: 1.4;border-radius: 4px;color: #f2f2f2;text-decoration: none !important;transition: all 0.3s ease;}ul.footer-link .touch-link:hover {background-color: #28a745 !important;color: #ffffff !important;text-decoration: none !important;border-radius: 4px;}ul.link-list .touch-link {display: inline-block;padding: 12px 20px;margin: 6px 0;font-size: 16px;font-weight: 600;text-align: center;line-height: 1.5;border-radius: 6px;color: #000;background-color: #fff;text-decoration: none;transition: all 0.3s ease-in-out;}ul.link-list .touch-link:hover {color: #fff;background-color: #28a745;border-radius: 6px;}@media (max-width: 767.98px) {.carousel-item {min-height: 620px;}}@keyframes fadeInUpSlide {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}.slide-fade {opacity: 0;transform: translateY(30px);animation: fadeInUpSlide 0.8s ease-out forwards;animation-delay: 0.3s;display: block;will-change: opacity, transform;min-height: 2em;}.slide-subtext {color: #fff;font-weight: 700;min-height: 2em;}.carousel-control-prev {left: 10px;}.carousel-control-next {right: 10px;}img.unsized {display: block;width: 100%;aspect-ratio: 4 / 3;object-fit: cover;}.btn-wa, .btn-pesan, .btn-telp {
    min-height: 48px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 700; /* Font lebih tebal untuk keterbacaan maksimal */
    border-radius: 8px;
    border: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
    white-space: nowrap;
    color: #ffffff !important; /* Memaksa warna teks putih untuk kontras tinggi */
    text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Bayangan halus di belakang teks */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Efek timbul agar tidak datar/gelap */
}.btn-wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.btn-wa:hover {
    transform: translateY(-3px); /* Efek naik sedikit saat hover */
    box-shadow: 0 8px 15px rgba(37, 211, 102, 0.4); /* Glow effect hijau */
    background: linear-gradient(135deg, #20bd5a 0%, #0f7a71 100%);
    color: #ffffff !important;
}.btn-telp {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.btn-telp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 123, 255, 0.4); /* Glow effect biru */
    background: linear-gradient(135deg, #0069d9 0%, #003d82 100%);
    color: #ffffff !important;
}.btn-pesan {
    background: linear-gradient(135deg, #6610f2 0%, #520dc2 100%);
}

.btn-pesan:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(102, 16, 242, 0.4); /* Glow effect ungu */
    background: linear-gradient(135deg, #520dc2 0%, #3a0a91 100%);
    color: #ffffff !important;
}.scroll-to-top {position: fixed;bottom: 30px;right: 30px;display: none;z-index: 9999;background-color: #0d6efd;color: #fff;padding: 12px 16px;border-radius: 50px;font-size: 16px;font-weight: 600;text-align: center;text-decoration: none;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);cursor: pointer;transition: opacity 0.4s, visibility 0.4s, background-color 0.3s ease;}.scroll-to-top:hover {background-color: #0b5ed7;transform: scale(1.05);box-shadow: 0 0 15px rgba(13, 110, 253, 0.4);}.scroll-to-top.show {display: block;}.our-clients {text-align: center;padding: 50px 0;}.client-logos {display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;max-width: 100%;margin: 0 auto;}.logo-item {flex: 0 0 calc(12.5% - 20px);max-width: calc(12.5% - 20px);display: flex;justify-content: center;align-items: center;}.logo-item img {max-height: 90px;width: auto;height: auto;object-fit: contain;opacity: 0.8;transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}.logo-item img:hover {opacity: 1;transform: scale(1.1);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);}@media (max-width: 992px) {.logo-item {flex: 0 0 25%;max-width: 25%;}}@media (max-width: 576px) {.logo-item {flex: 0 0 33.33%;max-width: 33.33%;}.logo-item img {max-height: 45px;}}.breadcrumb {background-color: transparent;margin-bottom: 1rem;}.breadcrumb-item {font-size: 14px;}.breadcrumb-item + .breadcrumb-item::before {content: "›";}.breadcrumb-item a, .breadcrumb a {color: #ffffff !important;}.breadcrumb-item.active {color: #343a40;}.breadcrumb a:hover, .breadcrumb-item a:hover {color: #007bff;}#menu-atas {height: 40px;position: fixed;top: 0;width: 100%;z-index: 1050;transition: top 0.3s ease;}#menu-atas.hidden {transform: translateY(-100%);transition: transform 0.3s ease;}#navbar {position: fixed;top: 40px;left: 0;width: 100%;min-height: 70px;z-index: 1050;background-color: #fff;transition: top 0.3s ease;}.navbar-nav > li > .nav-link {padding-top: 1rem;padding-bottom: 1rem;}.navbar-fixed-top {top: 0 !important;}.navbar-below-topbar {top: 40px;}.ecommerce-navbar {background-color: #fff;box-shadow: none !important;border-bottom: none !important;}.navbar-brand img {max-height: 36px;margin: 2px 0;}.nav-link {min-width: 80px;text-align: center;}.nav-link.dropdown-toggle::after {display: none !important;}.nav-item.dropdown.show > .nav-link .bi-chevron-down, .nav-item.dropdown:hover > .nav-link .bi-chevron-down {transform: rotate(180deg);transition: transform 0.3s ease;}body {padding-top: 120px;font-size-adjust: 0.5;}.h1-section-fix {font-size: 2em !important;}.menu-title {color: #212529 !important;font-size: 12px;font-weight: 600;margin-bottom: 6px;}.menu-title.fs-11 {color: #212529 !important;border-left: 3px solid #198754;padding-left: 8px;margin-bottom: 8px;font-weight: 600;}ul.list-check-icon li {padding-left: 1.8em;text-indent: -1.8em;}ul.list-check-icon li i {width: 1.8em;display: inline-block;}.listblog {position: relative;overflow: hidden;display: flex;flex-direction: column;height: 100%;}.listblog a {position: relative;display: block;}.listblog i.bi-search {position: absolute;bottom: 8px;left: 8px;transform: none;font-size: 1.2rem;color: white;background-color: rgba(0, 0, 0, 0.4);padding: 5px;border-radius: 50%;transition: transform 0.3s ease;}.listblog a:hover i.bi-search {transform: scale(1.2);}.listblog-body {display: flex;flex-direction: column;justify-content: space-between;padding-top: 0.5rem;height: 140px;}.listblog-title {font-size: 1rem;margin-bottom: 0.25rem;font-weight: 600;}.listblog-text {flex-grow: 1;font-size: 0.85rem;color: #555;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.avatar-sm {width: 64px;height: 64px;}@media (min-width: 768px) {.avatar-sm {width: 80px;height: 80px;}}.carousel-inner img {aspect-ratio: 2 / 1;width: 100%;object-fit: cover;}.carousel-inner, .carousel-item {min-height: 720px;}.carousel-control-prev, .carousel-control-next {z-index: 9999;position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);width: 40px;height: 40px;}.carousel-inner, .ecommerce-home {aspect-ratio: 1920 / 720;height: auto;}@media (min-width: 992px) {.carousel-item {height: 720px;}}.gallery-product {aspect-ratio: 4 / 3;width: 100%;display: block;overflow: hidden;will-change: transform;}.gallery-product img {object-fit: cover;width: 100%;height: 100%;}.card-body {min-height: 180px;will-change: transform;}.dropdown-mega-menu-xl {min-height: 300px;}.overlay-box {min-height: 300px;padding-top: 10px;padding-bottom: 40px;position: relative;}.overlay-box::before {content: "";position: absolute;top: -20px;bottom: -20px;width: 100vw;height: 100%;left: 0;background-color: rgba(255, 255, 255, 0.4);z-index: -1;border-radius: 30px;backdrop-filter: blur(4px);}.overlay-box.overlay-left::before {left: 0;}.overlay-box.overlay-right::before {right: 0;left: auto;}.overlay-box.overlay-left::after, .overlay-box.overlay-right::after {content: "";position: absolute;top: 50%;width: 40px;height: 60px;background-color: rgba(255, 255, 255, 0.4);z-index: -1;backdrop-filter: blur(4px);}.overlay-box.overlay-left::after {left: -40px;transform: translateY(-50%);clip-path: polygon(100% 0, 0 50%, 100% 100%);}.overlay-box.overlay-right::after {right: -40px;transform: translateY(-50%);clip-path: polygon(0 0, 100% 50%, 0 100%);}.overlay-box h2, .overlay-box p {min-height: 2em;}.overlay-box h2.display-4 {font-size: 2rem !important;line-height: 1.2 !important;margin-bottom: 0.5rem !important;color: #0f172a;}.overlay-box p.fs-20 {font-size: 1rem !important;line-height: 1.5 !important;margin-bottom: 1rem !important;}.overlay-box .btn {padding: 12px 24px;font-size: 1rem;line-height: 1.4;font-weight: 600;white-space: nowrap;transition: all 0.3s ease;}@media (max-width: 768px) {.overlay-box {padding: 20px 20px 30px 20px;border-radius: 20px;min-height: 240px;}.overlay-box h2.display-4 {font-size: 1.5rem !important;}.overlay-box p.fs-20 {font-size: 0.95rem !important;}.overlay-box .btn {font-size: 0.9rem;padding: 10px 18px;}}.heading-highlight {background-color: #003311 !important;color: #FFFFFF !important;padding: 0.4rem 0.75rem;border-radius: 0.3rem;display: inline-block;}.text-contrast-safe {color: #222222;background-color: #ffffff;}.card-hover a:hover {color: #002855;text-decoration: underline;}.top-tagbar {background-color: #fceabb !important;color: #000 !important;transition: all 0.3s ease-in-out;}.top-tagbar.hide-on-scroll {transform: translateY(-100%);opacity: 0;transition: all 0.3s ease-in-out;}#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity .5s ease}.preloader-content{display:flex;flex-direction:column;align-items:center}.loader-logo{width:100px;animation:flip 2s ease-in-out infinite alternate;transform-style:preserve-3d;margin-bottom:10px}@keyframes spin{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.loading-text{font-size:16px;color:#555;font-weight:500}.contact-page .card{transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.1);animation:floating 3s ease-in-out infinite;position:relative;top:0}@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}.contact-page .card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 10px 20px rgba(0,0,0,.15);top:-5px}.contact-page .col-lg-4:nth-child(1) .card{animation-delay:0s}.contact-page .col-lg-4:nth-child(2) .card{animation-delay:.5s}.contact-page .col-lg-4:nth-child(3) .card{animation-delay:1s}.contact-page .avatar-title{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;font-size:22px;transition:all .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.1);position:relative;overflow:hidden}.contact-page .avatar-title::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 100%);z-index:1}.contact-page .avatar-title i{position:relative;z-index:2}.contact-page .col-lg-4:nth-child(1) .avatar-title{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff}.contact-page .col-lg-4:nth-child(2) .avatar-title{background:linear-gradient(135deg,#f093fb 0,#f5576c 100%);color:#fff}.contact-page .col-lg-4:nth-child(3) .avatar-title{background:linear-gradient(135deg,#4facfe 0,#00f2fe 100%);color:#fff}.contact-page .card:hover .avatar-title{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 15px rgba(0,0,0,.2)}.contact-page .card:hover .avatar-title::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:inherit;opacity:.3;z-index:0;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1);opacity:.3}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1);opacity:0}}.contact-page .card:hover h5{color:#333;transform:translateX(5px)}.contact-page .card:hover p{color:#555}.footer-dark{color:#e0e0e0}.footer-link{color:#fff!important;text-decoration:none;transition:color .3s ease;margin-left:4px}img,.gallery-product,.card-body,.carousel-item,.gallery-wrapper,.ecommerce-home,.slider-container,.slider-img,.gallery-image,.blog-main-image img,.listblog img,.insta-img img,.ecommerce-about img,.about-image-custom,.avatar-sm,.card-img-top,.article-image{aspect-ratio:attr(width)/attr(height)}.hidden {display: none !important;}.navbar-fixed-top {position: fixed;top: 0;width: 100%;z-index: 1020;transition: top 0.3s ease;}.navbar-below-topbar {position: relative;}section h1, section h2 {font-size: clamp(1.5rem, 4vw + 1rem, 3rem);line-height: 1.2;}.hover-primary {transition: color 0.3s ease;}.hover-primary:hover {color: var(--bs-primary) !important;}.text-primary-emphasis {color: #0d6efd !important;}.text-dark-emphasis {color: #495057 !important;}.text-body-secondary {color: #6c757d !important;}.hover-underline {position: relative;text-decoration: none !important;}.hover-underline::after {content: '';position: absolute;width: 0;height: 2px;bottom: -2px;left: 0;background-color: currentColor;transition: width 0.3s ease;}.hover-underline:hover::after {width: 100%;}.text-decoration-underline {text-decoration-color: currentColor !important;text-decoration-thickness: 2px !important;}.text-decoration-underline {text-decoration-thickness: 2px !important;text-underline-offset: 3px;}.card-hover {transition: all 0.3s ease;}.card-hover:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.1);}.icon-hover-rotate {transition: transform 0.3s ease;}.card-hover:hover .icon-hover-rotate {transform: rotate(10deg);}

/* ===============================
   WCAG CONTRAST FIX – GLOBAL
   =============================== */

/* Primary color lebih gelap (aman di bg-light & putih) */
:root {
  --bs-primary: #0b4fc1;
}

/* Link primary */
.text-primary,
.text-primary-emphasis,
a.text-primary {
  color: #0b4fc1 !important;
}

/* Hover link */
.text-primary:hover,
a.text-primary:hover {
  color: #093f9a !important;
}

/* Button primary */
.btn-primary {
  background-color: #0b4fc1 !important;
  border-color: #0b4fc1 !important;
  color: #ffffff !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #093f9a !important;
  border-color: #093f9a !important;
  color: #ffffff !important;
}

/* Link di background terang */
.bg-light a {
  color: #0b4fc1;
  font-weight: 600;
}

.bg-light a:hover {
  color: #093f9a;
}

/* Heading & strong di bg-light */
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light strong {
  color: #212529;
}

/* CTA besar */
.simulasi-btn,
.btn-lg {
  font-weight: 700;
  letter-spacing: .2px;
}

/* Breadcrumb link (putih di overlay aman) */
.breadcrumb a {
  color: #ffffff !important;
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ================================
   BASE ACCESSIBILITY FIX
   ================================ */
.text-muted { color: #495057; }
.small, .fs-15 { color: #495057; }
.bg-light .text-muted,
.bg-white .text-muted { color: #495057; }
.lead.text-muted { color: #343a40; }

/* ================================
   BUTTON & LINK BASE
   ================================ */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}
.btn-outline-primary:hover {
  background-color: #0d6efd;
  color: #fff;
}
.btn-primary {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
}
.bg-light a.text-primary {
  color: #0b5ed7;
}

/* ================================
   TARGETED CONTRAST FIX (Lighthouse)
   ================================ */
.heading-highlight {
  background-color: #0F4D31; /* hijau lebih gelap, AA-safe */
  color: #ffffff;            /* tetap putih */
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-block;
}

.text-contrast-safe {
  color: #343a40;
}
.touch-link-light {
  color: #0b5ed7;
  font-weight: 500;
}
.touch-link-light:hover {
  color: #084298;
}
.bg-light,
.bg-white {
  color: #212529;
}

.hero::before {
  background: rgba(13,110,253,0.55);
}

.hero h1 {
	color: #f8f9fa;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

#simulasi-cta {
    background: linear-gradient(135deg, #f8f9fc, #eef3ff);
}
.badge-simulasi {
    background-color: #e7f0ff;   /* biru sangat muda */
    color: #0d3b8e;              /* biru tua (kontras tinggi) */
    font-weight: 600;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #cfe0ff;
}

/* Box utama */
.simulasi-box {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    padding: 3rem 2.5rem;
}

/* Wrapper maskot pakai d-flex */
.simulasi-maskot-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Maskot behavior */
.simulasi-maskot {
    max-width: 340px;
    animation: floatMaskot 4s ease-in-out infinite;
    transition: transform .25s ease, filter .25s ease;
}

.simulasi-maskot:hover {
    transform: translateY(-10px) scale(1.02);
    filter: drop-shadow(0 14px 30px rgba(0,0,0,.15));
}

/* Floating animation mirip card langkah */
@keyframes floatMaskot {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.simulasi-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* STEP ITEM */
.simulasi-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937; /* teks gelap */
}

/* ANGKA */
.simulasi-step-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e7f0ff; /* biru sangat muda */
    color: #0d3b8e;     /* biru tua → KONTRAS AMAN */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #cfe0ff;
}

/* PANAH */
.simulasi-step-arrow {
    width: 18px;
    height: 2px;
    background: #c0c7d1;
    position: relative;
}

.simulasi-step-arrow::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 6px solid #c0c7d1;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
/* =========================
   SIMULASI EVENT – UI CORE
   ========================= */

/* Accordion aktif (HANYA SIMULASI FAQ) */
#faq-simulasi .accordion-button:not(.collapsed) {
    background-color: #e9ecef;
}

/* Sticky Total */
.sticky-total {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px;
    z-index: 1020;
    border-top: 1px solid #dee2e6;
}

/* Beri ruang sticky */
#main-content {
    padding-bottom: 140px;
}

/* =========================
   SERVICE CHECKLIST (SIMULASI)
   ========================= */

#simulasiForm .service-item {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
    transition: background-color 0.2s;
}
#simulasiForm .service-item:hover {
    background-color: #f1f3f5;
}

#simulasiForm .service-label-text {
    color: #212529;
    font-weight: 600;
}
#simulasiForm .service-desc {
    color: #495057;
    font-size: 0.9rem;
}
#simulasiForm .service-include {
    color: #0d6efd;
    font-size: 0.85rem;
    font-style: italic;
}

#simulasiForm .manual-qty-input {
    width: 70px;
    height: 30px;
    font-size: 14px;
    text-align: center;
    border:1px solid #ced4da;
    border-radius: 4px;
    margin-left: auto;
}

#simulasiForm .form-check-input {
    width:1.2em;
    height:1.2em;
    margin-top:0.3em;
}

/* =========================
   FAQ SIMULASI
   ========================= */

#faq-simulasi h2 {
    font-size: 30px;
    line-height: 1.3;
}

#faq-simulasi .accordion-button {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.6;
    padding: 18px 20px;
}

#faq-simulasi .accordion-body {
    font-size: 16.5px;
    line-height: 1.7;
    color: #343a40;
    padding: 16px 20px 20px;
}

#faq-simulasi .accordion-item {
    border-radius: 10px;
    overflow: hidden;
}

/* Mobile */
@media (max-width: 576px) {
    #faq-simulasi h2 {
        font-size: 24px;
    }
    #faq-simulasi .accordion-button {
        font-size: 16px;
    }
    #faq-simulasi .accordion-body {
        font-size: 15.5px;
    }
}
/* =========================
   FORCE MOVE TO TOP ABOVE STICKY TOTAL (MOBILE)
   ========================= */
@media (max-width: 576px) {
    .scroll-to-top {
        bottom: 90px !important;
    }
}
/* =====================================================
   ACCESSIBILITY FINAL FIX — LIGHTHOUSE 100 (CLEAN)
   ===================================================== */

/* ======================
   1. HEADING NORMAL
   ====================== */
.heading-highlight {
  color: #212529 !important;
}

/* ======================
   2. HEADING BADGE (CARD)
   ====================== */
.card-hover .heading-highlight {
  background-color: #0f4d31;
  color: #ffffff !important;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  display: inline-block;
}

/* ======================
   3. BODY TEXT
   ====================== */
.text-contrast-safe,
.seo-text p,
.seo-text li,
.bg-light p,
.bg-light li {
  color: #343a40 !important;
}

/* ======================
   4. SIMULASI CTA
   ====================== */
.simulasi-box {
  background-color: #f8f9fa !important;
  color: #212529;
}

.simulasi-box a {
  color: #0b5ed7 !important;
  font-weight: 600;
  text-decoration: underline;
}

.simulasi-box a:hover {
  color: #084298 !important;
}

/* ======================
   5. LINK LIST ACARA
   ====================== */
.touch-link-light {
  color: #0b5ed7 !important;
  font-weight: 500;
}

.touch-link-light:hover,
.touch-link-light:focus {
  color: #084298 !important;
  text-decoration: underline;
}

/* ======================
   6. BOOTSTRAP MUTED FIX
   ====================== */
.text-muted {
  color: #495057 !important;
}

/* ======================
   7. BUTTON OUTLINE
   ====================== */
.btn-outline-primary {
  color: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
}

.btn-outline-primary:hover {
  background-color: #0b5ed7 !important;
  color: #ffffff !important;
}

/* ======================
   8. LINK SAFETY
   ====================== */
a {
  text-underline-offset: 2px;
}
/* =====================================================
   CTA SIMULASI – TEKS & HOVER AMAN
   ===================================================== */
.simulasi-box .btn {
  color: #ffffff !important;
  text-decoration: none !important;
}

.simulasi-box .btn:hover,
.simulasi-box .btn:focus,
.simulasi-box .btn:active {
  color: #ffffff !important;
}

/* =====================================================
   ACCESSIBILITY – LINK NOT COLOR ONLY
   ===================================================== */

/* Link di dalam teks/paragraf */
p a,
.lead a,
.seo-text a {
  color: #084298;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 500;
}

p a:hover,
p a:focus {
  color: #052c65;
  text-decoration-thickness: 2px;
}

/* =====================================================
   ACCESSIBILITY – CONTRAST FIX
   ===================================================== */

/* Heading */
.heading-highlight {
  color: #0f172a !important; /* kontras aman di bg terang & abu */
}

/* Paragraf */
.text-contrast-safe {
  color: #1f2937 !important;
}

/* Link list / teks biasa */
.touch-link-light {
  color: #084298 !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.touch-link-light:hover,
.touch-link-light:focus {
  color: #ffffff !important;   /* AMAN di bg biru gelap */
  text-decoration-thickness: 2px;
}

/* =====================================================
   BUTTON OUTLINE – ACCESSIBILITY SAFE
   ===================================================== */
.btn-outline-primary {
  color: #084298;
  border-color: #084298;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #084298;
  color: #ffffff !important;
}
/* Hover effect untuk cards */
.hover-shadow {
    transition: all 0.3s ease;
}
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.hero-service {
    background-image: url('/assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.hero-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85); /* overlay gelap agar teks terbaca */
    z-index: -1;
}

/* ============================================ */
/* HERO SECTION - CARD EFFECT TRANSPARAN DENGAN TEKS CERAH */
/* ============================================ */

.ecommerce-about {
    position: relative;
}

/* Kotak transparan dengan efek glassmorphism */
.ecommerce-about .hero-content-card {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    border-radius: 28px;
    padding: 2rem 2.5rem;
    margin: 2rem 0;
    box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.25) inset,
                0 8px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

/* Efek timbul saat hover (opsional) */
.ecommerce-about .hero-content-card:hover {
    transform: translateY(-4px);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 30px 45px -15px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

/* ============================================ */
/* TEKS KONTRAK CERAH */
/* ============================================ */

.ecommerce-about .hero-content-card h1,
.ecommerce-about .hero-content-card .h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.3px;
    margin-bottom: 0.75rem;
}

.ecommerce-about .hero-content-card .lead {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.25rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.5rem;
}

.ecommerce-about .hero-content-card .text-warning {
    color: #ffc107 !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ecommerce-about .hero-content-card .text-white-50 {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
}

.ecommerce-about .hero-content-card .small {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.ecommerce-about .hero-content-card .bi-check-circle-fill {
    color: #2ecc71;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* ============================================ */
/* BREADCRUMB DI DALAM CARD */
/* ============================================ */

.ecommerce-about .hero-content-card .breadcrumb {
    background: rgba(0, 0, 0, 0.35);
    display: inline-flex;
    padding: 8px 22px;
    border-radius: 40px;
    margin-top: 1.25rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ecommerce-about .hero-content-card .breadcrumb-item a,
.ecommerce-about .hero-content-card .breadcrumb-item.active {
    color: #ffffff !important;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.ecommerce-about .hero-content-card .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.7);
    content: "/";
}

/* ============================================ */
/* BUTTON - TETAP MENARIK */
/* ============================================ */

.ecommerce-about .hero-content-card .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ffb347 100%);
    border: none;
    font-weight: 600;
    padding: 12px 28px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.ecommerce-about .hero-content-card .btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffb347 0%, #ffa117 100%);
}

.ecommerce-about .hero-content-card .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.9);
    font-weight: 600;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    transition: all 0.3s ease;
}

.ecommerce-about .hero-content-card .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    border-color: #ffffff;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */

@media (max-width: 768px) {
    .ecommerce-about .hero-content-card {
        padding: 1.5rem 1.2rem;
        margin: 1.5rem 0;
        border-radius: 24px;
    }
    
    .ecommerce-about .hero-content-card h1 {
        font-size: 1.6rem !important;
    }
    
    .ecommerce-about .hero-content-card .lead {
        font-size: 1rem !important;
    }
    
    .ecommerce-about .hero-content-card .btn-warning,
    .ecommerce-about .hero-content-card .btn-outline-light {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .ecommerce-about .hero-content-card .breadcrumb {
        padding: 6px 16px;
    }
}

/* Alternatif - Tombol dengan background solid */
.ecommerce-about .hero-content-card .btn-outline-light {
    border: none;
    font-weight: 700;
    padding: 12px 28px;
    background: rgba(13, 110, 253, 0.9);
    transition: all 0.3s ease;
    color: #ffffff !important;
    border-radius: 8px;
}

.ecommerce-about .hero-content-card .btn-outline-light:hover {
    background: #0b5ed7;
    transform: translateY(-2px);
    color: #ffffff !important;
}