*{box-sizing:border-box}:root{--primary:#020071;--primary-light:#2f3a5a;--primary-2:#2563eb;--primary-gradient:linear-gradient(135deg, #020071 0%, #2563eb 100%);--bg-main:#f6f8fb;--bg-white:#fff;--bg-soft:#eef2fb;--text-main:#14162b;--text-secondary:#5b6172;--text-muted:#8890a4;--accent:#4f46e5;--radius-sm:10px;--radius-md:18px;--radius-lg:26px;--shadow-sm:0 4px 14px #0f172a0f;--shadow-md:0 14px 34px #0f172a1a;--shadow-lg:0 24px 60px #0f172a29;--ease:cubic-bezier(.22, 1, .36, 1);--t-fast:.2s var(--ease);--t-med:.4s var(--ease);--t-slow:.7s var(--ease);--navbar-h:76px}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--bg-main);color:var(--text-main);margin:0;font-family:Roboto,Segoe UI,Arial,sans-serif;line-height:1.6;overflow-x:hidden}img{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3,h4{letter-spacing:-.01em;margin:0}.main-container{padding-top:calc(var(--navbar-h) + 24px);font-family:Roboto,Arial,sans-serif;overflow:hidden}.reveal{opacity:0;transition:opacity .8s var(--ease), transform .8s var(--ease);will-change:opacity, transform;transform:translateY(28px)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:80ms}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}.reveal-delay-4{transition-delay:.32s}.reveal-delay-5{transition-delay:.4s}.reveal-delay-6{transition-delay:.48s}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1!important;transition:none!important;transform:none!important}}.section{max-width:1240px;scroll-margin-top:var(--navbar-h);margin:0 auto;padding:clamp(50px,8vw,100px) clamp(16px,4vw,20px)}.section-title{text-align:center;color:var(--text-main);margin-bottom:12px;font-size:clamp(24px,3.4vw,34px);font-weight:800}.section-kicker{text-align:center;color:var(--primary-2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;font-size:13px;font-weight:700;display:block}.section-underline{background:var(--primary-gradient);border-radius:4px;width:64px;height:4px;margin:14px auto 46px}.navbar{width:100%;height:var(--navbar-h);z-index:1000;transition:background var(--t-med), box-shadow var(--t-med), backdrop-filter var(--t-med);-webkit-backdrop-filter:blur(10px);background:#ffffffdb;border-bottom:1px solid #0200710f;justify-content:space-between;align-items:center;padding:0 clamp(16px,4vw,44px);display:flex;position:fixed;top:0;left:0}.navbar.scrolled{box-shadow:var(--shadow-md);background:#020071eb;border-bottom-color:#0000}.navbar-brand{min-width:0;color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.navbar-brand .navbar-title{text-decoration:none}.navbar-logo{width:84px;transition:filter var(--t-med), transform var(--t-med);flex-shrink:0}.navbar-brand:hover .navbar-logo{transform:scale(1.04)}.navbar-title{color:var(--primary);transition:color var(--t-med);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.navbar.scrolled .navbar-title{color:#fff}.navbar.scrolled .navbar-logo{filter:brightness(0)invert()}.navbar-menu{align-items:center;gap:8px;display:flex}.nav-link{color:var(--primary);transition:color var(--t-fast), background var(--t-fast);border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:600;text-decoration:none;position:relative}.navbar.scrolled .nav-link{color:#ffffffeb}.nav-link:hover{color:var(--primary-2);background:#2563eb1a}.navbar.scrolled .nav-link:hover{color:#fff;background:#ffffff24}.navbar-actions{align-items:center;gap:14px;display:flex}.lang-switch{cursor:pointer;width:84px;height:34px;transition:background var(--t-fast);background:#02007114;border-radius:999px;flex-shrink:0;padding:3px;display:flex;position:relative}.navbar.scrolled .lang-switch{background:#ffffff2e}.lang-switch-thumb{background:var(--primary-gradient);width:38px;height:28px;transition:transform var(--t-med);box-shadow:var(--shadow-sm);border-radius:999px;position:absolute;top:3px;left:3px}.lang-switch[data-lang=en] .lang-switch-thumb{transform:translate(40px)}.lang-switch-option{z-index:1;color:var(--primary);transition:color var(--t-fast);flex:1;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex;position:relative}.navbar.scrolled .lang-switch-option,.lang-switch[data-lang=id] .lang-switch-option.id,.lang-switch[data-lang=en] .lang-switch-option.en{color:#fff}.hamburger{cursor:pointer;z-index:1100;background:0 0;border:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;display:none}.hamburger span{background:var(--primary);width:100%;height:2px;transition:transform var(--t-fast), opacity var(--t-fast), background var(--t-fast);border-radius:2px;display:block}.navbar.scrolled .hamburger span{background:#fff}.hamburger.open span:first-child{transform:translateY(7px)rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.mobile-menu{top:var(--navbar-h);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;box-shadow:var(--shadow-md);z-index:999;transform-origin:top;opacity:0;pointer-events:none;transition:transform var(--t-med), opacity var(--t-med);background:#fffffffa;flex-direction:column;gap:4px;padding:10px 24px 26px;display:flex;position:fixed;left:0;transform:scaleY(0)}.mobile-menu.open{opacity:1;pointer-events:auto;transform:scaleY(1)}.mobile-menu a{color:var(--text-main);transition:color var(--t-fast), padding-left var(--t-fast);border-bottom:1px solid #02007112;padding:14px 6px;font-size:16px;font-weight:600;text-decoration:none}.mobile-menu a:hover{color:var(--primary-2);padding-left:12px}.mobile-menu a:last-child{border-bottom:none}@media (max-width:900px){.navbar-menu{display:none}.hamburger{display:flex}.navbar-title{max-width:46vw;font-size:12px}.navbar-logo{width:56px}}@media (max-width:380px){.navbar-title{max-width:40vw;font-size:10.5px}.navbar-logo{width:46px}.header-actions{flex-direction:column;width:100%;max-width:260px;margin-left:auto;margin-right:auto}.btn{justify-content:center;width:100%}.kontak-icon{width:44px;height:52px}}.header{text-align:center;isolation:isolate;border-radius:0 0 40px 40px;padding:clamp(70px,14vw,150px) 20px;position:relative;overflow:hidden}.header:before{content:"";z-index:-2;background-color:#0000;background-image:linear-gradient(135deg,#020071d1,#2563ebb8),url(/images/bg.jpg);background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0;transform:scale(1.05)}.header:after{content:"";z-index:-1;background:radial-gradient(circle at 20% 20%,#ffffff29,#0000 45%);position:absolute;inset:0}.header-eyebrow{color:#dbe6ff;letter-spacing:.18em;text-transform:uppercase;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #ffffff59;border-radius:999px;margin-bottom:22px;padding:8px 18px;font-size:12.5px;font-weight:700;display:inline-block}.header-title{color:#fff;text-shadow:0 6px 30px #00000040;max-width:900px;margin:0 auto;font-size:clamp(28px,5.4vw,54px);font-weight:800;line-height:1.15}.header-tagline{color:#eef2ff;max-width:620px;margin-top:18px;margin-left:auto;margin-right:auto;font-size:clamp(14px,2vw,19px)}.header-actions{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:38px;display:flex}.btn{cursor:pointer;transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);border:none;border-radius:999px;align-items:center;gap:8px;padding:14px 28px;font-size:14.5px;font-weight:700;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{color:var(--primary);box-shadow:var(--shadow-md);background:#fff}.btn-primary:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.btn-outline{color:#fff;background:0 0;border:1.5px solid #ffffff8c}.btn-outline:hover{background:#ffffff24;border-color:#fff;transform:translateY(-3px)}@media (max-width:768px){.header{border-radius:0 0 26px 26px}}.tentang-grid{grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(30px,5vw,60px);max-width:1160px;margin:0 auto;display:grid}.tentang-text p{text-align:justify;color:var(--text-secondary);font-size:16px;line-height:1.85}.tentang-text strong{color:var(--text-main)}.tentang-card-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.stat-card{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform var(--t-med), box-shadow var(--t-med);background:#fff;position:relative;overflow:hidden}.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px)}.stat-card img{object-fit:cover;width:100%;height:96px;transition:transform var(--t-slow)}.stat-card:hover img{transform:scale(1.08)}.stat-card-body{background:var(--primary-gradient);color:#fff;text-align:center;padding:14px 10px}.stat-card-title{margin:0;font-size:21px;font-weight:800}.stat-card-sub{color:#dfe6ff;margin:4px 0 0;font-size:12px}@media (max-width:900px){.tentang-grid{grid-template-columns:1fr}.tentang-text h2{margin-bottom:14px}}@media (max-width:600px){.tentang-card-grid{grid-template-columns:repeat(2,1fr)}}.badge-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,6vw,60px);padding:30px 20px 10px;display:flex}.badge-row img{object-fit:contain;opacity:.75;height:clamp(70px,11vw,130px);transition:opacity var(--t-fast), transform var(--t-fast)}.badge-row img:hover{opacity:1;transform:scale(1.06)}.visi-grid,.misi-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;gap:clamp(28px,6vw,70px);max-width:1100px;margin:0 auto;display:grid}.visi-grid img,.misi-grid img{border-radius:var(--radius-lg);object-fit:cover;width:100%;box-shadow:var(--shadow-md)}.visi-misi-title{color:var(--text-main);margin-bottom:16px;font-size:clamp(22px,3vw,27px);font-weight:800}.visi-grid p{color:var(--text-secondary);font-size:16px;line-height:1.85}.misi-list{color:var(--text-secondary);flex-direction:column;gap:14px;padding-left:0;font-size:15.5px;line-height:1.85;list-style:none;display:flex}.misi-list li{padding-left:30px;position:relative}.misi-list li:before{content:"";background:var(--primary-gradient);border-radius:6px;width:16px;height:16px;position:absolute;top:8px;left:0}.products-scroll{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;gap:20px;padding:10px 4px 24px;display:flex;overflow-x:auto}.products-scroll::-webkit-scrollbar{height:8px}.products-scroll::-webkit-scrollbar-thumb{background:#0200712e;border-radius:999px}.product-card{scroll-snap-align:start;border-radius:var(--radius-md);min-width:190px;max-width:190px;box-shadow:var(--shadow-sm);transition:transform var(--t-med), box-shadow var(--t-med);background:#fff;flex:none;padding:16px}.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px)}.product-card img{object-fit:cover;border-radius:var(--radius-sm);width:100%;height:150px;transition:transform var(--t-slow)}.product-card:hover img{transform:scale(1.06)}.product-card h3{text-align:center;color:var(--text-main);margin-top:12px;font-size:15px;font-weight:700}.galeri-grid{grid-template-columns:repeat(3,1fr);gap:20px;max-width:1020px;margin:10px auto 0;display:grid}.gallery-card{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform var(--t-med), box-shadow var(--t-med);position:relative;overflow:hidden}.gallery-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)scale(1.02)}.gallery-card img{object-fit:cover;width:100%;height:210px;transition:transform var(--t-slow);display:block}.gallery-card:hover img{transform:scale(1.1)}@media (max-width:900px){.galeri-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.galeri-grid{grid-template-columns:1fr}}.klien-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));place-items:center;gap:24px;max-width:1000px;margin:0 auto;display:grid}.client-logo{border-radius:var(--radius-sm);width:120px;height:80px;box-shadow:var(--shadow-sm);transition:transform var(--t-fast), box-shadow var(--t-fast);background:#fff;justify-content:center;align-items:center;padding:12px;display:flex}.client-logo:hover{box-shadow:var(--shadow-md);transform:translateY(-5px)}.client-logo img{object-fit:contain;max-width:100%;max-height:100%}@media (max-width:600px){.klien-grid{grid-template-columns:repeat(2,1fr)}}.kontak-grid{grid-template-columns:repeat(4,1fr);gap:22px;max-width:1100px;margin:0 auto;display:grid}.kontak-card{background:var(--bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);text-align:center;transition:transform var(--t-med), box-shadow var(--t-med);padding:30px 22px}.kontak-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px)}.kontak-icon{object-fit:contain;width:55px;height:65px;margin:0 auto;display:block}.kontak-card h3{color:var(--text-main);margin-bottom:12px;font-size:16px}.kontak-desc{color:var(--text-secondary);overflow-wrap:anywhere;font-size:14px;line-height:1.6}.kontak-row{border-radius:var(--radius-sm);cursor:pointer;transition:background var(--t-fast), transform var(--t-fast);background:#f1f5f9;justify-content:space-between;align-items:center;margin:7px 0;padding:11px 12px;font-size:13.5px;display:flex}.kontak-row:hover{background:#e0edff;transform:translate(2px)}.kontak-row-label{color:var(--text-main);flex-shrink:0;font-weight:600}.kontak-row-value{color:var(--primary-2);overflow-wrap:anywhere;text-align:right}.kontak-link{cursor:pointer;color:var(--primary-2);transition:color var(--t-fast);font-weight:600}.kontak-link:hover{color:var(--primary)}@media (max-width:900px){.kontak-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.kontak-grid{grid-template-columns:1fr}}.map-wrapper{border-radius:var(--radius-lg);max-width:1100px;box-shadow:var(--shadow-md);filter:grayscale(.15);border:0;margin:50px auto 0;overflow:hidden}.map-wrapper iframe{border:0;width:100%;height:340px;display:block}@media (max-width:768px){.map-wrapper iframe{height:250px}}.site-footer{text-align:center;color:var(--text-muted);padding:26px 20px;font-size:13px}.back-to-top{background:var(--primary-gradient);color:#fff;cursor:pointer;width:46px;height:46px;box-shadow:var(--shadow-md);z-index:900;opacity:0;pointer-events:none;transition:opacity var(--t-med), transform var(--t-med);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;display:flex;position:fixed;bottom:22px;right:22px;transform:translateY(16px)scale(.8)}.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.back-to-top:hover{transform:translateY(-4px)scale(1.05)}