/* ==========================================================================
PT INDOTECH SCIENTIFIC - Stylesheet Utama
Tanpa framework eksternal, tanpa webfont eksternal -> ukuran kecil dan
Core Web Vitals (LCP/CLS) tetap baik, yang juga menguntungkan SEO.
========================================================================== */
/* ---------- 1. TOKEN DESAIN ---------- */
:root{
--navy:#0B2A4A;
--navy-700:#0E3459;
--navy-600:#12456F;
--navy-100:#E8EEF5;
--teal:#00A5A8;
--teal-600:#00888B;
--teal-50:#E6F7F7;
--amber:#F5A623;
--amber-600:#D98C0E;
--bg:#FFFFFF;
--bg-soft:#F5F8FB;
--bg-mute:#EDF2F7;
--text:#1D2B3A;
--text-soft:#4A5B6D;
--muted:#6B7C8F;
--border:#DFE6EE;
--border-strong:#C7D3E0;
--ok:#1B8A5A;
--warn:#C77700;
--danger:#C0392B;
--radius-sm:6px;
--radius:10px;
--radius-lg:16px;
--shadow-sm:0 1px 2px rgba(11,42,74,.06),0 1px 3px rgba(11,42,74,.08);
--shadow:0 4px 14px rgba(11,42,74,.08);
--shadow-lg:0 14px 40px rgba(11,42,74,.14);
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
--container:1200px;
--header-h:76px;
}
/* ---------- 2. RESET & DASAR ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:hidden pada html dipropagasi browser ke viewport, sehingga halaman
tidak bisa digeser horizontal oleh panel menu mobile yang diparkir di luar
layar (translateX(100%)). Nilai `clip` TIDAK dipropagasi ke viewport, jadi
tidak dipakai di sini. overflow-y sengaja tidak diset agar tetap `visible`. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:hidden}
body{
margin:0;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--text);
background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-600);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--navy-600);text-decoration:underline}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;line-height:1.25;color:var(--navy);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,4vw,2.6rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.22rem}
h4{font-size:1.05rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.35rem}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--border);margin:2.5rem 0}
blockquote{margin:1.5rem 0;padding:.4rem 0 .4rem 1.25rem;border-left:4px solid var(--teal);color:var(--text-soft);font-style:italic}
code{background:var(--bg-mute);padding:.12em .4em;border-radius:4px;font-size:.9em}
table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.95rem}
th,td{padding:.65rem .8rem;border:1px solid var(--border);text-align:left;vertical-align:top}
th{background:var(--navy-100);color:var(--navy);font-weight:600}
tbody tr:nth-child(even){background:var(--bg-soft)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--navy);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0;color:#fff}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section-sm{padding:40px 0}
.section-soft{background:var(--bg-soft)}
.section-navy{background:var(--navy);color:#DCE6F0}
.section-navy h2,.section-navy h3{color:#fff}
.mt{margin-top:1.75rem}
.text-center{text-align:center}
.ico{flex:0 0 auto;fill:currentColor;opacity:.85}
.section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.section-head .eyebrow{display:inline-block;margin-bottom:.6rem}
.section-head p{color:var(--muted);font-size:1.05rem}
.eyebrow{
display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--teal-600);background:var(--teal-50);padding:.3rem .7rem;border-radius:99px;
}
.section-navy .eyebrow{background:rgba(0,165,168,.18);color:#6EE7E7}
/* ---------- 3. TOMBOL ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.72rem 1.4rem;border-radius:var(--radius-sm);border:1px solid transparent;
font:600 .95rem/1 var(--font);cursor:pointer;text-decoration:none!important;
transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease;
white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{fill:currentColor}
.btn-accent{background:var(--teal);color:#fff}
.btn-accent:hover{background:var(--teal-600);color:#fff;box-shadow:0 6px 18px rgba(0,165,168,.3)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-600);color:#fff}
.btn-amber{background:var(--amber);color:#231703}
.btn-amber:hover{background:var(--amber-600);color:#fff}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--navy-100);color:var(--navy)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-600);background:var(--teal-50)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-ghost{background:transparent;color:var(--teal-600);padding:.4rem .6rem}
.btn-ghost:hover{background:var(--teal-50)}
.btn-sm{padding:.45rem .9rem;font-size:.85rem}
.btn-lg{padding:.9rem 1.9rem;font-size:1.05rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.icon-btn{
display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;color:var(--navy);
transition:border-color .15s,color .15s,background .15s;
}
.icon-btn:hover{border-color:var(--teal);color:var(--teal-600);background:var(--teal-50)}
.icon-btn svg{fill:currentColor}
/* ---------- 4. TOPBAR ---------- */
.topbar{background:var(--navy);color:#C9D8E8;font-size:.82rem;padding:.45rem 0}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar-list{display:flex;gap:1.5rem;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.topbar-list li{display:flex;align-items:center;gap:.4rem;margin:0}
.topbar a{color:#C9D8E8}
.topbar a:hover{color:#fff;text-decoration:none}
.social-inline{display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.social-inline li{margin:0}
.social-inline a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.09)}
.social-inline a:hover{background:var(--teal)}
.social-inline svg{fill:#fff}
/* ---------- 5. HEADER & NAVIGASI ---------- */
.site-header{
position:sticky;top:0;z-index:900;background:rgba(255,255,255,.97);
border-bottom:1px solid var(--border);backdrop-filter:saturate(180%) blur(8px);
}
/* PENTING: backdrop-filter (sama seperti filter/transform) menjadikan elemen
sebagai "containing block" bagi descendant position:fixed. Panel menu mobile
(#mainNav) berada di dalam header dan memakai position:fixed;inset:0, sehingga
selama backdrop-filter aktif panel tersebut diposisikan & DIPOTONG mengikuti
kotak header, bukan viewport: menu terlihat hanya setinggi header dan item
menu tidak bisa diketuk. Efek frosted-glass karenanya dimatikan di layar
kecil; latar rgba(255,255,255,.97) sudah cukup pekat tanpa blur. */
@media (max-width:1100px){
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
}
.header-inner{display:flex;align-items:center;gap:1.25rem;min-height:var(--header-h);justify-content:center}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none!important;flex:0 0 auto}
.brand img{width:auto;height:56px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{color:var(--navy);font-size:1.02rem;letter-spacing:-.01em}
.brand-text small{color:var(--muted);font-size:.68rem;max-width:210px;line-height:1.3}
.main-nav{flex:0 0 auto}
.nav-list{display:flex;align-items:center;gap:.15rem;margin:0;padding:0;list-style:none}
.nav-list>li{position:relative;margin:0}
.nav-list>li>a{
display:flex;align-items:center;gap:.3rem;padding:1.5rem .8rem;color:var(--text);
font-weight:600;font-size:.92rem;text-decoration:none!important;border-bottom:3px solid transparent;
}
.nav-list>li>a:hover,.nav-list>li.active>a{color:var(--teal-600);border-bottom-color:var(--teal)}
.caret{fill:currentColor;opacity:.6;transition:transform .2s}
.has-mega:hover>.mega,.has-mega:focus-within>.mega{opacity:1;visibility:visible;transform:translateY(0)}
.has-mega:hover .caret{transform:rotate(180deg)}
.mega{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
min-width:640px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
padding:1.1rem;z-index:950;
}
.mega-inner{display:grid;grid-template-columns:1.6fr .9fr;gap:1.1rem}
.mega-list{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;margin:0;padding:0;list-style:none}
.mega-list li{margin:0}
.mega-list a{display:block;padding:.6rem .7rem;border-radius:var(--radius-sm);text-decoration:none!important;transition:background .15s}
.mega-list a:hover{background:var(--bg-soft)}
.mega-title{display:block;font-weight:600;font-size:.88rem;color:var(--navy);line-height:1.35}
.mega-desc,.mega-count{display:block;font-size:.76rem;color:var(--muted);margin-top:.15rem;line-height:1.4}
.mega-count{color:var(--teal-600);font-weight:600}
.mega-cta{
background:linear-gradient(160deg,var(--navy),var(--navy-600));color:#DCE6F0;border-radius:var(--radius);
padding:1.1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;
}
.mega-cta strong{color:#fff;font-size:.95rem;line-height:1.35}
.mega-cta p{font-size:.8rem;margin:0;color:#B9CBDD}
.mega-cta .btn{align-self:flex-start;margin-top:.3rem}
/* Dropdown menu sederhana */
.has-dropdown{position:relative}
.has-dropdown:hover>.dropdown,.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.has-dropdown:hover .caret{transform:rotate(180deg)}
.dropdown{
position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;
transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;
padding:.5rem 0;z-index:950;list-style:none;margin:0;
}
.dropdown li{margin:0}
.dropdown a{
display:block;padding:.6rem 1rem;color:var(--navy);text-decoration:none;font-size:.9rem;
transition:background .15s,color .15s;
}
.dropdown a:hover,.dropdown a.active{background:var(--bg-soft);color:var(--teal-600)}
.header-actions{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.btn-header-cta{padding:.6rem 1.05rem;font-size:.87rem}
.search-bar{border-top:1px solid var(--border);background:var(--bg-soft);padding:14px 0}
.search-bar form{display:flex;gap:.6rem}
.search-bar input[type=search]{
flex:1;padding:.7rem 1rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
font:400 .95rem var(--font);background:#fff;
}
.search-bar input[type=search]:focus{outline:2px solid var(--teal);outline-offset:-1px}
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px}
.nav-close{display:none}
/* ---------- 6. HERO ---------- */
.hero{
position:relative;background:linear-gradient(120deg,#08203A 0%,#0B2A4A 45%,#12456F 100%);
color:#EAF1F8;overflow:hidden;
}
.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(760px 420px at 82% 18%,rgba(0,165,168,.28),transparent 62%),
radial-gradient(520px 380px at 8% 92%,rgba(245,166,35,.14),transparent 60%);
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:80px 0}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:1.15;margin-bottom:1rem}
.hero h1 .hl{color:#5FE3E3}
.hero .lead{font-size:1.1rem;color:#C3D5E6;max-width:60ch;margin-bottom:1.8rem;line-height:1.7}
.hero .eyebrow{background:rgba(0,165,168,.2);color:#7FEDED;margin-bottom:1rem}
.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.2rem}
.hero-actions .btn{padding:.85rem 1.6rem;font-size:.95rem}
.hero-trust{display:flex;gap:2rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
.hero-trust div{min-width:120px}
.hero-trust strong{display:block;font-size:1.75rem;color:#fff;line-height:1.1;margin-bottom:.2rem}
.hero-trust span{font-size:.82rem;color:#9FB8CE}
.hero-visual{position:relative;display:flex;flex-direction:column;gap:1.5rem}
.hero-card{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
padding:1.5rem;backdrop-filter:blur(6px);
}
.hero-card h2{color:#fff;font-size:1.1rem;margin-bottom:1.1rem}
.hero-scope{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.hero-scope li{display:flex;align-items:flex-start;gap:.7rem;font-size:.9rem;color:#D2E1EE;margin:0;line-height:1.5}
.hero-scope li::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(0,165,168,.25);margin-top:.2rem;
background-image:url("data:image/svg+xml;utf8,");
background-size:14px;background-position:center;background-repeat:no-repeat}
.hero-badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14)}
.hero-badges span{font-size:.75rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:.35rem .75rem;border-radius:99px;color:#CFE0EE}
.hero-visual picture img{border-radius:var(--radius-lg);box-shadow:0 20px 50px rgba(0,0,0,.35);margin-top:0}
/* Hero halaman dalam */
.page-hero{background:linear-gradient(120deg,#08203A,#12456F);color:#EAF1F8;padding:44px 0 40px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 88% 10%,rgba(0,165,168,.26),transparent 62%)}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;margin-bottom:.4rem}
.page-hero p{color:#B9CBDD;max-width:74ch;margin:0}
.page-hero .eyebrow{background:rgba(0,165,168,.2);color:#7FEDED;margin-bottom:.7rem}
.breadcrumbs{margin-bottom:1rem;font-size:.82rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.breadcrumbs li{display:flex;align-items:center;gap:.35rem;margin:0;color:#9FB8CE}
.breadcrumbs li+li::before{content:"/";color:rgba(255,255,255,.35);margin-right:.15rem}
.breadcrumbs a{color:#C3D5E6}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs li.current span{color:#7FEDED}
.breadcrumbs-light li{color:var(--muted)}
.breadcrumbs-light li+li::before{color:var(--border-strong)}
.breadcrumbs-light a{color:var(--text-soft)}
.breadcrumbs-light li.current span{color:var(--teal-600);font-weight:600}
/* ---------- 7. KARTU & GRID ---------- */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;display:flex;flex-direction:column;
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--border-strong)}
.card-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1;gap:.6rem}
/* Kartu layanan */
.service-card .card-body{gap:.65rem}
.service-ico{
width:56px;height:56px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
background:var(--teal-50);color:var(--teal-600);margin-bottom:.4rem;
}
.service-ico svg{width:28px;height:28px;fill:currentColor}
.service-card h3{font-size:1.1rem;margin:0;line-height:1.35}
.service-card h3 a{color:var(--navy);text-decoration:none!important}
.service-card h3 a:hover{color:var(--teal-600)}
.service-card p{font-size:.92rem;color:var(--muted);margin:.2rem 0 .9rem;flex:1;line-height:1.6}
.card-link{font-size:.88rem;font-weight:600;color:var(--teal-600);display:inline-flex;align-items:center;gap:.35rem;text-decoration:none!important;margin-top:.3rem}
.card-link:hover{gap:.6rem;color:var(--navy)}
.card-link::after{content:"→";transition:margin .15s}
/* Kartu produk */
.product-card .thumb{position:relative;aspect-ratio:1/1;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border)}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.product-card:hover .thumb img{transform:scale(1.05)}
.badge-row{position:absolute;top:.75rem;left:.75rem;display:flex;gap:.4rem;flex-wrap:wrap;z-index:2}
.badge{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .65rem;border-radius:99px;background:#fff;border:1px solid var(--border);color:var(--text-soft)}
.badge-teal{background:var(--teal);border-color:var(--teal);color:#fff}
.badge-amber{background:var(--amber);border-color:var(--amber);color:#231703}
.badge-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.badge-gray{background:var(--bg-mute);border-color:var(--border-strong);color:var(--muted)}
.badge-green{background:#E4F5EC;border-color:#B7E2C9;color:var(--ok)}
.badge-red{background:#FBE9E7;border-color:#F2C7C0;color:var(--danger)}
.product-card h3{font-size:1rem;margin:0 0 .4rem;line-height:1.45}
.product-card h3 a{color:var(--navy);text-decoration:none!important}
.product-card h3 a:hover{color:var(--teal-600)}
.product-meta{font-size:.8rem;color:var(--muted);display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:.7rem}
.product-meta span{display:inline-flex;align-items:center;gap:.3rem}
.price{font-size:1.15rem;font-weight:700;color:var(--navy);margin:.3rem 0}
.price small{display:block;font-size:.75rem;font-weight:500;color:var(--muted);margin-top:.15rem}
.price-onreq{font-size:.95rem;font-weight:600;color:var(--teal-600)}
.product-actions{display:flex;gap:.5rem;margin-top:auto;padding-top:1rem}
.product-actions .btn{flex:1;padding:.6rem .75rem;font-size:.85rem}
/* Kartu artikel */
.article-card .thumb{aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.article-card:hover .thumb img{transform:scale(1.05)}
.article-meta{display:flex;gap:.9rem;font-size:.78rem;color:var(--muted);margin-bottom:.6rem;flex-wrap:wrap}
.article-meta .cat{color:var(--teal-600);font-weight:600}
.article-card h3{font-size:1.08rem;margin:0 0 .5rem;line-height:1.45}
.article-card h3 a{color:var(--navy);text-decoration:none!important}
.article-card h3 a:hover{color:var(--teal-600)}
.article-card p{font-size:.87rem;color:var(--muted);margin:0 0 .8rem;flex:1}
/* ---------- 8. BAGIAN KHUSUS BERANDA ---------- */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.value-item{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
.value-item .vi{flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:var(--navy-100);color:var(--navy-600);display:flex;align-items:center;justify-content:center}
.value-item .vi svg{width:24px;height:24px;fill:currentColor}
.value-item h3{font-size:1.05rem;margin:0 0 .3rem;line-height:1.35}
.value-item p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.6}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;background:var(--navy-100)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media .overlay-note{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(11,42,74,.9);color:#fff;padding:.8rem 1.15rem;border-radius:var(--radius-sm);font-size:.85rem;backdrop-filter:blur(4px)}
.check-list{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.7rem}
.check-list li{display:flex;gap:.7rem;margin:0;font-size:.98rem;color:var(--text-soft);line-height:1.55}
.check-list li::before{
content:"";flex:0 0 auto;width:22px;height:22px;margin-top:.18rem;border-radius:50%;background:var(--teal-50);
background-image:url("data:image/svg+xml;utf8,");
background-size:15px;background-position:center;background-repeat:no-repeat;
}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stats-strip strong{display:block;font-size:2.5rem;color:var(--teal);line-height:1.1;font-weight:800;margin-bottom:.3rem}
.stats-strip span{font-size:.88rem;color:#A9C0D5}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:step}
.process-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1.4rem 1.4rem}
.process-step::before{
counter-increment:step;content:counter(step,decimal-leading-zero);
position:absolute;top:-15px;left:1.4rem;background:var(--teal);color:#fff;font-weight:800;font-size:.82rem;
padding:.3rem .7rem;border-radius:99px;letter-spacing:.05em;
}
.process-step h3{font-size:1.05rem;margin:.6rem 0 .4rem;line-height:1.35}
.process-step p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}
/* Testimoni */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.testi-stars{color:var(--amber);letter-spacing:.12em;font-size:.95rem}
.testi-card blockquote{margin:0;padding:0;border:0;font-style:normal;font-size:.95rem;color:var(--text-soft);flex:1;line-height:1.65}
.testi-author{display:flex;gap:.8rem;align-items:center;padding-top:.8rem;border-top:1px solid var(--border)}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--navy-100);color:var(--navy-600);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex:0 0 auto}
.testi-author strong{display:block;font-size:.95rem;color:var(--navy);margin-bottom:.1rem}
.testi-author span{font-size:.8rem;color:var(--muted)}
/* Klien / merek */
.brand-strip{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.brand-chip{background:#fff;border:1px solid var(--border);border-radius:99px;padding:.55rem 1.15rem;font-size:.88rem;font-weight:600;color:var(--text-soft)}
/* Kategori grid */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.cat-card{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;text-decoration:none!important;transition:all .2s}
.cat-card:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none!important}
.cat-card .cat-ico{width:46px;height:46px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center;margin-bottom:.85rem}
.cat-card .cat-ico svg{width:23px;height:23px;fill:currentColor}
.cat-card h3{font-size:1rem;margin:0 0 .25rem;color:var(--navy);line-height:1.35}
.cat-card p{font-size:.83rem;color:var(--muted);margin:0}
/* CTA band */
.cta-band{background:linear-gradient(115deg,var(--teal-600),var(--teal));color:#fff;padding:44px 0}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0 0 .35rem;font-size:1.5rem}
.cta-band p{margin:0;color:#DFF7F7;max-width:64ch}
.cta-band-actions{display:flex;gap:.7rem;flex-wrap:wrap}
/* ---------- 9. HALAMAN DAFTAR (filter / sidebar) ---------- */
.layout-sidebar{display:grid;grid-template-columns:265px 1fr;gap:32px;align-items:start}
.sidebar{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:1.25rem}
.side-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.15rem}
.side-box h3{font-size:.92rem;margin:0 0 .8rem;padding-bottom:.55rem;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.side-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.side-list li{margin:0}
.side-list a{display:flex;justify-content:space-between;gap:.5rem;padding:.42rem .5rem;border-radius:var(--radius-sm);font-size:.88rem;color:var(--text-soft);text-decoration:none!important}
.side-list a:hover{background:var(--bg-soft);color:var(--navy)}
.side-list li.active a{background:var(--teal-50);color:var(--teal-600);font-weight:600}
.side-list .cnt{font-size:.75rem;color:var(--muted);background:var(--bg-mute);border-radius:99px;padding:.05rem .45rem;min-width:24px;text-align:center}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
.toolbar .result-count{font-size:.9rem;color:var(--muted)}
.toolbar .result-count strong{color:var(--navy)}
.toolbar form{display:flex;gap:.5rem;align-items:center}
.toolbar select,.toolbar input[type=search]{padding:.5rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:400 .88rem var(--font);background:#fff;color:var(--text)}
.toolbar select:focus,.toolbar input:focus{outline:2px solid var(--teal);outline-offset:-1px}
.filter-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid var(--border);border-radius:99px;padding:.35rem .8rem;font-size:.82rem;color:var(--text-soft);text-decoration:none!important}
.chip:hover{border-color:var(--teal);color:var(--teal-600);text-decoration:none}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pagination{margin:2.5rem 0 0}
.pagination ul{display:flex;gap:.35rem;justify-content:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.pagination li{margin:0}
.pagination a,.pagination span{
display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .7rem;
border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.88rem;color:var(--text-soft);text-decoration:none!important;
}
.pagination a:hover{border-color:var(--teal);color:var(--teal-600);background:var(--teal-50)}
.pagination .current{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.pagination .disabled{color:var(--border-strong);background:var(--bg-soft)}
.pagination .dots{border:0;background:none}
.empty-state{text-align:center;padding:56px 20px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg-soft)}
.empty-state h3{margin-bottom:.4rem}
.empty-state p{color:var(--muted);margin:0 auto 1.2rem;max-width:52ch}
/* ---------- 10. DETAIL ---------- */
.detail-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.detail-main{min-width:0}
.detail-aside{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:1.25rem}
.detail-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;margin-bottom:2.5rem}
.detail-hero-media{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.detail-hero-media img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer}
.product-title-block h1{font-size:clamp(1.6rem,3vw,2.15rem);margin-bottom:.6rem}
.product-title-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.product-title-meta span{display:inline-flex;align-items:center;gap:.35rem}
.product-price-box{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:1.15rem;margin-bottom:1.2rem}
.product-price-box .big{font-size:1.65rem;font-weight:800;color:var(--navy);line-height:1.2}
.product-price-box .note{font-size:.8rem;color:var(--muted);margin-top:.25rem}
.product-actions-lg{display:flex;gap:.6rem;flex-wrap:wrap}
.spec-table th{width:38%;background:var(--bg-soft);font-weight:600;color:var(--text-soft)}
.spec-table td{font-weight:500}
.prose{font-size:1.02rem;line-height:1.78;color:var(--text-soft)}
.prose h2{font-size:1.4rem;margin:2rem 0 .7rem;color:var(--navy);scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h3{font-size:1.12rem;margin:1.5rem 0 .5rem;color:var(--navy)}
.prose p{margin:0 0 1.05rem}
.prose ul,.prose ol{margin:0 0 1.15rem}
.prose li{margin-bottom:.45rem}
.prose strong{color:var(--navy);font-weight:600}
.prose img{border-radius:var(--radius);margin:1.25rem 0}
.prose table{font-size:.93rem}
/* Daftar bertingkat (scope, deliverables) */
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none}
.pill-list li{margin:0}
.pill{background:var(--bg-soft);border:1px solid var(--border);border-radius:99px;padding:.38rem .85rem;font-size:.84rem;color:var(--text-soft)}
.aside-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem}
.aside-card h3{font-size:.98rem;margin:0 0 .8rem}
.aside-card .aside-ico{width:44px;height:44px;border-radius:10px;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.aside-card .aside-ico svg{width:23px;height:23px;fill:currentColor}
.aside-card p{font-size:.88rem;color:var(--muted)}
.aside-contact{background:linear-gradient(160deg,var(--navy),var(--navy-600));color:#DCE6F0;border:0}
.aside-contact h3{color:#fff}
.aside-contact p{color:#B9CBDD}
.aside-contact ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.55rem}
.aside-contact li{display:flex;gap:.55rem;align-items:center;font-size:.88rem;margin:0}
.aside-contact a{color:#8FE9E9}
.aside-contact a:hover{color:#fff}
.aside-contact .ico{fill:#8FE9E9}
/* Timeline proses */
.timeline{list-style:none;margin:1.5rem 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--border)}
.timeline li{position:relative;padding:0 0 1.5rem 3rem;margin:0}
.timeline li::before{content:"";position:absolute;left:6px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--teal);z-index:1}
.timeline strong{display:block;color:var(--navy);font-size:1rem;margin-bottom:.2rem}
.timeline p{margin:0;font-size:.92rem;color:var(--muted)}
/* FAQ */
.faq-list{display:grid;gap:.7rem;margin-top:1.5rem}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden}
.faq-item summary{
cursor:pointer;padding:1rem 1.15rem;font-weight:600;color:var(--navy);list-style:none;
display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.98rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--teal);font-weight:400;line-height:1;transition:transform .2s}
.faq-item[open] summary::after{content:"−"}
.faq-item[open] summary{border-bottom:1px solid var(--border);background:var(--bg-soft)}
.faq-item .faq-body{padding:1rem 1.15rem;font-size:.93rem;color:var(--text-soft)}
.faq-item .faq-body p:last-child{margin-bottom:0}
/* ---------- 11. FORM ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:0}
.field label{font-size:.86rem;font-weight:600;color:var(--navy)}
.field label .req{color:var(--danger)}
.field input,.field select,.field textarea{
padding:.68rem .85rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
font:400 .95rem var(--font);color:var(--text);background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,165,168,.15)}
.field .hint{font-size:.78rem;color:var(--muted)}
.field .error{font-size:.8rem;color:var(--danger);font-weight:500}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:var(--danger)}
/* Honeypot anti-bot: disembunyikan dari manusia, terlihat oleh bot */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}
.alert{padding:.85rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:1.25rem;font-size:.92rem;border:1px solid}
.alert-success{background:#E7F6EE;border-color:#B4E2C6;color:#14603C}
.alert-error{background:#FDECEA;border-color:#F3C4BD;color:#8E2C20}
.alert-info{background:var(--teal-50);border-color:#B3E4E4;color:#0A5F61}
.alert-warn{background:#FFF6E5;border-color:#F5DDA8;color:#7A5200}
/* Daftar penawaran (RFQ) */
.quote-list{list-style:none;margin:0;padding:0}
.quote-list li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--border);font-size:.92rem;align-items:flex-start}
.quote-list li:last-child{border-bottom:0}
.quote-list .qty{display:flex;align-items:center;gap:.4rem}
.quote-list input[type=number]{width:70px;padding:.3rem .4rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:.85rem}
.quote-list .remove{background:none;border:0;color:var(--danger);cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .4rem}
.badge-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 .35rem;border-radius:99px;background:var(--amber);color:#231703;font-size:.72rem;font-weight:700}
/* ---------- 12. KONTAK ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;text-align:center}
.contact-card .ci{width:52px;height:52px;margin:0 auto .8rem;border-radius:14px;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center}
.contact-card .ci svg{width:25px;height:25px;fill:currentColor}
.contact-card h3{font-size:1rem;margin-bottom:.3rem}
.contact-card p,.contact-card a{font-size:.9rem;color:var(--muted);margin:0}
.contact-card a{display:block}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);aspect-ratio:16/7;background:var(--bg-mute)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}
.info-table{width:100%;border:0}
.info-table th{background:transparent;border:0;padding:.5rem 0 .5rem 0;width:38%;color:var(--muted);font-weight:600;font-size:.88rem;vertical-align:top}
.info-table td{border:0;padding:.5rem 0;font-size:.92rem}
.info-table tr+tr th,.info-table tr+tr td{border-top:1px solid var(--border)}
/* Tim / nilai perusahaan */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
/* Sertifikasi */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cert-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.cert-card .cert-head{background:linear-gradient(135deg,var(--navy-100),#F7FAFD);padding:1.5rem;text-align:center;border-bottom:1px solid var(--border)}
.cert-card .cert-seal{width:64px;height:64px;margin:0 auto .6rem;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.7rem;letter-spacing:.05em;text-align:center;line-height:1.1;padding:.3rem}
.cert-card .cert-body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.cert-card h3{font-size:1rem;margin:0}
.cert-card .issuer{font-size:.84rem;color:var(--teal-600);font-weight:600}
.cert-card p{font-size:.86rem;color:var(--muted);margin:.3rem 0 0;flex:1}
.cert-card .validity{font-size:.78rem;color:var(--muted);border-top:1px solid var(--border);padding-top:.6rem;margin-top:.6rem;display:flex;justify-content:space-between;gap:.5rem}
/* ---------- 13. FOOTER ---------- */
.site-footer{background:#071E33;color:#9FB8CE;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.25rem;padding:56px 20px 40px}
.footer-col h3{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem}
.footer-col h3.mt{margin-top:1.75rem}
.footer-col p{color:#9FB8CE;font-size:.88rem;line-height:1.7}
.footer-col a{color:#9FB8CE}
.footer-col a:hover{color:#5FE3E3;text-decoration:none}
.footer-about img{height:56px;width:auto;margin-bottom:.9rem;filter:brightness(0) invert(1);opacity:.95}
.footer-contact{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.6rem}
.footer-contact li{display:flex;gap:.55rem;align-items:flex-start;margin:0;font-size:.86rem}
.footer-contact .ico{fill:#5FE3E3;margin-top:.2rem}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.footer-links li{margin:0}
.footer-links a{font-size:.88rem;display:inline-block;padding:.1rem 0}
.newsletter-form .newsletter-row{display:flex;gap:.5rem}
.newsletter-form input[type=email]{flex:1;min-width:0;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);background:rgba(255,255,255,.06);color:#fff;font:400 .88rem var(--font)}
.newsletter-form input::placeholder{color:#7A93A9}
.newsletter-form input:focus{outline:2px solid var(--teal);outline-offset:-1px}
.form-note{font-size:.8rem;margin:.4rem 0 0;min-height:1.1em}
.form-note.ok{color:#6EE7A8}
.form-note.err{color:#FF9E91}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.1rem 0}
.footer-bottom-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-bottom p{margin:0;font-size:.82rem;color:#7A93A9}
/* ---------- 14. FLOATING & UTILITAS ---------- */
.wa-float{
position:fixed;right:22px;bottom:22px;z-index:800;width:56px;height:56px;border-radius:50%;
background:#25D366;display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 24px rgba(37,211,102,.42);transition:transform .18s ease;
}
.wa-float:hover{transform:scale(1.07)}
.back-to-top{
position:fixed;right:26px;bottom:88px;z-index:800;width:42px;height:42px;border-radius:50%;
background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.back-to-top svg{fill:#fff}
.back-to-top:hover{background:var(--teal);color:#fff}
.sticky-note{position:sticky;top:calc(var(--header-h) + 16px);z-index:5}
/* Cookie / info bar */
.notice-bar{background:var(--amber);color:#231703;padding:.55rem 0;font-size:.85rem;text-align:center}
/* ---------- 15. HALAMAN ERROR / PEMELIHARAAN ---------- */
.standalone{background:var(--bg-soft);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.standalone-wrap{width:100%;max-width:640px}
.standalone-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;text-align:center;box-shadow:var(--shadow)}
.standalone-icon{width:64px;height:64px;border-radius:50%;background:var(--navy-100);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;margin:0 auto 1.2rem}
.standalone-icon.danger{background:#FDECEA;color:var(--danger)}
.standalone-card h1{font-size:1.6rem;margin-bottom:.5rem}
.standalone-card p{color:var(--muted)}
.standalone-card code{background:var(--bg-mute);padding:.15em .45em;border-radius:4px}
.error-code{font-size:5.5rem;font-weight:800;color:var(--navy-100);line-height:1;letter-spacing:-.03em}
/* ---------- 16. ANIMASI ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.in{animation:fadeUp .5s ease forwards}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.reveal{opacity:1}
}
/* Konfirmasi RFQ tetap terlihat sesudah redirect, termasuk di layar kecil. */
.alert.rfq-success{display:block;margin-bottom:2rem;scroll-margin-top:calc(var(--header-h) + 20px);overflow-wrap:anywhere}
.rfq-success h2{font-size:1.35rem;margin:0 0 .75rem}
.rfq-success p{margin:.6rem 0}
.rfq-success .btn{margin:.4rem .4rem 0 0;white-space:normal}
/* ---------- 17. RESPONSIF ---------- */
@media (max-width:1100px){
.mega{min-width:540px}
.mega-inner{grid-template-columns:1fr}
.mega-cta{display:none}
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
.detail-layout{grid-template-columns:1fr;gap:28px}
.detail-aside{position:static;grid-template-columns:repeat(2,1fr)}
.product-grid,.service-grid,.article-grid,.cert-grid{grid-template-columns:repeat(2,1fr)}
.cat-grid,.value-grid,.stats-strip,.team-grid{grid-template-columns:repeat(2,1fr)}
.process-grid,.testi-grid,.contact-grid{grid-template-columns:repeat(2,1fr)}
}
/* --- Navigasi layar <=1100px: drawer off-canvas -------------------------
Baris menu desktop (7 butir + mega menu hover) plus brand dan aksi header
butuh ~1300px. Di bawah 1100px ia tidak muat: sebagian tombol terdorong ke
luar viewport dan tidak bisa diketuk. Karena itu mulai lebar ini navigasi
dialihkan ke panel geser (drawer) yang dipanggil lewat tombol hamburger.
Breakpoint konten (grid, hero) tetap di 900px/640px seperti semula. */
@media (max-width:1100px){
.nav-toggle{display:flex}
/* Menu desktop berubah jadi drawer, sehingga satu-satunya flex item selain
brand adalah .header-actions; patok ke kanan agar tidak menempel brand. */
.header-actions{margin-left:auto}
/* Panel menu diparkir di luar layar dengan translateX(100%). Selain digeser,
ia juga harus dikeluarkan dari hit-testing dan dari tab-order: tanpa
visibility:hidden, link di dalam menu tertutup tetap bisa difokus dengan
tombol Tab (fokus "hilang" di luar layar) dan tetap menangkap sentuh.
Transisi visibility ditunda .28s saat menutup agar animasi geser sempat
terlihat, dan langsung visible saat membuka. */
.main-nav{
position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;z-index:1000;
transform:translateX(100%);visibility:hidden;pointer-events:none;
transition:transform .28s ease,visibility 0s linear .28s;
overflow-y:auto;padding:1.25rem;
box-shadow:var(--shadow-lg);margin-left:0;border-left:1px solid var(--border);
}
.main-nav.open{
transform:none;visibility:visible;pointer-events:auto;
transition:transform .28s ease,visibility 0s linear 0s;
}
.nav-close{display:block;position:absolute;top:.8rem;right:.9rem;background:none;border:0;font-size:2rem;line-height:1;color:var(--muted);cursor:pointer}
.nav-list{flex-direction:column;align-items:stretch;gap:0;margin-top:2rem}
.nav-list>li{border-bottom:1px solid var(--border)}
.nav-list>li>a{padding:.95rem .2rem;border-bottom:0;justify-content:space-between}
.nav-list>li.active>a{border-bottom:0;color:var(--teal-600)}
.has-mega .mega{
position:static;opacity:1;visibility:visible;transform:none;min-width:0;display:none;
box-shadow:none;border:0;padding:.2rem 0 .8rem .6rem;
}
.has-mega.expanded .mega{display:block}
.mega-list{grid-template-columns:1fr}
.has-dropdown .dropdown{
position:static;opacity:1;visibility:visible;transform:none;min-width:0;display:none;
box-shadow:none;border:0;padding:0;margin:0;
}
.has-dropdown.expanded .dropdown{display:block}
.dropdown a{padding:.85rem .2rem .85rem 1rem;font-size:.9rem}
body.nav-open{overflow:hidden}
/* Backdrop dibuat oleh main.js dan selalu ada di DOM. Saat menu tertutup ia
harus benar-benar "nonaktif": opacity:0 saja TIDAK cukup karena elemen
tetap menangkap klik, sehingga seluruh tombol di halaman tidak bisa
ditekan di layar kecil. visibility:hidden + pointer-events:none
mengeluarkannya dari hit-testing dan dari accessibility tree.
z-index 890 (BUKAN 999): panel #mainNav berada DI DALAM .site-header yang
position:sticky + z-index:900, sehingga z-index:1000 milik panel hanya
berlaku di dalam stacking context header tersebut. Bila backdrop diberi
z-index 999 ia berada di stacking context root dan menutupi SELURUH
header termasuk panel menu -> setiap ketukan pada item menu mengenai
backdrop dan menu langsung tertutup. Dengan 890, backdrop tetap menutupi
isi halaman (z auto/800) tetapi berada di bawah header (900) sehingga
panel menu bisa diketuk; hamburger di header tetap berfungsi menutup. */
.nav-backdrop{
position:fixed;inset:0;background:rgba(7,30,51,.5);z-index:890;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .25s ease,visibility .25s ease;
}
.nav-backdrop.show{opacity:1;visibility:visible;pointer-events:auto}
/* Backdrop utama (z 890) berada di bawah header (z 900) agar panel menu bisa
diketuk; konsekuensinya strip topbar+header tidak ikut redup saat menu
terbuka. Overlay kecil ini merapikannya: ia hidup di dalam stacking context
header/topbar dengan z-index 999 (< 1000 milik panel menu) dan
pointer-events:none sehingga hamburger & tombol lain tetap bisa ditekan. */
body.nav-open .topbar::after,
body.nav-open .site-header::after{
content:"";position:absolute;inset:0;background:rgba(7,30,51,.5);
z-index:999;pointer-events:none;
}
.topbar{position:relative}
}
@media (max-width:900px){
.hero-inner{grid-template-columns:1fr;gap:32px;padding:52px 0}
.hero-visual{order:-1}
.split{grid-template-columns:1fr;gap:28px}
.detail-hero{grid-template-columns:1fr;gap:24px}
.layout-sidebar{grid-template-columns:1fr}
.sidebar{position:static;grid-template-columns:repeat(2,1fr);gap:1rem}
.hide-sm{display:none}
/* --- Header di layar kecil -------------------------------------------
Tanpa aturan ini `.brand` (flex:0 0 auto) tetap selebar kontennya
(~385px) sehingga `.header-actions` terdorong ke luar viewport dan
tombol pencarian serta hamburger tidak bisa ditekan. Brand dibiarkan
menyusut + dipotong elipsis, aksi header dipatok ke kanan.
------------------------------------------------------------------- */
.header-inner{gap:.75rem}
.brand{flex:1 1 auto;min-width:0}
.brand img{height:48px}
.brand-text{min-width:0}
.brand-text strong,
.brand-text small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-actions{flex:0 0 auto;margin-left:auto}
/* Selector diperkuat: `.quote-cta{display:inline-flex}` di bagian bawah
file punya spesifisitas sama dan tertulis lebih akhir, sehingga
`.btn-header-cta{display:none}` di sini kalah bila tidak dikualifikasi. */
.header-actions .btn-header-cta{display:none}
.btn-header-cta{display:none}
}
@media (max-width:640px){
.section{padding:44px 0}
.product-grid,.service-grid,.article-grid,.cert-grid{grid-template-columns:1fr}
.cat-grid,.value-grid,.stats-strip,.team-grid{grid-template-columns:1fr}
.process-grid,.testi-grid,.contact-grid{grid-template-columns:1fr}
.sidebar{grid-template-columns:1fr}
.detail-aside{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;padding:40px 20px 28px}
.footer-bottom-inner{flex-direction:column;gap:.4rem;text-align:center}
.cta-band-inner{flex-direction:column;align-items:flex-start}
.topbar-list{gap:.9rem;font-size:.76rem}
.brand-text small{display:none}
.hero-trust{gap:1.1rem}
.hero-trust strong{font-size:1.35rem}
.form-card{padding:1.25rem}
.toolbar{flex-direction:column;align-items:stretch}
.toolbar form{width:100%}
.toolbar select{flex:1}
.wa-float{right:16px;bottom:16px;width:50px;height:50px}
.back-to-top{right:20px;bottom:78px;width:38px;height:38px}
}
@media print{
.topbar,.site-header,.site-footer,.cta-band,.wa-float,.back-to-top,.sidebar,.toolbar,.pagination,.product-actions,.detail-aside{display:none!important}
body{color:#000;background:#fff;font-size:11pt}
.detail-layout,.layout-sidebar{display:block}
a[href]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}
/* ---------- 18. HALAMAN DETAIL PRODUK, ARTIKEL, RFQ, PENCARIAN, ERROR ---------- */
/* --- utilitas tambahan --- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container-narrow{max-width:820px;margin:0 auto}
.page-hero-sm{padding:34px 0 30px}
.page-hero-sm h1{font-size:clamp(1.5rem,3vw,2.05rem)}
.page-hero-sm p{font-size:.96rem;margin-top:.3rem}
.lead{font-size:1.1rem;color:var(--text-soft);margin-bottom:1.5rem}
.link-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.link-list li{margin:0}
.link-list a{display:inline-flex;align-items:center;gap:.45rem;font-size:.94rem;color:var(--teal-600)}
.link-list a:hover{color:var(--navy)}
.link-list svg{fill:currentColor;flex:0 0 auto}
.last-updated{font-size:.82rem;color:var(--muted);margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border)}
.static-cta{margin-top:2.75rem;padding:2rem;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center}
.static-cta h2{font-size:1.35rem;margin-bottom:.4rem}
.static-cta p{color:var(--muted);margin:0}
.alert{display:flex;align-items:flex-start;gap:.55rem}
.alert svg{fill:currentColor;flex:0 0 auto;margin-top:.15rem}
p.error{color:var(--danger);font-size:.86rem;font-weight:500;margin:.4rem 0 0}
/* --- variasi jumlah kolom grid --- */
.product-grid.product-grid-3{grid-template-columns:repeat(3,1fr)}
.product-grid.product-grid-4{grid-template-columns:repeat(4,1fr);gap:1rem}
.article-grid.article-grid-3{grid-template-columns:repeat(3,1fr)}
.cert-grid.cert-grid-lg{gap:1.75rem}
/* --- galeri produk --- */
.product-gallery{margin-bottom:2rem}
.product-gallery-main{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.product-gallery-main img{width:100%;height:100%;object-fit:contain;background:#fff}
.product-gallery-thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.thumb-btn{width:84px;height:64px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s}
.thumb-btn:hover,.thumb-btn:focus-visible{border-color:var(--teal);transform:translateY(-1px);outline:none}
.thumb-btn img{width:100%;height:100%;object-fit:cover}
/* --- kotak harga --- */
.price-eyebrow{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:.2rem}
.price-value{font-size:1.6rem;font-weight:800;color:var(--navy);line-height:1.2}
.price-value-req{font-size:1.12rem;color:var(--teal-600)}
.price-unit{font-size:.79rem;color:var(--muted);margin:.2rem 0 1rem}
.mini-list{list-style:none;margin:0 0 1rem;padding:.9rem 0 0;border-top:1px solid var(--border);display:grid;gap:.45rem}
.mini-list li{display:flex;justify-content:space-between;gap:.75rem;font-size:.86rem;margin:0;color:var(--text-soft)}
.mini-list li span{color:var(--muted)}
.mini-list li strong{color:var(--navy);font-weight:600;text-align:right}
.stock-ready{color:var(--ok)}
.stock-preorder,.stock-indent{color:var(--warn)}
.stock-habis{color:var(--danger)}
/* --- tag & chip merek --- */
.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:1.5rem 0 0;padding:0;list-style:none}
.tag-label{font-size:.8rem;color:var(--muted);font-weight:600;margin-right:.2rem}
.tag-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--bg-mute);color:var(--text-soft);border:1px solid transparent;border-radius:99px;padding:.22rem .7rem;font-size:.8rem;text-decoration:none!important;transition:.15s}
.tag-chip:hover{background:var(--teal-50);color:var(--teal-600);border-color:#B3E4E4}
.tag-chip.active{background:var(--teal);color:#fff}
.tag-chip .cnt{color:var(--muted);font-size:.74rem}
.brand-chips{display:flex;flex-wrap:wrap;gap:.4rem}
/* --- artikel --- */
.article-detail .article-meta{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.84rem;color:#A9C0D5}
.article-detail .article-meta span{display:inline-flex;align-items:center;gap:.35rem}
.article-detail .article-meta svg{fill:currentColor;opacity:.8}
.article-hero-media{margin:0 0 1.75rem;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-soft)}
.article-hero-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.article-body{font-size:1.05rem}
.article-body h2{scroll-margin-top:calc(var(--header-h) + 20px)}
.article-body blockquote{background:var(--bg-soft);border-left:4px solid var(--teal);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1rem 1.25rem;margin:1.5rem 0;font-style:normal}
.article-body table{font-size:.9rem}
.article-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.86rem;color:var(--muted)}
.article-share .icon-btn{width:38px;height:38px}
/* --- Tentang Kami: visi misi, layanan, info --- */
.vm-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:1.5rem}
.vm-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}
.vm-card h3{margin-bottom:.6rem}
.vm-card p{color:var(--text-soft);margin:0;font-size:1.02rem;line-height:1.75}
.vm-icon{width:52px;height:52px;border-radius:14px;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.vm-icon svg{fill:currentColor}
.mission-list{margin:0;padding-left:1.2rem;color:var(--text-soft);display:grid;gap:.5rem}
.mission-list li{margin:0;font-size:.97rem}
.two-col-services{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.svc-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}
.svc-block h3{display:flex;align-items:center;gap:.55rem;font-size:1.12rem;margin-bottom:.7rem}
.svc-block h3 svg{fill:var(--teal)}
.svc-block p{font-size:.93rem;color:var(--muted)}
.svc-block .check-list{margin-top:.5rem}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.info-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem}
.info-block h3{display:flex;align-items:center;gap:.5rem;font-size:1rem;margin-bottom:.6rem}
.info-block h3 svg{fill:var(--teal)}
.info-block p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.75}
/* --- Sertifikasi --- */
.cert-media{width:100%;height:auto;max-height:200px;object-fit:contain;background:#fff;padding:.5rem}
.cert-head img{display:block;margin:0 auto}
.cert-card .cert-seal svg{fill:currentColor;width:28px;height:28px}
.prose-sm{font-size:.88rem;line-height:1.7}
.prose-sm p:last-child{margin-bottom:0}
.std-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.std-table-wrap .spec-table{margin:0}
.std-table-wrap thead th{background:var(--navy);color:#fff;border-color:var(--navy-700)}
.trace-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.trace-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem}
.trace-card h3{font-size:.99rem;margin:.7rem 0 .4rem}
.trace-card p{font-size:.86rem;color:var(--muted);margin:0}
.trace-card .value-icon{width:44px;height:44px;border-radius:12px;background:var(--navy-100);color:var(--navy-600);display:flex;align-items:center;justify-content:center}
.trace-card .value-icon svg{fill:currentColor}
/* --- Form: field penuh, bantuan, validasi --- */
.field-full,.form-grid .field-full{grid-column:1/-1}
.field label .opt{color:var(--muted);font-weight:400;font-size:.8rem}
.field .help{font-size:.78rem;color:var(--muted)}
.field.invalid input,.field.invalid select,.field.invalid textarea,input.invalid-input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.field.invalid label{color:var(--danger)}
.form-intro{color:var(--muted);font-size:.93rem;margin:-.4rem 0 1.5rem}
.form-grid.form-grid-3{grid-template-columns:repeat(3,1fr)}
.field-span-2{grid-column:span 2}
.field-align-end{justify-content:flex-end}
/* --- Kontak --- */
.contact-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:2rem;align-items:start}
.contact-aside{display:grid;gap:1.25rem;position:sticky;top:calc(var(--header-h) + 20px)}
.info-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}
.info-card h2{font-size:1.12rem;margin-bottom:1rem}
.info-card p{font-size:.9rem;color:var(--muted)}
.info-card .info-table{margin:0}
.info-card .info-table th{width:44px;padding-right:.6rem}
.info-card .info-table th svg{fill:var(--teal)}
.quick-links{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.quick-links li{margin:0}
.quick-links a{display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;border-radius:var(--radius-sm);font-size:.89rem;color:var(--text-soft);text-decoration:none!important}
.quick-links a:hover{background:var(--bg-soft);color:var(--navy)}
.quick-links svg{fill:var(--teal);flex:0 0 auto}
.nl-note{font-size:.84rem;margin:.6rem 0 0;min-height:1.2em}
.nl-note.ok{color:var(--ok)}
.nl-note.err{color:var(--danger)}
/* --- RFQ / permintaan penawaran --- */
.rfq-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:2rem;align-items:start}
.rfq-main{display:grid;gap:1.5rem;min-width:0}
.rfq-aside{display:grid;gap:1.25rem;align-content:start}
.aside-sticky{position:sticky;top:calc(var(--header-h) + 20px)}
.form-card h2{display:flex;align-items:center;gap:.55rem;font-size:1.28rem;margin-bottom:.4rem}
.form-card h2 svg{fill:var(--teal)}
.summary-count{font-size:.95rem;color:var(--muted);margin:0 0 1rem}
.summary-count .big{font-size:1.9rem;font-weight:800;color:var(--navy);line-height:1;margin-right:.25rem}
.check-list-sm{gap:.45rem}
.check-list-sm li{font-size:.87rem}
.mini-contact{list-style:none;padding:0;margin:.4rem 0 1rem;display:grid;gap:.5rem}
.mini-contact li{display:flex;align-items:center;gap:.5rem;font-size:.87rem;margin:0}
.mini-contact svg{fill:var(--teal);flex:0 0 auto}
.mini-steps{margin:0 0 .9rem;padding-left:1.15rem;display:grid;gap:.45rem}
.mini-steps li{font-size:.87rem;color:var(--text-soft);margin:0}
.quote-wrap{margin-top:.5rem}
.quote-table{width:100%;margin:0;font-size:.92rem}
.quote-table thead th{background:var(--navy-100);color:var(--navy);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.quote-table tfoot th,.quote-table tfoot td{background:var(--bg-soft);font-size:.88rem}
.quote-name{display:block;color:var(--navy);font-weight:600}
.quote-meta{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem}
.quote-note{margin-top:.45rem}
.quote-note input{width:100%;padding:.35rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:400 .82rem var(--font);background:#fff;color:var(--text)}
.quote-note input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,165,168,.13)}
.qty-input{width:82px;padding:.4rem .5rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:400 .9rem var(--font);text-align:center;background:#fff;color:var(--text)}
.qty-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,165,168,.15)}
.btn-remove{background:none;border:0;color:var(--danger);cursor:pointer;font-size:1.35rem;line-height:1;padding:.1rem .45rem;border-radius:var(--radius-sm);transition:background .15s}
.btn-remove:hover{background:#FDECEA}
.manual-item{margin-top:1.5rem;padding-top:1.25rem;border-top:1px dashed var(--border-strong)}
.manual-item h3{font-size:.95rem;margin-bottom:.8rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em}
.rfq-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.empty-state-sm{padding:32px 20px}
.empty-state-sm h3{font-size:1.05rem}
.empty-state-sm p{font-size:.9rem;margin-bottom:.9rem}
/* --- Pencarian --- */
.search-hero-form{display:flex;gap:.6rem;margin-top:1.4rem;max-width:640px}
.search-hero-form input[type=search]{flex:1;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);font:400 1rem var(--font);background:rgba(255,255,255,.12);color:#fff}
.search-hero-form input::placeholder{color:#A9C0D5}
.search-hero-form input:focus{outline:none;background:#fff;color:var(--text);border-color:#fff}
.search-block{margin-bottom:2.75rem}
.search-block h2{display:flex;align-items:center;gap:.5rem;font-size:1.3rem;margin-bottom:1.1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.search-block h2 svg{fill:var(--teal)}
.search-block h2 .cnt{font-size:.85rem;color:var(--muted);font-weight:500}
/* --- Daftar artikel / popularitas --- */
.rank-list{list-style:none;counter-reset:rank;margin:0;padding:0;display:grid;gap:.55rem}
.rank-list li{display:flex;gap:.6rem;align-items:flex-start;margin:0}
.rank-list .rank{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--navy-100);color:var(--navy-600);font-size:.74rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.rank-list a{font-size:.86rem;line-height:1.45;color:var(--text-soft)}
.rank-list a:hover{color:var(--teal-600)}
/* --- Header: tombol daftar penawaran dengan badge --- */
.quote-cta{display:inline-flex;align-items:center;gap:.45rem;position:relative}
.quote-cta-icon{display:inline-flex}
.quote-cta-icon svg{fill:currentColor}
.quote-cta .badge-count{position:absolute;top:-6px;right:-6px;box-shadow:0 0 0 2px #fff}
/* --- 404 --- */
.error-wrap{padding:72px 0 64px;text-align:center;background:var(--bg-soft)}
.error-wrap h1{margin-bottom:.6rem}
.error-msg{color:var(--muted);max-width:60ch;margin:0 auto 2rem}
.error-search{display:flex;gap:.6rem;max-width:520px;margin:0 auto 1.75rem}
.error-search input[type=search]{flex:1;padding:.75rem 1rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:400 .95rem var(--font);background:#fff;color:var(--text)}
.error-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,165,168,.15)}
.error-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.error-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left}
.error-link-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.error-link-block h2{font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;color:var(--teal-600);margin-bottom:.7rem}
.error-link-block ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.error-link-block li{margin:0}
.error-link-block a{font-size:.87rem;color:var(--text-soft)}
.error-link-block a:hover{color:var(--teal-600)}
/* --- Responsif bagian 18 --- */
@media (max-width:1100px){
.product-grid.product-grid-4{grid-template-columns:repeat(3,1fr)}
.trace-grid{grid-template-columns:repeat(2,1fr)}
.info-grid{grid-template-columns:1fr}
.vm-grid,.two-col-services{grid-template-columns:1fr}
.contact-layout,.rfq-layout{grid-template-columns:1fr}
.contact-aside,.aside-sticky{position:static}
}
@media (max-width:900px){
.product-grid.product-grid-4,.product-grid.product-grid-3,.article-grid.article-grid-3{grid-template-columns:repeat(2,1fr)}
.error-links{grid-template-columns:1fr}
.form-grid.form-grid-3{grid-template-columns:1fr 1fr}
.field-span-2{grid-column:1/-1}
.quote-cta-label{display:none}
.quote-cta{padding:.55rem}
}
@media (max-width:640px){
.product-grid.product-grid-4,.product-grid.product-grid-3,.article-grid.article-grid-3{grid-template-columns:1fr}
.trace-grid{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.form-grid.form-grid-3{grid-template-columns:1fr}
.search-hero-form,.error-search{flex-direction:column}
.quote-note input{font-size:16px}
.qty-input{width:100%}
.quote-table thead th:nth-child(3),.quote-table td:nth-child(3){display:none}
}
/* ==========================================================================
RESPONSIVE DESIGN - Comprehensive mobile & tablet optimization
========================================================================== */
/* ---------- Tablet & Small Desktop (max-width: 1024px) ---------- */
@media (max-width:1024px){
.hero-inner{grid-template-columns:1fr;gap:40px;padding:60px 0;text-align:center}
.hero-visual{order:2}
.hero h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.hero .lead{font-size:1rem;max-width:100%}
.hero-actions{justify-content:center}
.hero-trust{justify-content:center}
.value-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
.service-grid{grid-template-columns:repeat(2,1fr);gap:1.3rem}
.product-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
.article-grid{grid-template-columns:repeat(2,1fr);gap:1.3rem}
.testi-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
.cat-grid{grid-template-columns:repeat(3,1fr);gap:1.1rem}
.process-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
.stats-strip{grid-template-columns:repeat(2,1fr);gap:1.8rem}
.split{grid-template-columns:1fr;gap:40px}
.split-media{order:1}
.section{padding:56px 0}
.container{padding:0 24px}
}
/* ---------- Tablet Portrait (max-width: 900px) ---------- */
@media (max-width:900px){
.hero-inner{padding:52px 0;gap:36px}
.hero h1{font-size:clamp(1.8rem,3.8vw,2.5rem);line-height:1.2}
.hero .lead{font-size:.98rem}
.hero-actions .btn{padding:.75rem 1.4rem;font-size:.9rem}
.hero-trust{gap:1.6rem}
.hero-trust strong{font-size:1.6rem}
.hero-trust span{font-size:.78rem}
.hero-card{padding:1.3rem}
.hero-card h2{font-size:1rem}
.hero-scope li{font-size:.88rem}
.value-grid{grid-template-columns:1fr 1fr;gap:1.1rem}
.value-item{padding:1.1rem;gap:.9rem}
.value-item .vi{width:44px;height:44px}
.value-item h3{font-size:1rem}
.value-item p{font-size:.86rem}
.service-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
.service-card .card-body{padding:1.3rem 1.4rem 1.5rem}
.service-ico{width:52px;height:52px}
.service-ico svg{width:26px;height:26px}
.service-card h3{font-size:1.05rem}
.service-card p{font-size:.9rem}
.product-grid{grid-template-columns:1fr 1fr;gap:1.1rem}
.product-card .thumb{aspect-ratio:1/1}
.product-card h3{font-size:.98rem}
.price{font-size:1.1rem}
.article-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
.article-card .thumb{aspect-ratio:16/10}
.article-card h3{font-size:1.05rem}
.testi-grid{grid-template-columns:1fr;gap:1.1rem}
.testi-card{padding:1.4rem}
.testi-card blockquote{font-size:.93rem}
.cat-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
.cat-card{padding:1.2rem}
.cat-card .cat-ico{width:42px;height:42px}
.cat-card h3{font-size:.98rem}
.process-grid{grid-template-columns:1fr 1fr;gap:1.1rem}
.process-step{padding:1.5rem 1.3rem 1.3rem}
.process-step h3{font-size:1.02rem}
.process-step p{font-size:.88rem}
.stats-strip{grid-template-columns:repeat(2,1fr);gap:1.6rem}
.stats-strip strong{font-size:2.3rem}
.stats-strip span{font-size:.85rem}
.section{padding:52px 0}
.section-head{margin-bottom:36px}
.section-head h2{font-size:clamp(1.5rem,3vw,2rem)}
.section-head p{font-size:1rem}
.card-body{padding:1.3rem 1.4rem 1.5rem}
.btn{padding:.7rem 1.3rem;font-size:.9rem}
.btn-lg{padding:.8rem 1.6rem;font-size:.95rem}
.check-list li{font-size:.95rem}
.check-list li::before{width:20px;height:20px}
.brand-chip{padding:.5rem 1rem;font-size:.85rem}
}
/* ---------- Mobile Landscape & Small Tablet (max-width: 768px) ---------- */
@media (max-width:768px){
.hero{padding:0}
.hero-inner{padding:48px 0;gap:32px}
.hero h1{font-size:clamp(1.7rem,5vw,2.3rem);margin-bottom:.9rem}
.hero .lead{font-size:.95rem;margin-bottom:1.6rem}
.hero-actions{flex-direction:column;gap:.7rem;margin-bottom:1.8rem}
.hero-actions .btn{width:100%;padding:.8rem 1.4rem}
.hero-trust{flex-direction:column;gap:1.2rem;align-items:center;padding-top:1.4rem}
.hero-trust div{text-align:center;min-width:100px}
.hero-trust strong{font-size:1.5rem}
.hero-card{padding:1.2rem}
.hero-card h2{font-size:.98rem;margin-bottom:.9rem}
.hero-scope{gap:.6rem}
.hero-scope li{font-size:.86rem;gap:.6rem}
.hero-scope li::before{width:18px;height:18px}
.hero-badges{gap:.5rem;margin-top:1.1rem;padding-top:1rem}
.hero-badges span{font-size:.72rem;padding:.3rem .6rem}
.value-grid{grid-template-columns:1fr;gap:1rem}
.value-item{padding:1rem;gap:.85rem}
.value-item .vi{width:42px;height:42px}
.value-item .vi svg{width:22px;height:22px}
.value-item h3{font-size:.98rem}
.value-item p{font-size:.85rem}
.service-grid{grid-template-columns:1fr;gap:1rem}
.service-card .card-body{padding:1.2rem 1.3rem 1.4rem;gap:.6rem}
.service-ico{width:50px;height:50px;margin-bottom:.35rem}
.service-ico svg{width:25px;height:25px}
.service-card h3{font-size:1.02rem}
.service-card p{font-size:.88rem;margin-bottom:.8rem}
.card-link{font-size:.86rem}
.product-grid{grid-template-columns:1fr;gap:1rem}
.product-card .thumb{aspect-ratio:4/3}
.product-card .card-body{padding:1.1rem 1.2rem 1.3rem}
.product-card h3{font-size:.96rem;margin-bottom:.35rem}
.product-meta{font-size:.78rem;gap:.75rem;margin-bottom:.6rem}
.price{font-size:1.08rem}
.price small{font-size:.73rem}
.product-actions .btn{padding:.55rem .65rem;font-size:.83rem}
.article-grid{grid-template-columns:1fr;gap:1rem}
.article-card .thumb{aspect-ratio:16/9}
.article-card .card-body{padding:1.1rem 1.2rem 1.3rem}
.article-card h3{font-size:1.02rem;margin-bottom:.45rem}
.article-card p{font-size:.86rem}
.article-meta{font-size:.76rem;gap:.8rem;margin-bottom:.5rem}
.testi-grid{grid-template-columns:1fr;gap:1rem}
.testi-card{padding:1.3rem;gap:.8rem}
.testi-stars{font-size:.9rem}
.testi-card blockquote{font-size:.92rem;line-height:1.6}
.testi-avatar{width:42px;height:42px;font-size:.9rem}
.testi-author strong{font-size:.92rem}
.testi-author span{font-size:.78rem}
.cat-grid{grid-template-columns:repeat(2,1fr);gap:.9rem}
.cat-card{padding:1.1rem}
.cat-card .cat-ico{width:40px;height:40px;margin-bottom:.75rem}
.cat-card .cat-ico svg{width:21px;height:21px}
.cat-card h3{font-size:.96rem;margin-bottom:.2rem}
.cat-card p{font-size:.8rem}
.process-grid{grid-template-columns:1fr;gap:1rem}
.process-step{padding:1.4rem 1.2rem 1.2rem}
.process-step h3{font-size:1rem;margin:.5rem 0 .35rem}
.process-step p{font-size:.87rem}
.stats-strip{grid-template-columns:repeat(2,1fr);gap:1.4rem}
.stats-strip strong{font-size:2.1rem}
.stats-strip span{font-size:.83rem}
.split{gap:32px}
.split-media .overlay-note{left:1rem;bottom:1rem;padding:.7rem .9rem;font-size:.82rem}
.check-list{gap:.6rem;margin-bottom:1.2rem}
.check-list li{font-size:.93rem;gap:.65rem}
.check-list li::before{width:19px;height:19px;margin-top:.16rem}
.brand-strip{gap:.55rem}
.brand-chip{padding:.48rem .95rem;font-size:.83rem}
.section{padding:48px 0}
.section-sm{padding:36px 0}
.section-head{margin-bottom:32px}
.section-head h2{font-size:clamp(1.4rem,4vw,1.9rem)}
.section-head p{font-size:.95rem}
.section-head .eyebrow{font-size:.72rem;padding:.28rem .65rem}
.card-body{padding:1.2rem 1.3rem 1.4rem}
.btn{padding:.68rem 1.25rem;font-size:.88rem}
.btn-lg{padding:.78rem 1.5rem;font-size:.92rem}
.btn-sm{padding:.42rem .85rem;font-size:.82rem}
.page-hero{padding:40px 0 36px}
.page-hero h1{font-size:clamp(1.6rem,4.5vw,2.2rem)}
.page-hero p{font-size:.93rem}
.breadcrumbs{font-size:.8rem;margin-bottom:.9rem}
}
/* ---------- Mobile Portrait (max-width: 640px) ---------- */
@media (max-width:640px){
.hero-inner{padding:40px 0;gap:28px}
.hero h1{font-size:clamp(1.6rem,6vw,2rem);line-height:1.22;margin-bottom:.8rem}
.hero .lead{font-size:.92rem;line-height:1.65;margin-bottom:1.5rem}
.hero-actions{gap:.6rem;margin-bottom:1.6rem}
.hero-actions .btn{padding:.75rem 1.3rem;font-size:.88rem}
.hero-trust{gap:1rem;padding-top:1.2rem}
.hero-trust strong{font-size:1.4rem}
.hero-trust span{font-size:.76rem}
.hero-card{padding:1.1rem}
.hero-card h2{font-size:.95rem;margin-bottom:.85rem}
.hero-scope li{font-size:.84rem}
.hero-badges span{font-size:.7rem;padding:.28rem .55rem}
.value-item{padding:.95rem;gap:.8rem}
.value-item .vi{width:40px;height:40px}
.value-item .vi svg{width:21px;height:21px}
.value-item h3{font-size:.96rem}
.value-item p{font-size:.84rem}
.service-card .card-body{padding:1.1rem 1.2rem 1.3rem}
.service-ico{width:48px;height:48px}
.service-ico svg{width:24px;height:24px}
.service-card h3{font-size:1rem}
.service-card p{font-size:.87rem}
.product-card .card-body{padding:1rem 1.1rem 1.2rem}
.product-card h3{font-size:.94rem}
.price{font-size:1.05rem}
.product-actions{gap:.4rem}
.product-actions .btn{padding:.5rem .6rem;font-size:.82rem}
.article-card .card-body{padding:1rem 1.1rem 1.2rem}
.article-card h3{font-size:1rem}
.article-card p{font-size:.85rem}
.testi-card{padding:1.2rem}
.testi-card blockquote{font-size:.9rem}
.testi-avatar{width:40px;height:40px;font-size:.88rem}
.cat-grid{grid-template-columns:1fr 1fr;gap:.8rem}
.cat-card{padding:1rem}
.cat-card .cat-ico{width:38px;height:38px;margin-bottom:.7rem}
.cat-card .cat-ico svg{width:20px;height:20px}
.cat-card h3{font-size:.94rem}
.cat-card p{font-size:.78rem}
.process-step{padding:1.3rem 1.1rem 1.1rem}
.process-step::before{font-size:.78rem;padding:.28rem .6rem}
.process-step h3{font-size:.98rem}
.process-step p{font-size:.85rem}
.stats-strip{grid-template-columns:1fr 1fr;gap:1.2rem}
.stats-strip strong{font-size:2rem}
.stats-strip span{font-size:.8rem}
.split{gap:28px}
.split-media .overlay-note{font-size:.8rem;padding:.65rem .85rem}
.check-list li{font-size:.91rem}
.check-list li::before{width:18px;height:18px}
.brand-chip{padding:.45rem .9rem;font-size:.82rem}
.section{padding:44px 0}
.section-sm{padding:32px 0}
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(1.3rem,5vw,1.8rem)}
.section-head p{font-size:.92rem}
.card-body{padding:1.1rem 1.2rem 1.3rem}
.btn{padding:.65rem 1.2rem;font-size:.87rem}
.btn-lg{padding:.75rem 1.4rem;font-size:.9rem}
.page-hero{padding:36px 0 32px}
.page-hero h1{font-size:clamp(1.5rem,5vw,2rem)}
.page-hero p{font-size:.9rem}
.container{padding:0 20px}
}
/* ---------- Small Mobile (max-width: 480px) ---------- */
@media (max-width:480px){
.hero-inner{padding:36px 0;gap:24px}
.hero h1{font-size:clamp(1.5rem,6.5vw,1.8rem);line-height:1.25;margin-bottom:.75rem}
.hero .lead{font-size:.9rem;line-height:1.6;margin-bottom:1.4rem}
.hero-actions .btn{padding:.72rem 1.2rem;font-size:.86rem}
.hero-trust{gap:.9rem}
.hero-trust strong{font-size:1.3rem}
.hero-trust span{font-size:.74rem}
.hero-card{padding:1rem}
.hero-card h2{font-size:.92rem}
.hero-scope li{font-size:.82rem}
.hero-badges span{font-size:.68rem;padding:.26rem .5rem}
.value-item{padding:.9rem;gap:.75rem}
.value-item .vi{width:38px;height:38px}
.value-item .vi svg{width:20px;height:20px}
.value-item h3{font-size:.94rem}
.value-item p{font-size:.82rem}
.service-card .card-body{padding:1rem 1.1rem 1.2rem}
.service-ico{width:46px;height:46px}
.service-ico svg{width:23px;height:23px}
.service-card h3{font-size:.98rem}
.service-card p{font-size:.85rem}
.product-card .card-body{padding:.95rem 1rem 1.15rem}
.product-card h3{font-size:.92rem}
.price{font-size:1.02rem}
.product-actions .btn{padding:.48rem .55rem;font-size:.8rem}
.article-card .card-body{padding:.95rem 1rem 1.15rem}
.article-card h3{font-size:.98rem}
.article-card p{font-size:.83rem}
.testi-card{padding:1.1rem}
.testi-card blockquote{font-size:.88rem}
.testi-avatar{width:38px;height:38px;font-size:.85rem}
.testi-author strong{font-size:.9rem}
.testi-author span{font-size:.76rem}
.cat-grid{grid-template-columns:1fr;gap:.75rem}
.cat-card{padding:.95rem}
.cat-card .cat-ico{width:36px;height:36px}
.cat-card .cat-ico svg{width:19px;height:19px}
.cat-card h3{font-size:.92rem}
.process-step{padding:1.2rem 1rem 1rem}
.process-step h3{font-size:.96rem}
.process-step p{font-size:.83rem}
.stats-strip{grid-template-columns:1fr;gap:1.1rem}
.stats-strip strong{font-size:1.9rem}
.stats-strip span{font-size:.78rem}
.split{gap:24px}
.check-list li{font-size:.89rem}
.brand-strip{gap:.5rem}
.brand-chip{padding:.42rem .85rem;font-size:.8rem}
.section{padding:40px 0}
.section-sm{padding:28px 0}
.section-head{margin-bottom:26px}
.section-head h2{font-size:clamp(1.25rem,5.5vw,1.7rem)}
.section-head p{font-size:.9rem}
.card-body{padding:1rem 1.1rem 1.2rem}
.btn{padding:.62rem 1.15rem;font-size:.86rem}
.btn-lg{padding:.72rem 1.35rem;font-size:.88rem}
.page-hero{padding:32px 0 28px}
.page-hero h1{font-size:clamp(1.4rem,5.5vw,1.9rem)}
.page-hero p{font-size:.88rem}
.container{padding:0 18px}
}
/* ---------- Extra Small Mobile (max-width: 360px) ---------- */
@media (max-width:360px){
.hero h1{font-size:1.45rem}
.hero .lead{font-size:.88rem}
.hero-actions .btn{padding:.68rem 1.1rem;font-size:.84rem}
.hero-trust strong{font-size:1.25rem}
.section{padding:36px 0}
.section-head h2{font-size:1.2rem}
.section-head p{font-size:.88rem}
.btn{padding:.6rem 1.1rem;font-size:.84rem}
.btn-lg{padding:.68rem 1.3rem;font-size:.86rem}
.container{padding:0 16px}
}
/* ---------- Responsive Utilities ---------- */
/* Ensure images are fully responsive */
img{max-width:100%;height:auto;display:block}
/* Responsive text sizing */
h1{font-size:clamp(1.8rem,4vw,2.6rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:clamp(1.1rem,2.5vw,1.3rem)}
h4{font-size:clamp(1rem,2vw,1.15rem)}
/* Responsive spacing */
@media (max-width:768px){
.section{padding:48px 0}
.section-sm{padding:36px 0}
.container{padding:0 20px}
}
/* Touch-friendly minimum sizes */
@media (hover:none) and (pointer:coarse){
.btn{min-height:44px;min-width:44px}
.icon-btn{min-height:44px;min-width:44px}
.nav-toggle{min-height:44px;min-width:44px}
a{min-height:32px}
}
/* Prevent horizontal scroll */
html,body{overflow-x:hidden;max-width:100%}
/* Responsive grid helpers */
.grid-responsive{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* Hide/show based on screen size */
.hide-mobile{display:block}
.hide-tablet{display:block}
.hide-desktop{display:none}
@media (max-width:768px){
.hide-mobile{display:none!important}
.show-mobile{display:block!important}
}
@media (min-width:769px) and (max-width:1024px){
.hide-tablet{display:none!important}
.show-tablet{display:block!important}
}
@media (min-width:1025px){
.hide-desktop{display:none!important}
.show-desktop{display:block!important}
}
/* ==========================================================================
ANIMASI MODERN - Enhancements untuk UX yang lebih menarik
========================================================================== */
/* ---------- Scroll Reveal Animations ---------- */
.reveal{
opacity:0;
transform:translateY(30px);
transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible{
opacity:1;
transform:translateY(0);
}
.reveal-left{
opacity:0;
transform:translateX(-50px);
transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.visible{
opacity:1;
transform:translateX(0);
}
.reveal-right{
opacity:0;
transform:translateX(50px);
transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.visible{
opacity:1;
transform:translateX(0);
}
.reveal-scale{
opacity:0;
transform:scale(0.9);
transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal-scale.visible{
opacity:1;
transform:scale(1);
}
/* Stagger delay untuk animasi berurutan */
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}
.reveal-delay-5{transition-delay:0.5s}
/* ---------- Card Hover Effects ---------- */
.card-hover{
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}
.card-hover:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(11,42,74,0.15);
}
/* Product card hover effect */
.product-card{
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 16px 32px rgba(0,165,168,0.2);
}
.product-card img{
transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover img{
transform:scale(1.08);
}
/* Article card hover */
.article-card{
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}
.article-card:hover{
transform:translateY(-5px);
box-shadow:0 12px 28px rgba(11,42,74,0.12);
}
/* ---------- Button Ripple Effect ---------- */
.btn{
position:relative;
overflow:hidden;
}
.btn::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:0;
height:0;
border-radius:50%;
background:rgba(255,255,255,0.3);
transform:translate(-50%,-50%);
transition:width 0.6s,height 0.6s;
}
.btn:active::after{
width:300px;
height:300px;
}
/* ---------- Smooth Link Underline Animation ---------- */
.nav-list>li>a{
position:relative;
}
.nav-list>li>a::after{
content:'';
position:absolute;
bottom:0;
left:50%;
width:0;
height:3px;
background:var(--teal);
transform:translateX(-50%);
transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-list>li>a:hover::after,
.nav-list>li.active>a::after{
width:100%;
}
/* ---------- Animated Counter ---------- */
.counter{
display:inline-block;
transition:transform 0.3s ease;
}
.counter.animated{
animation:counterPulse 0.6s ease;
}
@keyframes counterPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.1)}
}
/* ---------- Floating Animation ---------- */
.float-animation{
animation:float 6s ease-in-out infinite;
}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-20px)}
}
/* ---------- Pulse Animation ---------- */
.pulse{
animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.8;transform:scale(1.05)}
}
/* ---------- Gradient Animation ---------- */
.gradient-animate{
background-size:200% auto;
animation:gradientShift 3s ease infinite;
}
@keyframes gradientShift{
0%,100%{background-position:0% center}
50%{background-position:100% center}
}
/* ---------- Shimmer Loading ---------- */
.shimmer{
background:linear-gradient(90deg,var(--bg-soft) 0%,var(--bg-mute) 50%,var(--bg-soft) 100%);
background-size:200% 100%;
animation:shimmer 1.5s infinite;
}
@keyframes shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* ---------- Icon Rotation on Hover ---------- */
.icon-rotate{
transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.icon-rotate:hover{
transform:rotate(360deg) scale(1.1);
}
/* ---------- Parallax Container ---------- */
.parallax-container{
overflow:hidden;
position:relative;
}
.parallax-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:120%;
background-size:cover;
background-position:center;
will-change:transform;
}
/* ---------- Smooth Page Transitions ---------- */
main{
animation:fadeInPage 0.5s cubic-bezier(0.4,0,0.2,1);
}
@keyframes fadeInPage{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
/* ---------- Hero Section Animations ---------- */
.hero h1{
animation:heroTitleIn 1s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}
@keyframes heroTitleIn{
from{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:translateY(0)}
}
.hero p{
animation:heroSubtitleIn 1s cubic-bezier(0.4,0,0.2,1) 0.4s both;
}
@keyframes heroSubtitleIn{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}
.hero .btn{
animation:heroButtonIn 1s cubic-bezier(0.4,0,0.2,1) 0.6s both;
}
@keyframes heroButtonIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
/* ---------- Image Zoom on Hover ---------- */
.img-zoom{
overflow:hidden;
border-radius:var(--radius);
}
.img-zoom img{
transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.img-zoom:hover img{
transform:scale(1.1);
}
/* ---------- Badge Bounce ---------- */
.badge-count{
animation:badgeBounce 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
@keyframes badgeBounce{
0%{transform:scale(0)}
50%{transform:scale(1.3)}
100%{transform:scale(1)}
}
/* ---------- Smooth Scroll Indicator ---------- */
.scroll-indicator{
animation:scrollBounce 2s infinite;
}
@keyframes scrollBounce{
0%,100%{transform:translateY(0);opacity:1}
50%{transform:translateY(10px);opacity:0.5}
}
/* ---------- Glowing Effect ---------- */
.glow{
box-shadow:0 0 20px rgba(0,165,168,0.4);
animation:glow 2s ease-in-out infinite;
}
@keyframes glow{
0%,100%{box-shadow:0 0 20px rgba(0,165,168,0.4)}
50%{box-shadow:0 0 30px rgba(0,165,168,0.6),0 0 40px rgba(0,165,168,0.3)}
}
/* ---------- Typing Animation ---------- */
.typing{
overflow:hidden;
border-right:2px solid var(--teal);
white-space:nowrap;
animation:typing 3.5s steps(40,end),blink-caret 0.75s step-end infinite;
}
@keyframes typing{
from{width:0}
to{width:100%}
}
@keyframes blink-caret{
from,to{border-color:transparent}
50%{border-color:var(--teal)}
}
/* ---------- Rotate Infinity ---------- */
.rotate-infinity{
animation:rotateInfinity 8s linear infinite;
}
@keyframes rotateInfinity{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
/* ---------- Slide In from Bottom ---------- */
.slide-in-bottom{
animation:slideInBottom 0.8s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideInBottom{
from{opacity:0;transform:translateY(50px)}
to{opacity:1;transform:translateY(0)}
}
/* ---------- Fade In Scale ---------- */
.fade-in-scale{
animation:fadeInScale 0.6s cubic-bezier(0.4,0,0.2,1);
}
@keyframes fadeInScale{
from{opacity:0;transform:scale(0.9)}
to{opacity:1;transform:scale(1)}
}
/* ---------- Reduce Motion untuk Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:0.01ms!important;
animation-iteration-count:1!important;
transition-duration:0.01ms!important;
}
.reveal,.reveal-left,.reveal-right,.reveal-scale{
opacity:1;
transform:none;
}
}