/*
Theme Name: Genset Industri
Theme URI: https://gensetindustri.com/
Author: ipang
Author URI: https://ipang.net/
Description: Genset Industri. Generated by ipang OS from the approved design for gensetindustri.com; edit the design, not this file.
Version: 1.0.10152758
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: gensetindustri
*/


:root{
  --ground:#fbfaf8;
  --ink:#1a1a1a;
  --mute:#5f5f5f;
  --line:#dddddd;
  --panel:#ededed;
  --cta:#f26b1d;
  --white:#ffffff;
  --display:'Saira Condensed',sans-serif;
  --body:'Saira',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:0;margin:0}
h1{font-size:52px}
h2{font-size:36px}
h3{font-size:24px}
p{margin:0}
p,dd,figcaption{max-width:58ch}
.lead{font-size:20px;line-height:1.5;color:var(--mute)}
.cap{font-size:14px;color:var(--mute);max-width:60ch}
.shell{width:min(1200px,100%);margin-inline:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn{display:inline-block;background:var(--cta);color:var(--ink);font-family:var(--display);font-weight:700;font-size:20px;text-decoration:none;padding:14px 24px;line-height:1.3;border:0;border-radius:2px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}

header{padding:0 20px;background:var(--ink);color:var(--white)}
header .shell{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:0.01em}
.brand svg{width:30px;height:30px}
nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;font-weight:600;font-size:15px}
nav a{text-decoration:none}
@media (max-width:800px){nav{display:none}}

section{padding:56px 20px}
.hero{padding-top:56px;padding-bottom:40px}
.hero .grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:end}
.hero h1{max-width:20ch}
.hero .lead{max-width:46ch;margin-top:18px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero figure{margin:0;background:var(--white);border:1px solid var(--line);padding:16px}
.hero img{width:100%;height:auto;display:block}
.hero figcaption{font-size:14px;color:var(--mute);margin-top:8px;text-align:center;margin-inline:auto}
@media (max-width:820px){.hero .grid{grid-template-columns:1fr}.hero figure{max-width:520px}}

/* the signature: every engine brand as a bar on one kVA axis */
.peta{padding-top:16px}
.peta .box{background:var(--white);border:1px solid var(--line);padding:24px}
.peta h2{font-size:26px}
.peta ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.peta li{display:grid;grid-template-columns:110px 1fr 200px;gap:14px;align-items:center}
.peta .who{font-family:var(--display);font-size:20px}
.peta .track{position:relative;display:block;height:22px;background:var(--panel)}
.peta .bar{position:absolute;top:0;height:100%;background:var(--ink)}
.peta .val{font-size:14px;color:var(--mute);text-align:right}
.peta .axis{display:flex;justify-content:space-between;margin-top:8px;padding-left:124px;padding-right:214px;font-size:14px;color:var(--mute)}
@media (max-width:700px){.peta li{grid-template-columns:90px 1fr}.peta .val{grid-column:2;text-align:left;margin-top:-4px}.peta .axis{padding-left:104px;padding-right:0}}

.head{max-width:56ch;margin-bottom:24px}
.head h2{max-width:24ch}
.head p{margin-top:12px;color:var(--mute)}
.tabel .tscroll{overflow-x:auto;background:var(--white);border:1px solid var(--line);padding:4px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-family:var(--display);font-size:16px;font-weight:700;background:var(--panel)}
tbody tr:last-child td{border-bottom:0}
tr.grp td{background:var(--panel);font-family:var(--display);font-size:16px;padding-block:6px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tabel .two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.tabel .two > div{min-width:0}
.tabel h3{margin-bottom:10px}
@media (max-width:1000px){.tabel .two{grid-template-columns:1fr}}

.siapa{background:var(--ink);color:var(--white)}
.siapa .head p{color:var(--line)}
.siapa ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.siapa li{border-top:1px solid #4a4a4a;padding-top:16px}
.siapa li strong{display:block;font-family:var(--display);font-size:24px;margin-bottom:6px;color:var(--cta)}
.siapa li span{color:var(--line);font-size:15px}
@media (max-width:900px){.siapa ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.siapa ul{grid-template-columns:1fr;gap:20px}}

.rating td{white-space:normal;vertical-align:top}
.rating td:first-child{font-family:var(--display);font-size:18px;width:20%}
.rating .tscroll{overflow-x:auto;background:var(--white);border:1px solid var(--line);padding:4px}
@media (max-width:700px){
  .rating thead{display:none}
  .rating tr,.rating td{display:block;width:auto}
  .rating tr{border-bottom:1px solid var(--line);padding:6px 0}
  .rating tr:last-child{border-bottom:0}
  .rating td{border-bottom:0;padding:6px 12px}
  .rating td:first-child{padding-top:12px;width:auto}
  .rating td[data-k]::before{content:attr(data-k);display:block;font-size:14px;color:var(--mute);font-weight:600}
}

.isi .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.isi dl{margin:0;display:grid;gap:14px}
.isi dt{font-family:var(--display);font-size:22px;line-height:1.3}
.isi dd{margin:4px 0 0;color:var(--mute)}
.isi figure{margin:0;background:var(--white);border:1px solid var(--line);padding:16px}
.isi img{width:100%;height:auto;display:block}
.isi figcaption{font-size:14px;color:var(--mute);margin-top:8px;text-align:center;margin-inline:auto}
.isi .rail{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.isi .rail li{border-top:1px solid var(--ink);padding-top:10px}
.isi .rail b{display:block;font-family:var(--display);font-size:34px;line-height:1}
.isi .rail span{display:block;font-size:14px;color:var(--mute);margin-top:4px}
@media (max-width:820px){.isi .grid{grid-template-columns:1fr}}

.tentang .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.tentang table{background:var(--white);border:1px solid var(--line)}
.tentang td{white-space:normal;padding:12px 14px}
.tentang td:first-child{color:var(--mute);width:30%}
.tentang figure{margin:24px 0 0;background:var(--white);border:1px solid var(--line);padding:16px}
.tentang img{width:100%;height:auto;display:block}
.tentang figcaption{font-size:14px;color:var(--mute);margin-top:8px;text-align:center;margin-inline:auto}
@media (max-width:760px){.tentang .grid{grid-template-columns:1fr;gap:16px}}

.pesan ol{list-style:none;margin:0;padding:0;counter-reset:n;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pesan li{counter-increment:n;background:var(--white);border:1px solid var(--line);padding:22px}
.pesan li::before{content:counter(n);font-family:var(--display);font-size:40px;font-weight:700;line-height:1;display:block;margin-bottom:8px;color:var(--cta)}
.pesan li strong{display:block;font-size:18px;margin-bottom:6px}
.pesan li span{color:var(--mute);font-size:15px}
@media (max-width:760px){.pesan ol{grid-template-columns:1fr}}

.faq dl{margin:0;max-width:760px}
.faq dt{font-family:var(--display);font-size:22px;line-height:1.3;padding:18px 0 6px;border-top:1px solid var(--ink)}
.faq dd{margin:0;padding:0 0 18px;color:var(--mute)}

.kirim{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kirim .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.kirim form{display:grid;gap:14px;background:var(--ground);border:1px solid var(--line);padding:24px}
.kirim .dua{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kirim label,.kirim .field{display:grid;gap:6px;font-weight:600;font-size:15px}
.kirim input,.kirim select,.kirim textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--ink);width:100%}
.kirim textarea{resize:vertical}
.kirim .status{font-size:14px;color:var(--mute);max-width:52ch}
@media (max-width:760px){.kirim .grid{grid-template-columns:1fr}.kirim .dua{grid-template-columns:1fr}}

.lokasi .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.lokasi table{background:var(--white);border:1px solid var(--line)}
.lokasi td{white-space:normal;padding:12px 14px}
.lokasi td:first-child{color:var(--mute);width:34%}
@media (max-width:760px){.lokasi .grid{grid-template-columns:1fr}.lokasi td{display:block}.lokasi td:first-child{width:auto;padding-bottom:0;font-size:14px}.lokasi td:last-child{padding-top:2px}}

.akhir{background:var(--cta);color:var(--ink);padding-block:80px}
.akhir h2{max-width:22ch}
.akhir .lead{color:var(--ink);max-width:46ch;margin-top:12px}
.akhir .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.akhir .btn{background:var(--ink);color:var(--white)}
.akhir .cap{color:var(--ink);margin:0}

footer{background:var(--ink);color:var(--line);padding:40px 20px;font-size:15px}
footer .shell{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
footer .brand{color:var(--white)}
footer p{margin-top:10px}
footer strong{color:var(--white)}
footer ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
footer a{color:var(--white)}
@media (max-width:760px){footer .shell{grid-template-columns:1fr}}

@media (width >= 861px){h1{font-size:68px}h2{font-size:44px}section{padding-block:80px}.hero{padding-top:88px;padding-bottom:40px}.akhir{padding-block:112px}.peta{padding-top:16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@font-face{font-family:'Saira';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://gensetindustri.com/wp-content/uploads/2026/09/font-saira-vSdyqOvlaB-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Saira';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://gensetindustri.com/wp-content/uploads/2026/09/font-saira-iIvSdyqOvg-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(https://gensetindustri.com/wp-content/uploads/2026/09/font-saira-condensed-2fhC61HpnY-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(https://gensetindustri.com/wp-content/uploads/2026/09/font-saira-condensed-962fhC61Hg-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Jumping to a section from the menu used to teleport. Smooth is the whole
   difference between "the page moved" and "I moved down the page", and
   scroll-padding keeps the heading clear of the sticky header instead of
   landing underneath it. Anyone who has asked their system for less motion
   gets the jump back, because for some people the glide is what hurts. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* A grid or flex track takes its minimum from its content, so one wide table
   stretches its column past the screen and the page goes with it. A scroll
   container contributes nothing, which is why this one line is the fix.
   It was scoped to .entry-content, and the front page is not inside that. */
.table-scroll{overflow-x:auto;max-width:100%;min-width:0}
img,video,iframe,table,pre{max-width:100%}

/* A grid or flex child's automatic minimum is its own min-content, so one
   table asking for 560px made its whole column 560px wide inside a 362px
   phone, and jualchain.com clipped its sentences with no way to scroll to
   the rest. Letting these shrink is what lets the table scroll in its own
   box instead. Measured live: 576px wide became 390px. */
section, article, aside, figure, .table-scroll { min-width: 0; }

/* ---- Content written in the editor -------------------------------------- */
/* The design styles the elements it happens to contain. An article arrives as
   plain h2, p, ul, blockquote and table, so those are given the same scale
   here, scoped so they can never reach the front page's own markup. */

.site-main--content { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 112px); }
.entry-shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.entry-header { margin-bottom: clamp(28px, 4vw, 48px); }
.entry-title {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: #1a1a1a;
  max-width: 20ch;
}
.entry-meta { color: #5b5b55; font-size: 'Saira',sans-serif; margin: 0; }

.entry-content { max-width: 68ch; color: #1a1a1a; font-size: 'Saira',sans-serif; line-height: 1.7; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--display);
  color: #1a1a1a;
  line-height: 1.15;
  margin-top: 1.8em;
  margin-bottom: .5em;
}
.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: calc('Saira',sans-serif * 1.28); }
.entry-content h4 { font-size: calc('Saira',sans-serif * 1.1); }
.entry-content p { margin: 0; color: #1a1a1a; font-size: 'Saira',sans-serif; }
.entry-content a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-thickness: 2px; }
.entry-content strong { font-weight: 600; }
.entry-content ul, .entry-content ol { margin: 0; padding-left: 1.35em; }
.entry-content li + li { margin-top: .45em; }
.entry-content ul { list-style: none; padding-left: 1.6em; }
.entry-content ul > li { position: relative; }
.entry-content ul > li::before {
  content: ""; position: absolute; left: -1.6em; top: .62em;
  width: 8px; height: 8px; background: #f26b1d;
}
.entry-content blockquote {
  margin: 1.6em 0; padding: 18px 22px;
  background: #ffffff; border-radius: 4px;
  font-size: calc('Saira',sans-serif * 1.06);
}
.entry-content blockquote p { margin: 0; }
.entry-content img, .entry-content figure { max-width: 100%; height: auto; border-radius: 4px; }
.entry-content figure { margin: 1.8em 0; }
.entry-content figcaption { color: #5b5b55; font-size: calc('Saira',sans-serif * .88); margin-top: 8px; }
.entry-content code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .92em; background: #ffffff; padding: 2px 5px; border-radius: 3px;
}
.entry-content pre { background: #ffffff; padding: 16px 18px; border-radius: 4px; overflow-x: auto; }
.entry-content pre code { background: none; padding: 0; }
.entry-content hr { border: 0; border-top: 1px solid #dddddd; margin: 2.4em 0; }
/* a wide table scrolls inside its own box; the page never scrolls sideways */
.entry-content .table-scroll { overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: calc('Saira',sans-serif * .96); }
.entry-content th, .entry-content td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid #dddddd; vertical-align: top;
}
.entry-content th { font-weight: 600; }

.entry-list { display: grid; gap: clamp(20px, 3vw, 34px); max-width: 68ch; }
.entry-card { padding-bottom: clamp(20px, 3vw, 34px); border-bottom: 1px solid #dddddd; }
.entry-card:last-child { border-bottom: 0; }
.entry-card h2 { font-family: var(--display); font-size: 26px; line-height: 1.15; margin: 0 0 8px; }
.entry-card h2 a { color: #1a1a1a; text-decoration: none; }
.entry-card h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.entry-card p { margin: 0; color: #5b5b55; }

.entry-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.entry-nav a { color: #1a1a1a; }
.entry-empty { color: #5b5b55; max-width: 60ch; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: #1a1a1a; color: #fbfaf8;
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }