/* ===========================================================
   VOLTARA — Company Profile Theme
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --v-blue-dark:   #062a52;
  --v-blue:        #0a4da0;
  --v-blue-bright: #1668c9;
  --v-teal:        #12c7bd;
  --v-teal-dark:   #0a9a92;
  --v-ink:         #101820;
  --v-gray:        #5c6b7a;
  --v-bg-soft:     #f4f7fb;
  --v-line:        #e4eaf1;
  --v-radius:      14px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

body{
  font-family:'Inter', sans-serif;
  color: var(--v-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  width: 100%;
  position: relative;
}

img{ max-width:100%; height:auto; }

.hero{ width:100%; max-width:100vw; }

h1,h2,h3,h4,h5,.font-display{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
}

.text-brand{ color: var(--v-blue); }
.text-teal{ color: var(--v-teal); }
.bg-soft{ background: var(--v-bg-soft); }

.section{ padding: 96px 0; }
@media (max-width: 767.98px){ .section{ padding: 64px 0; } }

.eyebrow{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--v-teal-dark);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background: var(--v-teal);
  display:inline-block;
}

.section-title{ font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom:16px; color: var(--v-blue-dark); }
.section-sub{ color: var(--v-gray); font-size:1.05rem; max-width:640px; }
/* ---------- NAVBAR ---------- */
.navbar-voltara{
  padding: 18px 0;
  transition: all .3s ease;
  background: transparent;
}

.navbar-voltara.scrolled{
  padding: 10px 0;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 4px 24px rgba(6,42,82,0.08);
  backdrop-filter: blur(6px);
}

/* LOGO */
.navbar-voltara .navbar-brand{
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  width: 155px;
  min-width: 155px;
  padding: 0;
  margin-right: 20px;
}

.navbar-voltara .navbar-brand img{
  display: block;
  width: 155px !important;
  min-width: 155px !important;
  max-width: 155px !important;
  height: auto !important;
}

/* MENU */
.navbar-voltara .navbar-nav{
  flex-shrink: 1;
}

.navbar-voltara .nav-link{
  font-weight:600;
  font-size:.94rem;
  color:#fff;
  margin:0 2px;
  padding:8px 11px !important;
  border-radius:30px;
  transition:all .2s ease;
  white-space:nowrap;
}

.navbar-voltara.scrolled .nav-link{
  color:var(--v-ink);
}

.navbar-voltara .nav-link:hover,
.navbar-voltara .nav-link.active{
  background:rgba(255,255,255,0.15);
  color:#fff;
}

.navbar-voltara.scrolled .nav-link:hover,
.navbar-voltara.scrolled .nav-link.active{
  background:var(--v-bg-soft);
  color:var(--v-blue);
}

.navbar-voltara .btn-nav-cta{
  background:var(--v-teal);
  border:none;
  color:#04302c;
  font-weight:700;
  padding:9px 18px;
  border-radius:30px;
  font-size:.9rem;
  white-space:nowrap;
}

.navbar-voltara .btn-nav-cta:hover{
  background:var(--v-teal-dark);
  color:#fff;
}

.navbar-toggler{
  border:none;
}

.navbar-voltara .navbar-toggler-icon{
  filter:none;
}

.navbar-voltara:not(.scrolled) .navbar-toggler{
  background:rgba(255,255,255,0.15);
  border-radius:8px;
}
/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex; align-items:center;
  background: linear-gradient(115deg, rgba(6,20,40,.92) 0%, rgba(6,42,82,.82) 45%, rgba(10,77,160,.55) 100%),
              url('../img/hero-station.jpg') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(18,199,189,.18), transparent 45%);
  pointer-events:none;
}
.hero .badge-hero{
  background: rgba(18,199,189,0.14);
  border:1px solid rgba(18,199,189,0.4);
  color: #7ff0e8;
  font-size:.8rem; font-weight:600;
  padding:7px 16px; border-radius:30px;
  display:inline-flex; align-items:center; gap:8px;
  margin-top:62px;
  margin-bottom:4px;
}
.hero h1{
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  line-height:1.12;
  margin-bottom:22px;
}
.hero p.lead{
  font-size:1.15rem; color: rgba(255,255,255,.82); max-width:560px; margin-bottom:34px;
}
.btn-voltara{
  background: var(--v-teal); border:none; color:#04302c; font-weight:700;
  padding:14px 30px; border-radius:10px; font-size:1rem;
  transition: all .2s ease;
}
.btn-voltara:hover{ background:#0eb2a9; color:#04302c; transform: translateY(-2px); }
.btn-outline-voltara{
  border:1.5px solid rgba(255,255,255,.5); color:#fff; font-weight:700;
  padding:14px 30px; border-radius:10px; font-size:1rem; background:transparent;
  transition: all .2s ease;
}
.btn-outline-voltara:hover{ background: rgba(255,255,255,.1); border-color:#fff; color:#fff; }

.hero-stats{
  display:flex; gap:0; margin-top:56px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.15); padding-top:28px;
}
.hero-stats .stat{ padding-right:40px; }
.hero-stats .stat .num{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.8rem; color:#fff; }
.hero-stats .stat .lbl{ font-size:.82rem; color: rgba(255,255,255,.65); }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color: rgba(255,255,255,.7); font-size:1.4rem; animation: bounceDown 2s infinite;
}
@keyframes bounceDown{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ---------- ABOUT ---------- */
.about-card{
  background:#fff; border:1px solid var(--v-line); border-radius: var(--v-radius);
  padding:26px; height:100%;
  box-shadow: 0 10px 30px rgba(6,42,82,.05);
}
.about-card .icon-wrap{
  width:48px; height:48px; border-radius:12px;
  background: rgba(10,77,160,.08); color: var(--v-blue);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;
}
.about-media{
  position:relative; border-radius: 20px; overflow:hidden;
  box-shadow: 0 24px 60px rgba(6,42,82,.18);
}
.about-media img{ width:100%; display:block; }
.about-media-badge{
  position:absolute; left:20px; bottom:20px;
  background:#fff; border-radius:14px; padding:14px 18px;
  box-shadow: 0 14px 30px rgba(6,42,82,.18);
  display:flex; align-items:center; gap:12px;
}
.about-media-badge .n{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.3rem; color:var(--v-blue); }
.about-media-badge .t{ font-size:.75rem; color:var(--v-gray); line-height:1.2; }

/* ---------- PRODUCT ---------- */
.cat-pill{
  border:1px solid var(--v-line); border-radius:16px; padding:22px 20px;
  height:100%; transition: all .25s ease; background:#fff;
}
.cat-pill:hover{ border-color: var(--v-teal); box-shadow: 0 16px 40px rgba(6,42,82,.08); transform:translateY(-4px); }
.cat-pill .cat-icon{
  width:46px; height:46px; border-radius:12px;
  background: linear-gradient(135deg, var(--v-blue), var(--v-teal));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px;
}
.product-panel{
  background: var(--v-blue-dark); border-radius: 24px; overflow:hidden; color:#fff;
  position:relative;
}
.product-panel::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 90% 10%, rgba(18,199,189,.25), transparent 50%);
}
.product-panel .p-img-wrap{
  background: #fff; border-radius:20px; padding:20px; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.product-panel .p-img-wrap img{ max-height:420px; width:auto; }
.spec-list{ list-style:none; padding:0; margin:0; }
.spec-list li{
  display:flex; gap:10px; align-items:flex-start;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.92rem; color: rgba(255,255,255,.88);
}
.spec-list li i{ color: var(--v-teal); margin-top:3px; }
.power-chip{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(18,199,189,.15); border:1px solid rgba(18,199,189,.35);
  color:#7ff0e8; padding:6px 14px; border-radius:30px; font-size:.82rem; font-weight:700; margin:0 8px 8px 0;
}

/* ---------- WHY CHOOSE US ---------- */
.why-card{
  padding:30px 24px; border-radius:18px; height:100%;
  background:#fff; border:1px solid var(--v-line);
  transition: all .25s ease;
}
.why-card:hover{ box-shadow: 0 18px 44px rgba(6,42,82,.09); transform:translateY(-5px); border-color:transparent; }
.why-card .icon-circle{
  width:56px; height:56px; border-radius:50%;
  background: var(--v-bg-soft); color: var(--v-blue);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px;
}
.why-card h5{ font-size:1.08rem; margin-bottom:10px; color:var(--v-ink); }
.why-card p{ color: var(--v-gray); font-size:.92rem; margin:0; }

/* ---------- CERTIFICATION ---------- */
.cert-strip{ background: var(--v-blue-dark); border-radius:24px; padding:52px 40px; color:#fff; position:relative; overflow:hidden; }
.cert-strip::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 10% 90%, rgba(18,199,189,.2), transparent 45%);
}
.cert-badge{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  border-radius:16px; padding:22px; height:100%; text-align:center;
  transition: all .2s ease;
}
.cert-badge:hover{ background: rgba(255,255,255,.1); }
.cert-badge .cert-icon{ font-size:1.8rem; color: var(--v-teal); margin-bottom:12px; }
.cert-badge h6{ color:#fff; font-size:.92rem; margin-bottom:6px; }
.cert-badge p{ color: rgba(255,255,255,.6); font-size:.78rem; margin:0; }

/* ---------- CONTACT ---------- */
.contact-info-card{
  background: var(--v-bg-soft); border-radius:20px; padding:32px; height:100%;
}
.contact-item{ display:flex; gap:16px; margin-bottom:26px; }
.contact-item:last-child{ margin-bottom:0; }
.contact-item .ic{
  width:46px; height:46px; min-width:46px; border-radius:12px;
  background:#fff; color: var(--v-blue); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; box-shadow: 0 6px 16px rgba(6,42,82,.08);
}
.contact-item h6{ margin-bottom:3px; font-size:.95rem; }
.contact-item p, .contact-item a{ color: var(--v-gray); font-size:.9rem; margin:0; text-decoration:none; }
.contact-item a:hover{ color: var(--v-blue); }

.form-control, .form-select{
  border:1px solid var(--v-line); border-radius:10px; padding:12px 14px; font-size:.94rem;
}
.form-control:focus, .form-select:focus{ border-color: var(--v-teal); box-shadow: 0 0 0 .2rem rgba(18,199,189,.15); }
.form-label{ font-size:.84rem; font-weight:600; color: var(--v-ink); margin-bottom:6px; }

#contact-alert{ display:none; }

/* ---------- FOOTER ---------- */
.footer-voltara{ background: var(--v-ink); color: rgba(255,255,255,.65); padding:64px 0 24px; }
.footer-voltara .fbrand{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.4rem; color:#fff; }
.footer-voltara .fbrand span{ color: var(--v-teal); }
.footer-voltara h6{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; }
.footer-voltara a{ color: rgba(255,255,255,.6); text-decoration:none; font-size:.9rem; }
.footer-voltara a:hover{ color: var(--v-teal); }
.footer-voltara ul{ list-style:none; padding:0; }
.footer-voltara ul li{ margin-bottom:10px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:24px; font-size:.82rem; }
.social-ic{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  color:#fff;
  font-size:1rem;
}

/* Instagram */
.social-ic:nth-child(1){
  color:#E4405F;
}

/* LinkedIn */
.social-ic:nth-child(2){
  color:#0A66C2;
}

/* Facebook */
.social-ic:nth-child(3){
  color:#0A66C2;
}

.social-ic:hover{
  background:var(--v-teal);
  color:#04302c;
}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:1050;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: 0 10px 26px rgba(37,211,102,.45);
  animation: pulseWa 2.4s infinite;
}
.wa-float:hover{ color:#fff; transform:scale(1.06); }
@keyframes pulseWa{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

.divider-soft{ height:1px; background: var(--v-line); border:none; margin: 0; }

/* ---------- KEMITRAAN (infographic images) ---------- */
.infographic-card{
  background:#fff; border:1px solid var(--v-line); border-radius:20px;
  padding:14px; box-shadow: 0 16px 44px rgba(6,42,82,.08);
}
.infographic-card img{ border-radius:12px; display:block; }
.spec-list-light{ list-style:none; padding:0; margin:0; }
.spec-list-light li{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--v-line);
  font-size:.94rem; color: var(--v-gray);
}
.spec-list-light li:last-child{ border-bottom:none; }
.spec-list-light li i{ color: var(--v-teal-dark); margin-top:2px; font-size:1.05rem; }
.spec-list-light li strong{ color: var(--v-ink); }

/* ---------- CERTIFICATION DOCS ---------- */
/* .cert-doc-card{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--v-line); border-radius:14px; padding:16px 18px;
  transition: all .2s ease;
} */
/* .cert-doc-card:hover{ box-shadow: 0 14px 30px rgba(6,42,82,.08); transform:translateY(-2px); } */
.cert-doc-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease;
}

.cert-doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.10);
}

.cert-doc-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(220, 53, 69, .10);
    color: #dc3545;

    font-size: 22px;
}

.cert-doc-size {
    font-size: 12px;
    color: #8a8a8a;
}


/* PDF PREVIEW */

.cert-pdf-preview {
    position: relative;
    width: 100%;
    height: 300px;
    background: #f1f3f5;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pdf-preview-canvas {
    display: none;

    width: 100%;
    height: auto;

    background: #fff;

    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.pdf-preview-loading {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: #777;
}

/* MODAL */

.pdf-modal-container {
    width: 100%;

    height: calc(100vh - 130px);

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 20px;

    box-sizing: border-box;
}

.pdf-modal-page {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    margin: 0 auto 20px auto;

    background: #fff;

    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.pdf-modal-loading {
    color: #fff;

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;
}


/* MOBILE */

@media (max-width: 576px) {

        .pdf-modal-container {
        padding: 10px;
        height: calc(100vh - 120px);
    }

    .modal-footer {
        padding: 8px;
    }
.cert-pdf-preview {
    width: 100%;
    height: 300px;

    background: #f8f9fa;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.cert-preview-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #dc3545;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #f8f9fa 100%
        );
}

.cert-preview-placeholder i {
    font-size: 80px;
    margin-bottom: 12px;
}

.cert-preview-placeholder span {
    font-size: 13px;
    font-weight: 600;
    color: #777;
}
}
/* ==========================================
   FLOATING LANGUAGE LEFT BOTTOM
========================================== */

#floatingLanguage {
    position: fixed !important;
    left: 25px !important;
    bottom: 25px !important;

    z-index: 99999 !important;
}

.floating-language-btn {
    width: 55px;
    height: 55px;

    border: none;
    border-radius: 50%;

    background: #fff;
    color: #222;

    font-size: 14px;
    font-weight: 700;

    box-shadow: 0 5px 20px rgba(0,0,0,.2);

    cursor: pointer;

    transition: all .3s ease;
}

.floating-language-btn:hover {
    transform: scale(1.1);
}

@media (max-width:576px) {

    #floatingLanguage {
        left: 15px !important;
        bottom: 20px !important;
    }

    .floating-language-btn {
        width: 50px;
        height: 50px;
    }

}


/* LANGUAGE OPTION */

.language-option {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 18px 10px;

    border: 1px solid #e5e5e5;

    border-radius: 15px;

    text-decoration: none;

    color: #333;

    transition: .3s;

}

.language-option:hover {

    transform: translateY(-4px);

    border-color: #0d6efd;

    background: #f8f9fa;

}

.language-flag {

    font-size: 38px;

    margin-bottom: 8px;

}


/* MOBILE */

@media (max-width: 576px) {

    #floatingLanguage {

        left: 15px !important;
        bottom: 20px !important;

    }

    .floating-language-btn {

        width: 50px;
        height: 50px;

        font-size: 21px;

    }

}
/* ==========================================
   HIDE GOOGLE TRANSLATE BAR
========================================== */

/* Google Translate top banner */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    visibility: hidden !important;
}

/* Hilangkan ruang kosong yang ditinggalkan Google */
body {
    top: 0 !important;
}

/* Beberapa versi Google Translate */
body > .skiptranslate {
    display: none !important;
}

/* Jangan sembunyikan floating language kita */
#floatingLanguage {
    display: block !important;
}
.footer-map{
  margin-top:15px;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.footer-map iframe{
  display:block;
  width:100%;
  height:150px;
  border:0;
}

/* =====================================================
   SERTIFIKAT GALLERY
===================================================== */

.cert-gallery-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  transition:all .35s ease;
  height:100%;
}

.cert-gallery-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(0,0,0,.15);
}


/* IMAGE */

.cert-gallery-image{
  position:relative;
  height:250px;
  overflow:hidden;
  background:#f4f6f8;
}

.cert-gallery-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .5s ease;
}

.cert-gallery-card:hover .cert-gallery-image img{
  transform:scale(1.05);
}


/* OVERLAY */

.cert-gallery-overlay{
  position:absolute;
  inset:0;
  background:rgba(3,20,40,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:.3s ease;
}

.cert-gallery-card:hover .cert-gallery-overlay{
  opacity:1;
}


/* BUTTON */

.cert-gallery-view{
  border:0;
  background:var(--v-teal);
  color:#04302c;
  border-radius:50px;
  padding:11px 20px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:.3s;
}

.cert-gallery-view:hover{
  transform:scale(1.05);
}


/* CAPTION */

.cert-gallery-caption{
  min-height:65px;
  padding:15px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.92rem;
  font-weight:600;
  color:#26384d;
}

.cert-gallery-caption i{
  color:var(--v-teal);
  font-size:1.2rem;
  flex-shrink:0;
}


/* MODAL */

.cert-modal{
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.cert-modal .modal-header{
  border-bottom:1px solid rgba(0,0,0,.08);
}

.cert-gallery-modal-image{
  max-width:100%;
  max-height:75vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
}


/* MOBILE */

@media(max-width:576px){

  .cert-gallery-image{
    height:220px;
  }

  .cert-gallery-caption{
    font-size:.85rem;
  }

}
/* Jangan izinkan Google Translate mengubah tombol bahasa */
#floatingLanguage,
#floatingLanguage *,
.notranslate {
    translate: no !important;
}