/*==================================================================
  responsive.css
  Perbaikan spacing, perataan & responsive untuk semua halaman.
  Dimuat PALING AKHIR di templates/header.php agar menimpa
  layout.min.css, navbar.css dan whatsapp.css.

  Breakpoint (mengikuti Bootstrap 3 / template):
    >= 1200px  desktop besar
    992-1199   laptop
    768-991    tablet
    481-767    mobile besar
    <= 480     mobile kecil
==================================================================*/

/*------------------------------------------------------------------
  [1] Global
------------------------------------------------------------------*/
body {
    overflow-x: hidden;
}

img,
iframe,
video {
    max-width: 100%;
}


/*------------------------------------------------------------------
  [1b] Warna teks lebih jelas
  Bawaan template: paragraf #a6a7aa & judul #515769 (kontras rendah).
------------------------------------------------------------------*/
p {
    color: #5c6270;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2d3448;
}

/* Kartu Why Us */
.service .service-icon {
    color: #17bed2;
    font-size: 34px;
}

.service .service-info h3 {
    color: #27345f;
}

.service .service-info p {
    color: #5c6270;
    font-size: 16px;
    line-height: 1.6;
}
/*------------------------------------------------------------------
  [2] Skala spacing section (atas-bawah)
------------------------------------------------------------------*/
@media (max-width: 991px) {
    .content-lg {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .content-md {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

@media (max-width: 767px) {
    .content-lg {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .content-md,
    .content-md[style] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 26px;
    }

    h3,
    h4 {
        font-size: 20px;
    }

    .margin-b-40 {
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .content-lg {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .content-md,
    .content-md[style] {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/*------------------------------------------------------------------
  [3] Header / Navbar
------------------------------------------------------------------*/
@media (max-width: 991px) {
    .header .logo {
        height: 70px;
        line-height: 46px;
    }

    .header .logo-wrap {
        padding: 12px 0;
    }

    .header .logo-img {
        max-height: 46px;
        width: auto;
    }

    .header .navbar-toggle {
        margin: 22px 0;
    }

    /* Bootstrap mem-float <li> mulai 768px; di menu mobile harus bertumpuk */
    .header .navbar-nav > li {
        float: none;
    }

    .header .nav-collapse {
        max-height: calc(100vh - 81px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header .has-dropdown > .nav-item-child {
        cursor: pointer;
    }

    .header .has-dropdown .dropdown {
        min-width: 0;
        gap: 0;
        padding: 0 0 8px 15px;
    }

    .header .has-dropdown .dropdown a {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/*------------------------------------------------------------------
  [4] Hero carousel (beranda)
------------------------------------------------------------------*/
/* layout.js mengisi tinggi item = tinggi window; slide video boleh
   memanjang bila isinya lebih tinggi (layar pendek / landscape) */
.carousel-video-item {
    height: auto !important;
    min-height: 100vh;
}

.carousel-video-container-wrapper {
    min-height: 100vh;
}

/* Slide gambar: teks tidak keluar dari container */
.carousel .item > .container {
    position: relative;
    height: 100%;
}

.carousel .item .carousel-centered {
    left: 15px;
    right: 15px;
    width: auto;
    max-width: 760px;
    padding-top: 50px;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.carousel-centered .carousel-title-main {
    font-size: clamp(26px, 4vw, 50px);
    line-height: 1.15;
}

.carousel-centered .carousel-description {
    font-size: clamp(14px, 1.6vw, 18px);
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .carousel-indicators {
        bottom: 10px;
    }
}

/*------------------------------------------------------------------
  [5] Banner halaman (parallax-window)
------------------------------------------------------------------*/
.parallax-window {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.parallax-content {
    padding-top: 190px;
    padding-bottom: 110px;
}

.parallax-content .carousel-title {
    font-size: clamp(32px, 6.5vw, 80px);
    line-height: 1.1;
    margin-bottom: 16px;
    overflow-wrap: break-word;
}

.parallax-content h1:not(.carousel-title) {
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.2;
    margin-bottom: 0;
}

.parallax-content p {
    max-width: 680px;
    margin-bottom: 0;
    /* putih agar terbaca di atas gambar banner */
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991px) {
    .parallax-content {
        padding-top: 150px;
        padding-bottom: 80px;
    }
}

@media (max-width: 767px) {
    .parallax-content {
        padding-top: 120px;
        padding-bottom: 56px;
    }

    .parallax-content p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .parallax-content {
        padding-top: 110px;
        padding-bottom: 44px;
    }
}

/*------------------------------------------------------------------
  [6] Promo section (Welcome / Need Help)
------------------------------------------------------------------*/
.promo-section .ver-center,
.promo-section .ver-center-aligned {
    display: block;
    height: auto;
}

.promo-section .ver-center .col-sm-7 {
    float: none;
    width: auto;
    padding: 60px 0;
}

.promo-section .ver-center .col-sm-7 > :last-child {
    margin-bottom: 0;
}

.promo-section .ver-center .col-sm-7 .btn-theme {
    margin-top: 10px;
}

/* Gambar gaya modern: sudut membulat, bayangan lembut */
.promo-section .promo-section-img-right {
    z-index: 0;
}

.promo-section .promo-section-img-right img {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    box-shadow: 0 24px 48px -12px rgba(21, 36, 71, 0.28);
}

@media (min-width: 992px) {
    .promo-section {
        height: auto;
        min-height: 540px;
    }

    /* Teks hanya di setengah kiri, tidak menimpa gambar */
    .promo-section .ver-center .col-sm-7 {
        width: 50%;
        min-height: 540px;
        padding: 80px 48px 80px 0;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    /* Gambar di setengah kanan container, ada jarak atas-bawah;
       tepi kanan sejajar menu (CONTACT). Container: 970px (992-1199), 1170px (>=1200) */
    .promo-section .promo-section-img-right {
        top: 70px;
        bottom: 70px;
        left: calc(50% + 32px);
        right: calc((100% - 970px) / 2 + 15px);
    }

    .promo-section .promo-section-img-right img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
}

@media (min-width: 1200px) {
    .promo-section .promo-section-img-right {
        right: calc((100% - 1170px) / 2 + 15px);
    }
}

/* Tablet: gambar di bawah teks, tetap selebar container */
@media (max-width: 991px) {
    .promo-section .promo-section-img-right {
        position: relative;
        margin: 0 auto 70px;
    }

    .promo-section > .promo-section-img-right {
        max-width: 750px;
        padding: 0 15px;
    }

    .promo-section .promo-section-img-right img {
        width: 100%;
        height: clamp(240px, 42vw, 380px);
        object-fit: cover;
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    .promo-section .ver-center .col-sm-7 {
        padding: 48px 0;
    }
}

/*------------------------------------------------------------------
  [7] Why Us / values (beranda & about)
------------------------------------------------------------------*/
.values-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 2px;
}

.values-item {
    -webkit-flex: 0 0 calc((100% - 4px) / 3);
    flex: 0 0 calc((100% - 4px) / 3);
    max-width: calc((100% - 4px) / 3);
    display: -webkit-flex;
    display: flex;
}

.values-item > .wow {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
}

.values-item .service {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    padding: 48px 44px;
}

.values-item .service-info p {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .values-item {
        -webkit-flex-basis: calc((100% - 2px) / 2);
        flex-basis: calc((100% - 2px) / 2);
        max-width: calc((100% - 2px) / 2);
    }

    .values-item .service {
        padding: 40px 32px;
    }
}

@media (max-width: 599px) {
    .values-item {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .values-item .service {
        padding: 32px 24px;
    }

    .values-item .service .service-icon {
        margin-bottom: 18px;
    }
}

/* Tanpa hover (layar sentuh): jangan geser konten saat di-tap */
@media (hover: none) {
    .service:hover .service-element {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }

    .service:hover .service-info {
        -webkit-transform: none;
        transform: none;
    }
}

/*------------------------------------------------------------------
  [8] Solutions grid (beranda & /solutions)
------------------------------------------------------------------*/
.solution-section {
    background: #fff;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.service-card {
    background: #ffffff;
    padding: 28px;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    height: 100%;
    transition: transform 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
}

.service-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 16px;
}

.service-card h3 {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.service-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

/* Tombol sejajar di bawah semua kartu */
.service-card .btn {
    margin-top: auto;
    background-color: rgb(39, 52, 95);
    color: #fff;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s;
}

.service-card .btn:hover,
.service-card .btn:focus {
    background-color: #003d88;
    color: #fff;
}

@media (max-width: 991px) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 599px) {
    .service-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .service-card {
        padding: 22px 20px;
    }

    .service-card img {
        width: 52px;
        height: 52px;
    }

    .service-card h3 {
        font-size: 17px;
    }
}

/*------------------------------------------------------------------
  [9] Vendors (slider beranda & halaman /vendors)
------------------------------------------------------------------*/
.swiper-clients {
    margin-top: 30px;
}

.swiper-clients .swiper-slide {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.swiper-clients-img {
    max-width: 100%;
}

.vendors-cta {
    margin-top: 40px;
}

.vendor-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    row-gap: 24px;
    margin: 0 -15px;
}

.vendor-list > li {
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 15px;
}

.vendor-list .vendor-image {
    display: block;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .vendor-list > li {
        -webkit-flex-basis: 33.3333%;
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }
}

@media (max-width: 599px) {
    .vendor-list {
        row-gap: 12px;
    }

    .vendor-list > li {
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
        padding: 0 8px;
    }
}

/*------------------------------------------------------------------
  [10] Halaman detail solution & vendor
------------------------------------------------------------------*/
/* Jarak konten -> kotak kontak: sebelumnya 100px + 60px bertumpuk */
.content-lg.container + .content-md.container {
    padding-top: 0 !important;
}

.content-lg.container:has(+ .content-md.container) {
    padding-bottom: 64px;
}

@media (max-width: 767px) {
    .content-lg.container:has(+ .content-md.container) {
        padding-bottom: 40px;
    }
}

/* Logo "Related Vendor" 300x100: jangan gepeng / keluar layar */
.logo-hover {
    object-fit: contain;
    max-width: calc(100vw - 30px);
}

.content-lg ul[style*="padding-left"] > li {
    margin-bottom: 8px;
}

/* Kotak "Learn more at" & catatan distributor: jangan melebihi layar */
.content-lg div[style*="display: inline-block"] {
    max-width: 100%;
}

/* Kotak kontak di bawah halaman detail (container di dalam .row) */
.row > .container.contact-box {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
}

@media (max-width: 991px) {
    .content-lg p[style*="font-size:20px"],
    .content-lg p[style*="font-size: 20px"],
    .content-lg li[style*="font-size:20px"],
    .content-lg li[style*="font-size: 20px"] {
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    /* Teks rata kiri-kanan di layar sempit membuat spasi renggang */
    .content-lg [style*="text-align: justify"],
    .content-lg [style*="text-align:justify"] {
        text-align: left !important;
    }

    .content-lg p[style*="font-size:20px"],
    .content-lg p[style*="font-size: 20px"],
    .content-lg li[style*="font-size:20px"],
    .content-lg li[style*="font-size: 20px"],
    .content-lg p[style*="font-size:18px"],
    .content-lg p[style*="font-size: 18px"] {
        font-size: 16px !important;
    }

    .content-lg h2[style*="font-size:24px"] {
        font-size: 21px !important;
    }

    .logo-hover {
        height: auto !important;
    }

    .row > .container.contact-box {
        padding: 32px 20px;
    }

    .contact-box h2 {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .row > .container.contact-box {
        margin-left: 0;
        margin-right: 0;
        padding: 28px 16px;
    }
}

/*------------------------------------------------------------------
  [11] Footer
------------------------------------------------------------------*/
.footer .footer-contact .footer-list-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.footer .footer-contact .footer-list-item > i {
    -webkit-flex: 0 0 16px;
    flex: 0 0 16px;
    margin-top: 3px;
}

@media (max-width: 991px) {
    .footer .footer-col {
        margin-bottom: 40px;
    }

    .footer .footer-col:last-child {
        margin-bottom: 0;
    }

    .footer .footer-list-item {
        margin-bottom: 16px;
    }
}

@media (max-width: 767px) {
    .footer .footer-col {
        margin-bottom: 32px;
    }

    /* ruang untuk tombol WhatsApp & back-to-top */
    .footer .content-lg {
        padding-bottom: 88px;
    }
}

/*------------------------------------------------------------------
  [12] Tombol melayang (WhatsApp & back-to-top) — sejajar, tidak bertumpuk
------------------------------------------------------------------*/
.back-to-top {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 16px;
    line-height: 44px;
    border-radius: 50%;
}

.whatsapp-float {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}