/********** Template CSS **********/
:root {
    --primary: #3da9fc;
    /* Warna teks isi halaman. Nilai bawaan template (#90b4ce) hanya mencapai kontras 2.19:1
       di atas putih, jauh di bawah ambang WCAG AA 4.5:1, sehingga seluruh isi halaman terbaca
       samar. Nilai ini mempertahankan nuansa biru-abu template dengan kontras 6.9:1. */
    --secondary: #445C73;
    --light: #F5F5F5;
    --dark: #011638;
}

/* Bootstrap menetapkan warna teks body sebagai nilai tetap, jadi variabel di atas perlu
   diterapkan ulang di sini supaya seluruh isi halaman memakai satu warna yang sama. */
body {
    color: var(--secondary);
}

.back-to-top {
    position: fixed;
    /* Selalu flex, tanpa display:none: kelas .btn-lg-square sudah mengatur flex untuk
       memusatkan ikon, dan menyembunyikan tombol lewat opacity menjaga tata letak itu utuh. */
    right: 30px;
    bottom: 30px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

h1,
h2,
.h1,
.h2,
.fw-bold {
    font-weight: 700 !important;
}

h3,
h4,
.h3,
.h4,
.fw-medium {
    font-weight: 600 !important;
}

h5,
h6,
.h5,
.h6,
.fw-semi-bold {
    font-weight: 500 !important;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


.topbar-right {
    position: relative;
    background: var(--primary);
}

.topbar-right::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 100%;
    top: 0;
    left: -15px;
    transform: skewX(-30deg);
    background-color: var(--primary);
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand {
    position: relative;
    padding-right: 50px;
    height: 75px;
    display: flex;
    align-items: center;
    /* background: var(--primary); */
    color: var(--primary);
}

/* .navbar .navbar-brand::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 100%;
    top: 0;
    right: -25px;
    transform: skewX(-30deg);
    background-color: var(--primary);
} */

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 20px 0;
    color: var(--dark);
    font-size: 18px;
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
/* A slide without an uploaded image keeps the dark brand background, so the
   caption stays readable instead of white text on white. */
.carousel-item {
    background: var(--dark);
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, rgba(2, 36, 91, 1) 0%, rgba(2, 36, 91, 0) 100%);
    z-index: 1;
}

/* Template reference: img/carousel-*.jpg is 1920x1080. Pinning the ratio keeps any
   upload at the template height instead of stretching the slide. */
@media (min-width: 769px) {
    #header-carousel .carousel-item img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}

/* Bootstrap sets `outline: 0` on a focused carousel control, which would leave
   keyboard users with no idea where they are. */
#header-carousel .carousel-control-prev:focus-visible,
#header-carousel .carousel-control-next:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 4px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--primary);
    border: 15px solid var(--primary);
    border-radius: 3.5rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }

    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: linear-gradient(to right, rgba(2, 36, 91, 1) 0%, rgba(2, 36, 91, 0) 100%), url(../img/carousel-2.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--light);
}


/*** Facts ***/
.facts {
    position: relative;
    margin: 6rem 0;
    background: var(--dark);
}

.facts .border {
    border-color: rgba(255, 255, 255, .1) !important;
}


/*** Service ***/
.service-item {
    position: relative;
    margin: 65px 0 25px 0;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.service-item .service-img {
    position: absolute;
    padding: 12px;
    width: 130px;
    height: 130px;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .09);
    z-index: 2;
}

.service-item .service-detail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
}

.service-item .service-title {
    position: absolute;
    padding: 65px 30px 25px 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    transition: .5s;
}

.service-item:hover .service-title,
.service-item:focus-within .service-title {
    top: -100%;
}

.service-item .service-text {
    position: absolute;
    overflow: hidden;
    padding: 65px 30px 25px 30px;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    display: flex;
    align-items: center;
    text-align: center;
    background: rgba(2, 36, 91, .7);
    transition: .5s;
}

.service-item:hover .service-text,
.service-item:focus-within .service-text {
    top: 0;
}

.service-item .service-text::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100px;
    top: -100%;
    left: 0;
    transform: skewY(-12deg);
    background: #FFFFFF;
    transition: .5s;
}

.service-item:hover .service-text::before,
.service-item:focus-within .service-text::before {
    top: -55px;
}

.service-item .btn {
    position: absolute;
    width: 130px;
    height: 50px;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    background: #FFFFFF;
    border: none;
    box-shadow: 0 0 45px rgba(0, 0, 0, .09);
    z-index: 2;
}

.service-item .btn:hover {
    color: #FFFFFF;
    background: var(--primary);
}


/*** Project ***/
.project-carousel {
    position: relative;
    background: var(--dark);
}

.project-item {
    position: relative;
    display: block;
}
.project-item img {
    width: 100%;
    /* Template reference: img/project-*.jpg is 400x500. Pinning the ratio here keeps
       any upload cropped to the card instead of stretching the carousel. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: .5s;
}

.project-item:hover img,
.project-carousel .owl-item.center img {
    margin-top: -60px;
}

.project-item .project-title {
    position: absolute;
    padding: 0 15px;
    width: 100%;
    height: 80px;
    bottom: -110px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--dark);
    transition: .5s;
}

.project-item:hover .project-title,
.project-carousel .owl-item.center .project-title  {
    bottom: -60px;
}

.project-item .project-title::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 30px;
    top: -15px;
    left: 0;
    transform: skewY(-5deg);
    background: var(--dark);
    transition: .5s;
}

.project-carousel .owl-nav {
    position: absolute;
    width: 100%;
    height: 45px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    transition: .5s;
    opacity: 0;
    z-index: 1;
}

.project-carousel:hover .owl-nav,
.project-carousel:focus-within .owl-nav {
    opacity: 1;
}

.project-carousel .owl-nav .owl-prev,
.project-carousel .owl-nav .owl-next {
    margin: 0 30px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 45px;
    font-size: 22px;
    transition: .5s;
}


/*** Footer ***/
.footer {
    color: #B0B9AE;
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #B0B9AE;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}

/*** Contact block in the footer ***/
/* Font Awesome is loaded with line-height: 1, so a 16px icon occupies a 16px line box.
   In a flex row that box is centred against the 24px line box of the text, which leaves
   the icon riding about 1.5px high. Inheriting the text line height removes that offset,
   and flex: none stops the flex item from being squeezed on narrow columns. */
.footer-contact li {
    align-items: baseline;
}

.footer-contact li > i {
    flex: none;
    line-height: inherit;
}

.copyright {
    color: #B0B9AE;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/*** Navbar brand with an uploaded logo ***/
.navbar .navbar-brand.navbar-brand--logo {
    padding-right: 0;
    background: none;
}

.navbar .navbar-brand-link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.navbar .navbar-brand.navbar-brand--logo::after {
    content: none;
}

.navbar .navbar-brand.navbar-brand--logo .navbar-brand-logo {
    height: var(--logo-height, 40px);
    width: auto;
    max-width: 100%;
}

/*** Nested category submenus in the Produk dropdown ***/
.navbar .dropdown-menu .nav-submenu {
    position: relative;
    display: flex;
    align-items: center;
}

.navbar .dropdown-menu .nav-submenu-link {
    flex-grow: 1;
}

.navbar .dropdown-menu .nav-submenu-link.active {
    color: var(--primary);
    background-color: transparent;
    font-weight: 600;
}

.navbar .dropdown-menu .nav-submenu-toggle {
    background: none;
    border: 0;
    padding: .25rem .75rem;
    line-height: 1;
    color: var(--secondary);
}

.navbar .dropdown-menu .nav-submenu-toggle i {
    transition: transform .2s;
}

.navbar .dropdown-menu .nav-submenu-toggle.is-open i {
    transform: rotate(90deg);
}

/* Collapsed navbar keeps submenus in the flow, indented under their parent. */
.navbar .dropdown-menu .nav-submenu-menu {
    padding-left: .75rem;
}

@media (min-width: 992px) {
    /* Hover and keyboard focus open the submenu, so the toggle is not needed. */
    .navbar .dropdown-menu .nav-submenu-toggle {
        display: none;
    }

    .navbar .navbar-nav .dropdown-menu .nav-submenu .nav-submenu-menu {
        position: absolute;
        top: -.5rem;
        left: 100%;
        min-width: 12rem;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        padding-left: 0;
    }

    .navbar .navbar-nav .dropdown-menu .nav-submenu:hover > .nav-submenu-menu,
    .navbar .navbar-nav .dropdown-menu .nav-submenu:focus-within > .nav-submenu-menu {
        opacity: 1;
        visibility: visible;
    }
}

/*** Category list in the catalog sidebar ***/
.landing-category-list .landing-category-link {
    padding-left: calc(1.25rem + (var(--nav-depth, 0) * 1.25rem));
}

.landing-category-list .landing-category-link.active {
    color: var(--primary);
    background-color: transparent;
    font-weight: 600;
}

/*** Catalog cards (products, projects, news) ***/
.catalog-card {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
}

.catalog-card-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.catalog-card-link {
    color: inherit;
    text-decoration: none;
}

.catalog-card-link:hover h5,
.catalog-card-link:focus-visible h5 {
    color: var(--primary);
}

/*** Media gallery (product and project detail pages) ***/
.media-gallery {
    background: var(--light);
}

.media-gallery-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.media-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--light);
    color: var(--secondary);
}

.media-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.media-gallery-thumb {
    width: 88px;
    padding: 0;
    background: none;
    border: 2px solid transparent;
}

.media-gallery-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.media-gallery-thumb.active,
.media-gallery-thumb:focus-visible {
    border-color: var(--primary);
}

/*** Project gallery modal ***/
/* The gallery is shared with the project page (resources/views/components/project-detail.blade.php),
   so only the inside of the dialog is styled here. The dialog is wider than the page column, so
   its photos are capped instead of following the 4:3 box of the page gallery. */
.project-modal .media-gallery-image {
    aspect-ratio: 16 / 10;
    background: #fff;
}

.project-modal .modal-body {
    padding: 1.5rem;
}

.project-detail-description :last-child {
    margin-bottom: 0;
}

.product-spec-table th {
    width: 40%;
    color: var(--dark);
}

.product-spec-table th,
.product-spec-table td {
    padding: .75rem .5rem;
    border-color: #EEEEEE;
}

/*** Project carousel items without a photo ***/
/* A slightly lighter navy than --dark on purpose: the placeholder has to read as a
   missing photo instead of blending into the carousel background. */
.project-item-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #0B2149;
    color: var(--light);
    transition: .5s;
}

.project-item:hover .project-item-placeholder,
.project-carousel .owl-item.center .project-item-placeholder {
    margin-top: -60px;
}

/*** Service image sizing ***/
/* Template reference: img/service-*.jpg is 550x550. The card image and the small
   square marker follow that ratio, so any upload is cropped instead of reshaping
   the card. */
.service-item > img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.service-item .service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*** Service cards without a photo ***/
/* The template card takes its height from the image, so the placeholder keeps a
   square footprint (template images are 550x550) and reads as a missing photo. */
.service-item .service-item-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0B2149;
    color: var(--light);
}


/*** Catalog card thumbnails ***/
/* Cards keep a thumbnail slot even when no image is uploaded, so a mixed catalog
   does not collapse into text-only cards. Ratio matches .catalog-card-media. */
.catalog-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0B2149;
    color: var(--light);
}

/*** Client logo slider ***/
/* Logos are shown larger than a typical logo strip (up to 110px tall) and slide four
   per view on desktop, one logo per tick. The colours stay untouched: a client logo
   is the client's own mark, so it is not recoloured or greyed out. */
.client-slider .client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 0 .5rem;
}

.client-slider .client-logo img {
    max-height: 100%;
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

/*** About images on the home page ***/
/* Template reference: img/about-*.jpg is 400x600. The ratio is pinned so an upload of
   a different shape is cropped in place instead of pushing the section around. */
.about-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/*** Contact page icon badge ***/
/* The template uses an inline width/height on this circle. It is defined here
   instead so the badge keeps its size if the inline style is dropped. */
.contact-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
}

/*** Anchor targets ***/
/* The sticky navbar is 75px tall, so a plain jump to an in-page anchor would land with
   the heading hidden behind it. The padding reserves that height. */
#pesan-produk {
    scroll-margin-top: 90px;
}

/*** Floating WhatsApp button ***/
/* Duduk di samping kiri tombol Back to Top, sebaris dengannya, jadi kedua tombol mengambang
   terbaca sebagai satu kelompok di kanan bawah. Jarak 90px berasal dari 30px tepi kanan +
   48px lebar tombol Back to Top + 12px celah antar tombol. Warna hijau adalah warna merek
   WhatsApp, yang membuat tombol ini langsung dikenali. */
.whatsapp-float {
    position: fixed;
    right: 90px;
    bottom: 30px;
    z-index: 99;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: #25D366;
    font-size: 26px;
    box-shadow: 0 4px 12px rgba(2, 22, 56, .25);
    transition: .3s;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    color: #FFFFFF;
    background: #1DA851;
}

/* Bootstrap hanya mereset focus ring pada .btn, jadi tombol ini perlu miliknya sendiri.
   Ring digambar di luar lingkaran supaya tepi hijaunya tetap terlihat. */
.whatsapp-float:focus-visible {
    outline: 3px solid var(--dark);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    /* Tombol Back to Top digeser sedikit ke dalam tepi layar supaya keduanya tetap muat
       sebaris di layar sempit. */
    .back-to-top {
        right: 20px;
    }

    .whatsapp-float {
        right: 80px;
    }
}