/* Verbindtech dynamic layer v1 — additive, reversible. Remove the in template.php to roll back.
Targets only generic classes produced by the existing PHP templates, so items added later via the admin
panel are styled automatically. Motion is only applied when js/dynamic.js adds html.vt-anim. */
:root{--vt-ink:#17212a;--vt-navy:#1e2b37;--vt-orange:#f36b32;--vt-amber:#fec107;--vt-paper:#f6f6f3;--vt-line:rgba(23,33,42,.06);--vt-ease:cubic-bezier(.2,.7,.2,1);--vt-sy:0}
/* ---------- page load ---------- */
html.vt-anim body{animation:vtPage .7s var(--vt-ease) both}
@keyframes vtPage{from{opacity:0}to{opacity:1}}
/* ---------- header: transparent over hero, frosted ink when scrolled ---------- */
.main_section_banner_nav{transition:background .35s var(--vt-ease),box-shadow .35s,padding .35s,transform .35s}
html.vt-scrolled .main_section_banner_nav{position:fixed;top:0;left:0;background:rgba(23,33,42,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.18);padding:.2em .5em}
html.vt-scrolled .main_section_banner_nav .navbar-brand img{max-height:46px;width:auto;transition:max-height .35s}
html.vt-scrolled.vt-hide-nav .main_section_banner_nav{transform:translateY(-100%)}
.navbar-default .navbar-nav>li>a{position:relative}
.navbar-default .navbar-nav>li>a:after{content:'';position:absolute;left:15px;right:15px;bottom:6px;height:2px;background:var(--vt-orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--vt-ease)}
.navbar-default .navbar-nav>li>a:hover:after,.navbar-default .navbar-nav>li.active>a:after{transform:scaleX(1)}
/* ---------- hero slider: gradient + blueprint grid + slow Ken Burns + parallax ---------- */
.banner_top .slider{position:relative}
.banner_top .rslides{overflow:hidden}
.banner_top .rslides li{overflow:hidden}
.banner_top #slider li:after{display:none;content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,rgba(23,33,42,.78) 0%,rgba(23,33,42,.35) 45%,rgba(23,33,42,.05) 75%),
repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 48px)}
.banner_top #slider img{transform:translate3d(0,calc(var(--vt-sy)*.18px),0) scale(1.06);transform-origin:60% 50%}
html.vt-anim .banner_top #slider .rslides1_on img,html.vt-anim .banner_top #slider li:first-child img{animation:vtKen 9s linear both}
@keyframes vtKen{from{scale:1}to{scale:1.07}}
.slider_banner_text_info{z-index:3}
.slider_banner_text_info h2{color:var(--vt-amber)}
.slider_banner_text_info h2:before{content:'';display:none;width:64px;height:3px;background:var(--vt-orange);margin-bottom:18px}
html.vt-anim .rslides li .slider_banner_text_info>*{animation:vtRise .9s var(--vt-ease) both}
html.vt-anim .rslides li .slider_banner_text_info>*:nth-child(2){animation-delay:.12s}
html.vt-anim .rslides li .slider_banner_text_info>*:nth-child(n+3){animation-delay:.24s}
@keyframes vtRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.slider_banner_text_info a{transition:background .3s,border-color .3s,transform .3s}
.slider_banner_text_info a:hover{background:var(--vt-orange);border-color:var(--vt-orange);transform:translateY(-2px)}
#slider3-pager img{transition:transform .3s var(--vt-ease)}
#slider3-pager a:hover img{transform:scale(1.08)}
/* ---------- section backgrounds: faint blueprint grid with slow parallax ---------- */
.about,.services,.gallery,.contact,.choose,.welcome,.clients-main{
background-image:repeating-linear-gradient(0deg,var(--vt-line) 0 1px,transparent 1px 56px),repeating-linear-gradient(90deg,var(--vt-line) 0 1px,transparent 1px 56px);
background-position:0 calc(var(--vt-sy)*-.08px)}
.bottom,.footer{background-color:var(--vt-ink)!important;
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 56px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 56px)}
.footer{border-top:3px solid var(--vt-orange)}
/* ---------- section headings: ink tag + orange rule that draws in ---------- */
h3.heading{letter-spacing:-.5px}
h3.heading span{position:relative;background:var(--vt-ink)!important;border-radius:2px}
h3.heading span:after{left:calc(100% + 18px)!important;right:auto!important;bottom:46%!important;width:70px!important;height:3px!important;background:var(--vt-orange)!important;transform-origin:left;transition:transform .9s .25s var(--vt-ease)}
html.vt-anim h3.heading.vt-reveal span:after{transform:scaleX(0)}
html.vt-anim h3.heading.vt-in span:after{transform:scaleX(1)}
/* ---------- scroll reveal (only when JS sets html.vt-anim) ---------- */
html.vt-anim .vt-reveal{opacity:0;transform:translate3d(0,34px,0);transition:opacity .8s var(--vt-ease),transform .9s var(--vt-ease);transition-delay:var(--vt-d,0s)}
html.vt-anim .vt-reveal.vt-left{transform:translate3d(-40px,0,0)}
html.vt-anim .vt-reveal.vt-right{transform:translate3d(40px,0,0)}
html.vt-anim .vt-reveal.vt-in{opacity:1;transform:none}
html.vt-anim .vt-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--vt-ease);transition-delay:var(--vt-d,0s)}
html.vt-anim .vt-mask.vt-in{clip-path:inset(0 0 0 0)}
/* ---------- About: asymmetric composition ---------- */
@media(min-width:992px){
.about_left{padding-right:3em;border-left:3px solid var(--vt-orange);padding-left:1.6em;margin-top:2.5em}
.about_right{position:relative;margin-top:-1em}
.about_right:before{content:'';position:absolute;left:34px;top:22px;right:-8px;bottom:-18px;border:2px solid var(--vt-orange);border-radius:4px;z-index:0;opacity:.85}
.about_right #myCarousel{position:relative;z-index:1;box-shadow:0 18px 40px rgba(23,33,42,.18);border-radius:4px;overflow:hidden}
}
/* ---------- 6 Steps: numbered zig-zag cards (numbers come from position, not data) ---------- */
.step-produk .container:last-child{counter-reset:vtstep}
.step-produk .border-product{position:relative;background:#fff;border:1px solid #e6e8ea!important;border-radius:6px;transition:transform .35s var(--vt-ease),box-shadow .35s;counter-increment:vtstep}
.step-produk .border-product:before{content:counter(vtstep,decimal-leading-zero);position:absolute;top:8px;left:10px;font-weight:700;font-size:13px;color:var(--vt-orange);letter-spacing:1px}
.step-produk .border-product:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(23,33,42,.12)}
@media(min-width:992px){.step-produk .col-md-2:nth-child(even){margin-top:28px}.step-produk .container:last-child{padding-bottom:28px}}
/* ---------- cards: lift / tilt (tilt via JS on fine pointers) ---------- */
.ser_grid1,.gallery-img,.choose-grid .blog-left,.search-catalog,.col_team_grid .view,.clients-main .item,.isi-blog{transition:transform .4s var(--vt-ease),box-shadow .4s}
.ser_grid1{border-radius:8px;padding-top:1.2em;padding-bottom:1.2em}
.ser_grid1:hover,.choose-grid .blog-left:hover,.search-catalog:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(23,33,42,.12);background:#fff}
.gallery-img{overflow:hidden;border-radius:4px}
.gallery-img img{transition:transform .7s var(--vt-ease)}
.gallery-img:hover img{transform:scale(1.07)}
[data-vt-tilt]{transform-style:preserve-3d;will-change:transform}
/* ---------- catalog list / blog list / services (shared .search-catalog pattern) ---------- */
.search-catalog{background:#fff;border:1px solid #eceef0;border-radius:8px;margin-bottom:18px;overflow:hidden}
.search-catalog img.cat{transition:transform .7s var(--vt-ease)}
.search-catalog:hover img.cat{transform:scale(1.05)}
.text-services{color:var(--vt-ink);font-weight:700}
.blog-left-services a[style]{background:var(--vt-orange)!important;border-radius:3px;display:inline-block;letter-spacing:1px;transition:background .3s,transform .3s,box-shadow .3s}
.blog-left-services a[style]:hover{background:var(--vt-ink)!important;transform:translateX(4px);box-shadow:0 6px 16px rgba(243,107,50,.25);text-decoration:none}
.categories{border-left:3px solid var(--vt-orange);padding-left:12px}
.categories-list .list-services{transition:padding .3s var(--vt-ease),color .3s,background .3s}
.categories-list a:hover .list-services{padding-left:22px;color:var(--vt-orange);background:rgba(243,107,50,.06)}
.list-image{transition:transform .3s var(--vt-ease)}
.list-image:hover{transform:translateX(4px)}
/* ---------- product detail ---------- */
.catalog-menu .search-text{position:relative;padding-bottom:14px}
.catalog-menu .search-text:after{content:'';position:absolute;left:0;bottom:0;width:70px;height:3px;background:var(--vt-orange)}
.catalog-menu img.img-responsive{border-radius:6px;box-shadow:0 16px 40px rgba(23,33,42,.12)}
.nav-tabs>li>a{transition:color .3s,border-color .3s}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{border-bottom-color:transparent;box-shadow:inset 0 -3px 0 var(--vt-orange)}
/* ---------- partner ---------- */
.choose-grid .blog-left{background:#fff;border-radius:8px;padding:14px}
.partner-image img{transition:filter .4s,transform .5s var(--vt-ease)}
.choose-grid:hover .partner-image img{transform:scale(1.04)}
.choose-button a{background:var(--vt-orange)!important;border-radius:3px;transition:background .3s,transform .3s}
.choose-button a:hover{background:var(--vt-ink)!important;transform:translateY(-2px)}
/* ---------- contact & forms ---------- */
.input-contact-form-grid input,.input-contact-form-grid textarea{transition:border-color .3s,box-shadow .3s}
.input-contact-form-grid input:focus,.input-contact-form-grid textarea:focus{border-color:var(--vt-orange)!important;box-shadow:0 0 0 3px rgba(243,107,50,.15);outline:none}
.btn1{background:var(--vt-orange)!important;border-color:var(--vt-orange)!important;transition:background .3s,transform .3s}
.btn1:hover{background:var(--vt-ink)!important;transform:translateY(-2px)}
/* ---------- footer ---------- */
.col_footer_grid h3{position:relative;padding-bottom:10px}
.col_footer_grid h3:after{content:'';position:absolute;left:0;bottom:0;width:40px;height:2px;background:var(--vt-orange)}
.social_iconsinfo li a{transition:transform .3s,background .3s}
.social_iconsinfo li a:hover{transform:translateY(-3px);background:var(--vt-orange)!important}
/* ---------- scroll progress line ---------- */
.vt-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--vt-orange);transform-origin:0 50%;transform:scaleX(0);z-index:1000;pointer-events:none}
@media(min-width:768px){.banner_top #slider li:after{display:block}.slider_banner_text_info h2:before{display:block}}
.choose-grid .blog-left{border:1px solid #eceef0;box-shadow:0 4px 14px rgba(23,33,42,.05)}
.ser_grid1>a{border-color:var(--vt-orange)!important;color:var(--vt-orange)!important;transition:background .3s,color .3s}
.ser_grid1>a:hover{background:var(--vt-orange)!important;color:#fff!important;text-decoration:none}
/* ---------- mobile ---------- */
@media(max-width:767px){
html.vt-anim .vt-reveal,html.vt-anim .vt-reveal.vt-left,html.vt-anim .vt-reveal.vt-right{transform:translate3d(0,22px,0)}
html.vt-anim .vt-reveal.vt-in{transform:none}
.banner_top #slider img{transform:scale(1.06)}
html.vt-scrolled .main_section_banner_nav{padding:0}
}
/* ---------- reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion:reduce){
*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.vt-reveal,.vt-mask{opacity:1!important;transform:none!important;clip-path:none!important}
.banner_top #slider img{transform:none!important}
}
/* contain hero zoom/parallax inside the slide list (pager is a separate ul, unaffected) */
.banner_top ul#slider{overflow:hidden}
@media(max-width:767px){html.vt-anim .banner_top #slider img{transform:none!important;animation:none!important}}
/* hero subtitle: original line-height makes 2-line text touch */
@media(min-width:768px){.slider_banner_text_info p{line-height:1.3}}
/* headings that sit on dark sections (e.g. Our Product): orange chip so the label stays legible */
.clients-main h3.heading span,.bottom h3.heading span,.footer h3.heading span{background:var(--vt-orange)!important;color:#fff!important}
/* ---------- About Us readability fix (2026-11-09) — additive ---------- */
/* Root causes addressed:
1) .about_left p { text-align:justify } in style.css + letter-spacing:1px → large word gaps
2) Bootstrap .carousel-control { width:15% } + absolute FA arrows sit on the column seam and can cover text
3) Inline float:left on the teaser wrapper + nested
from DB truncates layout
4) Mobile: little padding, cramped line-height */
/* Do NOT set float:none on .about_left — Bootstrap 3 columns need float */
.about_left > p[style*="float"],
.about_left p {
float: none !important; /* only kill the inline float on the teaser