:root{--red-900:#7a0b0b;--red-800:#9d0e10;--red-700:#c01114;--red-600:#d41418;--red-500:#e11a1e;--black-900:#0c0c0e;--black-800:#141418;--neutral-100:#faf8f4;--neutral-50:#fffdf7;--gold-900:#6a4b10;--gold-700:#936c1d;--gold-600:#b4862a;--gold-500:#d5a43a;--gold-400:#e6bb55;--gold-300:#f1d27e;--gold-200:#f7e6ac;--gold-100:#fcf3cf;--color-accent:var(--red-500);--color-border:rgba(12,12,14,.12);--color-bg:var(--neutral-50);--color-contrast:var(--black-900);--color-text:#191512;--color-text-light:#6b6257;--radius:14px;--shadow:0 10px 30px rgba(12,12,14,.1);--pp-header-height:64px;--pp-header-bg:#fff;--pp-header-border:rgba(12,12,14,.1);--pp-link:var(--red-600);--pp-link-hover:var(--red-700);--pp-btn-primary:var(--red-600);--pp-btn-primary-hover:var(--red-700);--pp-btn-outline:#fff;--pp-btn-outline-border:var(--red-600);--pp-btn-outline-text:var(--red-600);--card-border:1px solid rgba(12,12,14,.1);--gold-grad:linear-gradient(180deg,var(--gold-300) 0%,var(--gold-500) 38%,var(--gold-400) 58%,var(--gold-700) 76%,var(--gold-300) 100%)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{margin:0;padding:0;height:100%}body{background:var(--color-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1}a,body{color:var(--color-text)}a{text-decoration:none;font-size:13px;font-weight:500;transition:color .2s ease}a:hover{color:var(--pp-link);text-decoration:underline}a:focus-visible,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.app-shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}.screen{padding:0 0 40px}.screen>section{padding:28px 0}.screen>:not(.container){padding-left:24px;padding-right:24px}.container section,.screen>.container{padding-left:0;padding-right:0}.container,section>.container{padding-left:24px;padding-right:24px}@media (min-width:900px){.container,.screen>:not(.container),section>.container{padding-left:32px;padding-right:32px}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}.pp-header{height:var(--pp-header-height);background:var(--pp-header-bg);border-bottom:1px solid var(--pp-header-border);box-shadow:inset 0 -2px 0 rgba(146,108,29,.18)}.pp-header-inner{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;grid-gap:16px;gap:16px}.pp-brand{display:inline-flex;gap:10px;color:var(--pp-link);font-weight:800;font-size:18px}.pp-brand,.pp-nav{align-items:center}.pp-nav{display:none;justify-content:center;gap:14px}.pp-nav a{color:var(--color-text);font-weight:500;letter-spacing:.01em;font-size:11px;display:inline-flex;align-items:center;gap:6px}.pp-nav a:hover{color:var(--pp-link-hover)}.has-submenu{position:relative;display:inline-flex;align-items:center;padding-bottom:8px}.has-submenu>a:after{content:"▾";font-size:10px;margin-left:6px;transform:translateY(-1px)}.submenu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--pp-header-border);border-radius:10px;box-shadow:var(--shadow);padding:8px;min-width:220px;z-index:20;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .3s;pointer-events:none}.submenu a{display:flex;padding:8px 10px;border-radius:8px;white-space:nowrap;font-size:11px}.submenu a:hover{background:#fff8e6;text-decoration:none}.has-submenu:focus-within .submenu,.has-submenu:hover .submenu{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;pointer-events:auto}.has-submenu{padding-bottom:10px}.pp-actions{display:flex;align-items:center;gap:10px;justify-self:end}.brand-box{justify-self:center;padding:6px 12px;background:#fff;border:1px solid rgba(146,108,29,.28);border-radius:14px;box-shadow:0 6px 16px rgba(12,12,14,.08),inset 0 1px 0 hsla(0,0%,100%,.75);display:inline-flex;flex-direction:column;align-items:center;gap:4px;color:var(--black-900)}@media (max-width:640px){.brand-box{padding:4px 10px;font-size:16px}}.pp-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:10px 18px;font-weight:800;border:1px solid rgba(146,108,29,.6);font-size:13px;box-shadow:inset 0 2px 0 hsla(0,0%,100%,.75),inset 0 -3px 0 rgba(0,0,0,.12),0 8px 18px rgba(146,108,29,.22);text-shadow:0 1px 0 hsla(0,0%,100%,.45)}.pp-btn,.pp-btn.primary{background:linear-gradient(180deg,#f6e6b8,#e2bd63 45%,#c99a3a 70%,#b27f25);color:#2a1e07}.pp-btn.primary:hover{background:linear-gradient(180deg,#f8edc8,#e7c471 45%,#cf9f41 70%,#b9872b);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.8),inset 0 -3px 0 rgba(0,0,0,.14),0 12px 24px rgba(146,108,29,.28)}.pp-btn.outline{background:linear-gradient(180deg,#f6e6b8,#e2bd63 45%,#c99a3a 70%,#b27f25);color:#2a1e07;border-color:rgba(146,108,29,.6);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.75),inset 0 -3px 0 rgba(0,0,0,.12),0 8px 18px rgba(146,108,29,.22)}.pp-chevron{font-size:12px;transform:translateY(-1px)}@media (min-width:900px){.pp-nav{display:inline-flex}.pp-header-inner{gap:12px}}.card{background:#fff;border:1px solid rgba(12,12,14,.1);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(12,12,14,.1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;overflow:hidden}.card:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(12,12,14,.14);border-color:rgba(12,12,14,.14)}.card.media{display:grid;grid-template-columns:1fr;grid-gap:0;gap:0;padding:0;overflow:hidden}.card.media.horizontal{grid-template-columns:160px 1fr;gap:16px;padding:16px 18px 18px;align-items:center}.card.media.horizontal .media-img{width:160px;height:120px;border-radius:12px;flex-shrink:0}.card.media.horizontal>div:not(.media-img){padding:0;display:flex;flex-direction:column;gap:6px}@media (max-width:640px){.card.media.horizontal{grid-template-columns:1fr;gap:12px;padding:16px}.card.media.horizontal .media-img{width:100%;height:140px}}.card.media .media-img{position:relative;width:100%;height:180px;border-radius:0;border:0;background:#e9ecf6;overflow:hidden}@media (min-width:820px){.card.media .media-img{height:220px}}.card.media>div:not(.media-img){padding:16px 18px 18px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 22px;border:1px solid rgba(146,108,29,.6);background:linear-gradient(180deg,#f6e6b8,#e2bd63 45%,#c99a3a 70%,#b27f25);color:#2a1e07;font-weight:800;font-size:13px;box-shadow:inset 0 2px 0 hsla(0,0%,100%,.75),inset 0 -4px 0 rgba(0,0,0,.12),0 10px 22px rgba(146,108,29,.26);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;text-shadow:0 1px 0 hsla(0,0%,100%,.45)}.btn:hover{transform:translateY(-1px);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.8),inset 0 -4px 0 rgba(0,0,0,.14),0 14px 28px rgba(146,108,29,.32);text-decoration:none}.btn.secondary{border-color:rgba(146,108,29,.6)}.btn.outline,.btn.secondary{background:linear-gradient(180deg,#f6e6b8,#e2bd63 45%,#c99a3a 70%,#b27f25);color:#2a1e07}.btn.outline{border:1px solid rgba(146,108,29,.6);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.75),inset 0 -4px 0 rgba(0,0,0,.12),0 10px 22px rgba(146,108,29,.26);font-weight:800;text-shadow:0 1px 0 hsla(0,0%,100%,.45)}.btn.outline:hover{transform:translateY(-1px);background:linear-gradient(180deg,#f8edc8,#e7c471 45%,#cf9f41 70%,#b9872b);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.8),inset 0 -4px 0 rgba(0,0,0,.14),0 14px 28px rgba(146,108,29,.32)}.service-list>a.btn{justify-self:start;max-width:max-content}.btn.sm{padding:10px 16px;font-size:12px}.list{display:grid;grid-gap:12px;gap:12px}.section{margin:12px 0 20px}h1{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}h1,h2{color:var(--color-text);font-weight:700}h2{font-size:16px;margin:16px 0 8px}h3{font-size:14px;margin:12px 0 6px;color:var(--color-text);font-weight:700}p{margin:8px 0;line-height:1.5;font-size:13px;color:var(--color-text-light);font-weight:500}strong{color:var(--color-text);font-weight:600}.nav-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}@media (min-width:560px){.nav-grid{grid-template-columns:1fr 1fr 1fr}}.hero{position:relative;background:linear-gradient(90deg,#fff,hsla(0,0%,100%,.85) 36%,hsla(0,0%,100%,.65) 60%,hsla(0,0%,100%,.45) 82%,hsla(0,0%,100%,.3));border-bottom:1px solid rgba(20,16,44,.08);overflow:hidden}.hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url(/images/bg/batangshipyard-com-galangan-kapal-batang-jateng-crp-SML.png) 78% 20%/cover no-repeat;transform:scaleX(-1);z-index:-1}.hero.light-text .hero-title{color:var(--black-900)}.hero.light-text .hero-sub{color:var(--color-text-light)}.shipyard-hero{background:linear-gradient(0deg,hsla(0,0%,100%,.92),hsla(0,0%,100%,.72)),url(/images/bg/bgshipyardindonesia.webp) 50% /cover no-repeat}.services-hero{background:linear-gradient(0deg,hsla(0,0%,100%,.92),hsla(0,0%,100%,.72)),url(/images/bg/bglayanan.webp) 50% /cover no-repeat}.produksi-hero{background:linear-gradient(0deg,hsla(0,0%,100%,.92),hsla(0,0%,100%,.72)),url(/images/bg/batangshipyard-com-galangan-pembuatan-kapal-batang-jateng-sml-crp.png) 50% /cover no-repeat}.order-hero{background:linear-gradient(0deg,hsla(0,0%,100%,.92),hsla(0,0%,100%,.72)),url(/images/bg/bgprosespemesanan.webp) 50% /cover no-repeat}.about-hero{background:linear-gradient(0deg,hsla(0,0%,100%,.92),hsla(0,0%,100%,.72)),url(/images/bg/bgtentangkami.webp) 50% /cover no-repeat}.hero-inner{padding:140px 0 110px;text-align:left;display:grid;grid-template-columns:1fr 1fr;grid-gap:24px;gap:24px;align-items:center}.hero .hero-copy{grid-column:1/2}@media (max-width:640px){.hero:before{background:url(/images/bg/batangshipyard-com-galangan-kapal-batang-jateng-crp-SML.png) 96% 16%/cover no-repeat;background-position:0 0,right -48px top 16%}.hero-inner{padding:150px 0 110px;display:block}}.hero-title{font-size:clamp(28px,4.2vw,40px);line-height:1.08;margin:0 0 14px;color:var(--black-900);font-weight:800;letter-spacing:-.015em}.hero-sub{font-size:clamp(14px,2vw,16px);color:var(--color-text-light);margin:0 0 22px;max-width:720px}.hero-cta{display:flex;gap:12px;align-items:center}.tiles{display:grid;grid-gap:14px;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:640px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}.tile{position:relative;overflow:hidden;border-radius:16px;padding:18px;font-weight:800;color:var(--indigo-900);background:linear-gradient(180deg,#fff,#fbf6e8 55%,#f7eed3);border:1px solid rgba(186,148,60,.28);box-shadow:0 14px 28px rgba(12,12,14,.1),0 2px 4px rgba(12,12,14,.06),inset 0 1px 0 hsla(0,0%,100%,.7);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.tile.gold{background:linear-gradient(180deg,#f6e6b8,#e2bd63 45%,#c99a3a 70%,#b27f25);color:#2a1e07;border:1px solid rgba(146,108,29,.6);border-radius:999px;padding:14px 20px;box-shadow:inset 0 2px 0 hsla(0,0%,100%,.75),inset 0 -3px 0 rgba(0,0,0,.12),0 12px 26px rgba(146,108,29,.22);text-shadow:0 1px 0 hsla(0,0%,100%,.45)}.tile:before{inset:-40% -20% auto -20%;height:70%;background:radial-gradient(60% 100% at 20% 20%,rgba(209,167,71,.2),transparent 60%)}.tile:after,.tile:before{content:"";position:absolute;pointer-events:none}.tile:after{inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.5)}.tile:hover{transform:translateY(-2px);background:linear-gradient(180deg,#fff,#fbf3da 50%,#f4e5b5);box-shadow:0 18px 36px rgba(12,12,14,.14),0 6px 12px rgba(12,12,14,.08),inset 0 1px 0 hsla(0,0%,100%,.8);text-decoration:none}.tile.gold:hover{background:linear-gradient(180deg,#f8edc8,#e7c471 45%,#cf9f41 70%,#b9872b);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.8),inset 0 -3px 0 rgba(0,0,0,.14),0 18px 38px rgba(146,108,29,.28);text-decoration:none}.tile:active{transform:translateY(0);box-shadow:0 10px 22px rgba(16,9,43,.12),0 2px 8px rgba(16,9,43,.08),inset 0 1px 0 hsla(0,0%,100%,.75)}.tile:focus-visible{outline:3px solid rgba(212,20,24,.45);outline-offset:2px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.section-title{font-size:20px;font-weight:800;color:var(--black-900);margin:0}.muted{color:var(--color-text-light)}.cta-band{margin-top:24px;background:linear-gradient(90deg,#fff,hsla(0,0%,100%,.3));color:var(--color-text);border-radius:18px;padding:24px;display:grid;grid-gap:12px;gap:12px;align-items:center;box-shadow:0 16px 40px rgba(12,12,14,.15);border:1px solid rgba(12,12,14,.1)}@media (min-width:800px){.cta-band{grid-template-columns:1fr auto;padding:28px 32px}}.cta-band h3{color:var(--color-text);margin:0;font-size:18px}.cta-actions{display:flex;gap:10px}.service-list{display:grid;grid-gap:12px;gap:12px;grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:820px){.service-list{grid-template-columns:repeat(2,minmax(0,1fr))}}.card.media:hover{box-shadow:0 18px 46px rgba(16,9,43,.16);transform:translateY(-2px);transition:transform .18s ease,box-shadow .18s ease}.two-col{display:grid;grid-gap:12px;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:360px){.two-col{grid-template-columns:1fr}}.gold-text{color:var(--gold-600)}.gold-ring{box-shadow:inset 0 0 0 2px var(--gold-600),0 6px 18px rgba(146,108,29,.24)}.gold-grad{background:var(--gold-grad);color:#2a1e07}.gold-pill{background:linear-gradient(180deg,#f6e6b8,#e2bd63 45%,#c99a3a 70%,#b27f25);color:#2a1e07;border-radius:999px;padding:8px 14px;border:1px solid rgba(146,108,29,.6);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.75),inset 0 -3px 0 rgba(0,0,0,.12),0 6px 14px rgba(146,108,29,.22);font-weight:800;font-size:12px;text-shadow:0 1px 0 hsla(0,0%,100%,.45)}.gold-pill:hover{background:linear-gradient(180deg,#f8edc8,#e7c471 45%,#cf9f41 70%,#b9872b);text-decoration:none;box-shadow:inset 0 2px 0 hsla(0,0%,100%,.8),inset 0 -3px 0 rgba(0,0,0,.14),0 10px 20px rgba(146,108,29,.26)}.gold-list{list-style:none;margin:0;padding:0;display:grid;grid-gap:10px;gap:10px}.gold-list li{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:#fffaf0;border:1px solid rgba(146,108,29,.28);box-shadow:0 6px 16px rgba(12,12,14,.06),inset 0 1px 0 hsla(0,0%,100%,.7);line-height:1.6}.gold-list li p{margin:0}.gold-list{word-break:normal}.gold-list li:before{content:none}.gold-bullet{width:18px;height:18px;flex:0 0 18px;background-repeat:no-repeat;background-position:50%;background-size:16px 16px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b27f25' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}