/* Tailwind handled via CDN in theme head */

:root {
  --c-heading: #1a1a1a;
  --c-heading2: #333333;
  --c-body: #4a4a4a;
  --c-surface: #ffffff;
  --c-surface-muted: #f9f9f9;
  --c-border: #e5e7eb;
  --font-heading: Montserrat, sans-serif;
  --font-body: Lato, sans-serif;
}
.dark {
    --c-heading: #f1f5f9;
    --c-heading2: #e2e8f0;
    --c-body: #cbd5e1;
    --c-surface: #0f172a;
    --c-surface-muted: #0a1628;
    --c-surface-accent: #0d1f38;
    --c-border: #334155;
}
body { font-family: var(--font-body); background: var(--c-surface); color: var(--c-body); }
h1,h2,h3 { font-family: var(--font-heading); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 40s linear infinite; }

/* ===== Scroll entrance animations (mirrors original framer-motion) ===== */
.anim { opacity: 0; transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; }
.anim-up { transform: translateY(24px); }
.anim-left { transform: translateX(-32px); }
.anim-right { transform: translateX(32px); }
.anim-visible { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .anim { opacity:1; transform:none; transition:none; } }



/* 404 page animations */

  :root { --c-heading:#111827; --c-body:#4a4a4a; --c-surface:#ffffff; --font-heading:Montserrat, sans-serif; --font-body:Lato, sans-serif; }
  html.dark { --c-heading:#f9fafb; --c-body:#d1d5db; --c-surface:#0f172a; }
  body { font-family: var(--font-body); background: var(--c-surface); color: var(--c-body); }
  h1,h2,h3,h4 { font-family: var(--font-heading); }
  @keyframes float-y { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
  .float-y { animation: float-y 3.5s ease-in-out infinite; }
  @keyframes fade-up { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform:none;} }
  .fade-up { animation: fade-up .7s cubic-bezier(.22,1,.36,1) both; }


/* ====== Mobile sidebar (slide kiri) ====== */
.mm-link {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-body);
  transition: background-color .2s, color .2s;
}
.dark .mm-link { color: #cbd5e1; }
.mm-link:hover { background: rgba(15,117,188,.06); color: #0f75bc; }
.dark .mm-link:hover { background: rgba(255,255,255,.05); color: #4db8ff; }

.mm-sub {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--c-body);
  transition: background-color .2s, color .2s;
}
.dark .mm-sub { color: #cbd5e1; }
.mm-sub:hover { background: rgba(15,117,188,.06); color: #0f75bc; }
.dark .mm-sub:hover { background: rgba(255,255,255,.05); color: #4db8ff; }

/* Sembunyikan tombol hamburger legacy (base-ui) yang tidak berfungsi */
button[data-slot="sheet-trigger-legacy"] { display: none !important; }

/* Body lock saat sidebar terbuka */
body.mm-open { overflow: hidden; }

/* ====== Mobile fixes ====== */
/* overflow-x:clip memblokir scroll horizontal TANPA mematikan position:sticky (hidden akan merusaknya) */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* SVG dekoratif di kontak jangan melebihi lebar */
svg:not(.lucide-menu):not(.lucide-x):not([class*="w-4"]):not([class*="w-5"]):not([class*="w-7"]) {
  max-width: 100%;
}
main svg { max-width: 100%; height: auto; }

/* ====== WordPress admin bar compatibility ====== */
/* Header sticky harus di bawah admin bar (32px desktop / 46px mobile) */
body.admin-bar .site-header,
body.admin-bar header.sticky {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar header.sticky {
    top: 46px;
  }
}
/* ≤600px: WP menjadikan admin bar position:absolute (scroll away bersama konten),
   tapi WP tetap menaruh html{margin-top:32px !important} → GAP atas saat scroll.
   Netralkan margin & jadikan admin bar fixed + sembunyikan otomatis, header sticky top:46px. */
@media screen and (max-width: 600px) {
  html { margin-top: 0 !important; }
  body.admin-bar .site-header,
  body.admin-bar header.sticky {
    top: 46px;
  }
  /* Admin bar mobile: fixed di atas, auto-hide saat scroll ke bawah (reveal saat scroll ke atas) */
  #wpadminbar {
    position: fixed !important;
    top: 0;
    transition: top .25s ease;
  }
  html.ab-hidden #wpadminbar { top: -46px; }
  /* Saat admin bar tersembunyi, header sticky menempel ke atas (tanpa gap 46px) */
  html.ab-hidden body.admin-bar .site-header,
  html.ab-hidden body.admin-bar header.sticky {
    top: 0;
  }
}
/* Admin bar WP default position:fixed — pastikan z-index header di bawah admin bar (99999) */
body.admin-bar header.sticky { z-index: 99990; }

/* Active state menu mobile */
.mm-link.mm-active, .mm-link.mm-active:hover { background: rgba(15,117,188,.10); color: #0f75bc; font-weight: 700; }
.dark .mm-link.mm-active, .dark .mm-link.mm-active:hover { background: rgba(77,184,255,.12); color: #4db8ff; }

/* === Galeri mobile UX === */
@media (max-width: 1023px) {
  /* Toolbar penuh TIDAK sticky — digantikan gbar compact saat scroll */
  #gnav { position: static; }
  /* Chip strip scroll horizontal (hemat tinggi, pola standar mobile) */
  /* !important: Tailwind Play CDN menyuntik .flex-wrap setelah stylesheet ini */
  #gnav > div > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  #gnav > div > div::-webkit-scrollbar { display: none; }
  #gnav > div > div .gchip { flex: 0 0 auto; scroll-snap-align: start; }
  /* Edge fade kanan sebagai affordance scroll */
  #gnav > div > div {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* Hero B-roll video: fallback poster via background (jika autoplay diblok) */
#gt-broll {
  background-size: cover;
  background-position: center;
  background-color: #0b1220;
}

/* === Layanan: label PILAR pada vtab (selalu terbaca di kedua state) === */
.vtab .vtab-pilar { color: #0f75bc; opacity: .85; }
.dark .vtab .vtab-pilar { color: #4db8ff; }
.vtab.vtab-active .vtab-pilar { color: rgba(255,255,255,.75); opacity: 1; }

/* === Layanan: lazy-load fade-in foto dokumentasi === */
.vsvc-img { opacity: 0; transition: opacity .7s ease; }
.vsvc-img.vsvc-loaded { opacity: 1; }
.vsvc-skel { background: linear-gradient(100deg, #e2e8f0 40%, #f1f5f9 50%, #e2e8f0 60%); background-size: 200% 100%; animation: vsvc-shimmer 1.4s linear infinite; }
.vsvc-skel.vsvc-loading { animation: vsvc-shimmer 1.4s linear infinite; }
.vsvc-skel:not(.vsvc-loading) { animation: none; background: transparent; }
.dark .vsvc-skel { background: linear-gradient(100deg, #1e293b 40%, #293548 50%, #1e293b 60%); background-size: 200% 100%; }
@keyframes vsvc-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vsvc-skel { animation: none !important; } .vsvc-img { transition: none; opacity: 1; } }

/* === Layanan mobile: chips horizontal + mini bar (vbar) === */
@media (max-width: 1023px) {
  .vtablist { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
  .vtablist::-webkit-scrollbar { display: none; }
  .vtablist .vtab { scroll-snap-align: start; min-width: 172px; }
  .vtablist .vtab .block.text-sm { font-size: 13px; line-height: 1.3; }
  /* Konten panel langsung setelah chips */
  .vpanel > div { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .vtablist { scroll-behavior: auto; } #vbar { transition: none; } }

@media (max-width: 1023px) {
  .vtablist .vtab { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 44px; }
}

@media (max-width: 1023px) {
  /* Ringkas section pilar di mobile */
  #pilar-layanan { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  #pilar-layanan h2 { font-size: 1.75rem !important; line-height: 1.25 !important; }
  #pilar-layanan .mb-12, #pilar-layanan .mb-10 { margin-bottom: 1.5rem !important; }
  #pilar-layanan .mb-16 { margin-bottom: 1.25rem !important; }
  /* Foto panel lebih pendek agar judul muat di first screen */
  .vsvc-skel, .vpanel .aspect-video { aspect-ratio: 16/10; }
}

#vbar { opacity: 1 !important; }
#vbar.-translate-y-full { transform: translateY(-130%) !important; visibility: hidden; }

/* MoM: sidebar mobile selalu bisa discroll penuh */
#mobileMenu { height: 100dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#mobileMenu nav { padding-bottom: 96px; }
#mobileMenu::-webkit-scrollbar { width: 4px; }
#mobileMenu::-webkit-scrollbar-thumb { background: rgba(15,117,188,.25); border-radius: 2px; }

/* MoM: slider Segmen Industri (1 item) */
.gt-ind-slider { overflow: hidden; border-radius: 16px; }
.gt-ind-track { display: flex; }
.gt-ind-slide { width: 100%; flex: none; }

/* MoM Galeri: masonry + highlight terpilih */
#ggrid .gcard { break-inside: avoid; }
#ggrid .gcard.gselected { outline: 3px solid #0f75bc; outline-offset: -3px; box-shadow: 0 0 0 6px rgba(15,117,188,0.25); }


/* Masonry JS balancing */
#ggrid { display: flex; gap: 20px; align-items: flex-start; }
#ggrid .gcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (max-width:767px){ #ggrid { flex-direction: column; } #ggrid > .gcard { width: 100% !important; } }

/* ===== Layanan: chips brand marquee (teks berjalan) ===== */
.brand-marquee-wrap { position: relative; }
.brand-marquee { animation: marquee 30s linear infinite; }
.brand-marquee:hover { animation-play-state: paused; }

/* Carousel Tim: sembunyikan horizontal scrollbar */
.gt-team-track { scrollbar-width: none; -ms-overflow-style: none; }
.gt-team-track::-webkit-scrollbar { display: none; }

/* Tab layanan: saat active, teks full 1 baris tanpa ellipsis & tanpa wrap; tab melebar mengikuti teks */
.vtab-active .vtab-title { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
@media (max-width: 1023px) {
  .vtab { transition: all .3s ease; }
  .vtab-active { flex: 0 0 auto !important; width: auto !important; }
}

/* Galeri: baris chip 1 baris (scrollable) tanpa scrollbar */
.gsvc-row, .gind-row { scrollbar-width: none; -ms-overflow-style: none; }
.gsvc-row::-webkit-scrollbar, .gind-row::-webkit-scrollbar { display: none; }
/* Fix: justify-center + overflow memotong chip pertama (tak bisa scroll ke kiri) → safe center */
.gsvc-row, .gind-row { justify-content: safe center; }
@supports not (justify-content: safe center) {
  .gsvc-row, .gind-row { justify-content: flex-start; }
}
/* Scroll rapi: scroll-padding + mask fade DINAMIS di tepi (hanya sisi yang punya overflow) */
.gsvc-row, .gind-row {
  scroll-padding-left: 4px;
  padding-left: 4px; padding-right: 4px;
}
.gsvc-row .gchip, .gind-row .gchip { scroll-margin-left: 4px; }
/* Hilangkan shadow chip aktif galeri */
.gsvc-row .gchip-active, .gind-row .gchip-active { box-shadow: none !important; }
/* Icon tile chip saat aktif (svc) */
.gchip-active .gchip-ic { background: rgba(255,255,255,.18) !important; }
.gchip-active .gchip-ic svg { stroke: currentColor !important; }


/* ===== Hero right column interaktif: orbit tiles + magnetic hover + logo tilt ===== */
.gt-orbit-wrap{pointer-events:none}
.gt-orbit-spin{position:absolute;left:50%;top:50%;width:0;height:0}
.gt-orbit-counter{position:relative;pointer-events:auto;animation:none}.gt-orbit-counter svg{transform:rotate(calc(-1 * var(--gt-oa, 0deg)))}
.gt-orbit-counter>div{position:relative;left:-32px;top:-260px}
@keyframes gtOrbit{from{transform:rotate(var(--gt-oa,0deg))}to{transform:rotate(calc(var(--gt-oa,0deg) + 360deg))}}
@keyframes gtOrbitCounter{from{transform:rotate(calc(-1*var(--gt-oa,0deg)))}to{transform:rotate(calc(-1*var(--gt-oa,0deg) - 360deg))}}
.gt-parallax{will-change:transform}
.gt-parallax.gt-magnet{box-shadow:0 10px 30px rgba(15,117,188,.45)!important;background:#fff;z-index:30}
.gt-hero-logo-wrap{transition:transform .25s ease-out;transform-style:preserve-3d}
@keyframes gtLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.gt-hero-logo-float{animation:gtLogoFloat 5s ease-in-out infinite}
.gt-orbit-glow{position:absolute;border-radius:9999px;pointer-events:none;box-shadow:0 0 60px 14px rgba(255,255,255,.28);animation:gtGlowPulse 3.2s ease-in-out infinite}
@keyframes gtGlowPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.gt-orbit-spin,.gt-orbit-counter,.gt-hero-logo-float{animation:none}}

/* ===== Fallback utilities — aktif hanya bila Tailwind CDN gagal (live) ===== */
.gt-hero{display:flex;align-items:center;position:relative;overflow:hidden}
.gt-hero .absolute{position:absolute}
.gt-hero .relative{position:relative}
.gt-hero .inset-0{top:0;right:0;bottom:0;left:0}
.gt-hero .z-10{z-index:10}
.gt-hero .z-20{z-index:20}
.gt-hero .z-30{z-index:30}
.gt-hero .flex{display:flex}
.gt-hero .flex-col{flex-direction:column}
.gt-hero .items-center{align-items:center}
.gt-hero .justify-center{justify-content:center}
.gt-hero .rounded-2xl{border-radius:1rem}
.gt-hero .rounded-full{border-radius:9999px}
.gt-hero .shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.gt-hero .shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.gt-hero .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.gt-hero .shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.gt-hero .bg-white{background-color:#fff}
.gt-hero .bg-white\/15{background-color:rgba(255,255,255,.15)}
.gt-hero .border{border-width:1px;border-style:solid}
.gt-hero .border-2{border-width:2px;border-style:solid}
.gt-hero .border-dashed{border-style:dashed}
.gt-hero .border-white\/30{border-color:rgba(255,255,255,.3)}
.gt-hero .border-white\/50{border-color:rgba(255,255,255,.5)}
.gt-hero .w-full{width:100%}
.gt-hero .h-full{height:100%}
.gt-hero .transition-transform{transition-property:transform;transition-duration:.3s;transition-timing-function:ease}
.gt-hero .duration-200{transition-duration:.2s}
.gt-hero .duration-300{transition-duration:.3s}
.gt-hero .duration-500{transition-duration:.5s}
.gt-hero .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}