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


:root{
  --ground:#f3f5f7;
  --paper:#ffffff;
  --ink:#15191d;
  --mute:#5b6670;
  --line:#d5dbe0;
  --cta:#d81e2c;
  --radius:6px;
  --display:'Rubik',sans-serif;
  --body:'Source Sans 3',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.1;letter-spacing:-0.01em;margin:0}
h1{font-size:40px}
h2{font-size:30px}
h3{font-size:22px}
p{margin:0}
p,dd,figcaption{max-width:66ch}
.lead{font-size:20px;line-height:1.5}
.cap{font-size:14px;color:var(--mute);max-width:70ch}
.shell{width:min(1120px,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(--cta);outline-offset:3px}
.btn{display:inline-block;background:var(--cta);color:var(--paper);font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;padding:16px 26px;border:0;border-radius:var(--radius);line-height:1.3;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.note{font-size:14px;color:var(--mute);margin-top:12px;max-width:60ch}

/* header */
header{background:var(--paper);border-bottom:1px solid var(--line);padding-inline:20px}
header .shell{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;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:20px}
.brand svg{width:28px;height:28px}
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:760px){nav{display:none}}

/* hero */
.hero{padding:56px 20px 40px}
.hero .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.hero h1{max-width:22ch}
.hero .lead{max-width:40ch;margin-top:20px;color:var(--mute)}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
.hero figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.hero img{width:100%;height:auto;display:block}
.hero figcaption{font-size:14px;color:var(--mute);margin-top:12px}
.tanda{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:15px}
.tanda li{display:flex;gap:8px;align-items:baseline}
.tanda b{font-family:var(--display);color:var(--cta);min-width:1.4em}
@media (max-width:860px){.hero .grid{grid-template-columns:1fr}}

/* the signature: the path from diesel to socket, as a rail */
.alur{padding:24px 20px 64px}
.alur .box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.alur h2{font-size:22px}
.alur ol{list-style:none;margin:20px 0 0;padding:0;counter-reset:tahap;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.alur li{counter-increment:tahap;position:relative;background:var(--ground);border-radius:var(--radius);padding:16px 14px 14px;min-width:0}
.alur li::before{content:counter(tahap);font-family:var(--display);font-size:14px;color:var(--mute);display:block;margin-bottom:6px}
.alur li strong{display:block;font-family:var(--display);font-size:17px;line-height:1.2}
.alur li span{display:block;font-size:14px;color:var(--mute);margin-top:6px;line-height:1.4}
.alur li + li::after{content:"";position:absolute;left:-10px;top:50%;width:10px;height:2px;background:var(--ink)}
@media (max-width:900px){.alur ol{grid-template-columns:repeat(3,1fr)}.alur li:nth-child(4)::after{display:none}}
@media (max-width:560px){.alur ol{grid-template-columns:1fr 1fr}.alur li:nth-child(4)::after{display:block}.alur li:nth-child(3)::after,.alur li:nth-child(5)::after{display:none}}

/* sections */
section{padding:56px 20px}
.head{max-width:52ch;margin-bottom:28px}
.head h2{max-width:22ch}
.head p{margin-top:12px;color:var(--mute);max-width:52ch}

table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-family:var(--display);font-size:15px;font-weight:700}
tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto}
.komponen{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.komponen td:first-child{font-family:var(--display);font-size:17px;width:22%}
.komponen td:last-child{color:var(--mute)}
@media (max-width:720px){
  .komponen thead{display:none}
  .komponen tr,.komponen td{display:block;width:auto}
  .komponen tr{border-bottom:1px solid var(--line);padding:6px 0}
  .komponen tr:last-child{border-bottom:0}
  .komponen td{border-bottom:0;padding:6px 16px}
  .komponen td:first-child{padding-top:12px;width:auto}
  .komponen td[data-k]::before{content:attr(data-k);display:block;font-size:14px;color:var(--mute);font-weight:600}
  .komponen td:last-child{padding-bottom:12px}
}

.rail ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rail li{background:var(--paper);padding:24px}
.rail b{display:block;font-family:var(--display);font-size:40px;line-height:1;letter-spacing:-0.02em}
.rail span{display:block;margin-top:10px;color:var(--mute);font-size:15px}
.rail .contoh{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.rail .contoh p+p{margin-top:12px}
@media (max-width:860px){.rail ul{grid-template-columns:1fr 1fr}.rail b{font-size:32px}.rail .contoh{grid-template-columns:1fr}}

.banding td:first-child{font-weight:600;width:24%}
@media (max-width:640px){
  .banding thead{display:none}
  .banding tr,.banding td{display:block;width:auto}
  .banding tr{border-bottom:1px solid var(--line);padding:6px 0}
  .banding tr:last-child{border-bottom:0}
  .banding td{border-bottom:0;padding:8px 16px}
  .banding td:first-child{font-family:var(--display);font-size:18px;padding-top:12px;width:auto}
  .banding td[data-k]::before{content:attr(data-k);display:block;font-size:14px;color:var(--mute);font-weight:600}
}

/* the ladder: what the warehouse holds, per engine brand */
.ladder .box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.ladder h2{font-size:26px}
.ladder .rows{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ladder li{display:grid;grid-template-columns:150px 1fr 150px;gap:14px;align-items:center}
.ladder .who strong{font-family:var(--display);font-size:16px;display:block;line-height:1.3}
.ladder .who em{font-style:normal;font-size:14px;color:var(--mute)}
.ladder .track{position:relative;display:block;background:var(--ground);height:28px;border-radius:var(--radius);overflow:hidden}
.ladder .bar{position:absolute;top:0;height:100%;background:var(--ink)}
.ladder .val{font-family:var(--display);font-weight:700;font-size:16px;text-align:right}
.ladder .axis{display:flex;justify-content:space-between;margin-top:8px;padding-left:164px;padding-right:164px;font-size:14px;color:var(--mute)}
.ladder .alt{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.ladder .alt figure{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ladder .alt img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--radius)}
.ladder .alt figcaption{grid-column:1/-1;font-size:14px;color:var(--mute)}
@media (max-width:640px){.ladder li{grid-template-columns:100px 1fr}.ladder .val{grid-column:2;text-align:left;font-size:14px}.ladder .axis{padding-left:114px;padding-right:0}.ladder .alt{grid-template-columns:1fr}}

.tentang{background:var(--ink);color:var(--paper)}
.tentang .head p,.tentang .cap{color:var(--line)}
.tentang .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.tentang dl{margin:0;display:grid;gap:18px}
.tentang dt{font-family:var(--display);font-size:18px}
.tentang dd{margin:6px 0 0;color:var(--line)}
.tentang figure{margin:24px 0 0}
.tentang img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.tentang figcaption{font-size:14px;color:var(--line);margin-top:10px}
@media (max-width:760px){.tentang .grid{grid-template-columns:1fr;gap:8px}}

.rawat .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.rawat table td:first-child{font-family:var(--display);width:34%}
.rawat figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.rawat img{width:100%;height:auto;display:block}
.rawat figcaption{font-size:14px;color:var(--mute);margin-top:12px}
@media (max-width:760px){.rawat .grid{grid-template-columns:1fr}}

.faq dl{margin:0;max-width:760px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.faq dt{font-family:var(--display);font-size:19px;padding:20px 24px 6px}
.faq dd{margin:0;padding:0 24px 20px;border-bottom:1px solid var(--line);color:var(--mute)}
.faq dd:last-child{border-bottom:0}

.kirim{background:var(--paper);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);border-radius:var(--radius);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:var(--radius);background:var(--paper);color:var(--ink);width:100%}
.kirim textarea{resize:vertical}
.kirim .status{font-size:14px;color:var(--mute);max-width:60ch}
@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 td:first-child{color:var(--mute);width:36%}
@media (max-width:760px){.lokasi .grid{grid-template-columns:1fr}.lokasi td{display:block}.lokasi table td:first-child{width:auto;padding-bottom:0;font-size:14px}.lokasi td:last-child{padding-top:2px}}

.akhir{background:var(--paper);border-top:1px solid var(--line);padding:72px 20px}
.akhir h2{max-width:22ch}
.akhir .lead{max-width:52ch}
.akhir .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

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(--paper)}
footer p{margin-top:10px}
footer ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
footer a{color:var(--paper)}
footer .kredit{grid-column:1/-1;font-size:14px;margin-top:8px;padding-top:16px;border-top:1px solid #3a4148}
@media (max-width:760px){footer .shell{grid-template-columns:1fr}}

@media (width >= 861px){h1{font-size:56px}h2{font-size:36px}section{padding-block:80px}.hero{padding-block:88px 48px}.akhir{padding-block:104px}.alur{padding-block:24px 64px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(https://gensetinfo.com/wp-content/uploads/2026/09/font-rubik-YPFkZVOA6w-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:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(https://gensetinfo.com/wp-content/uploads/2026/09/font-rubik-U1dYPFkZVO-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:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://gensetinfo.com/wp-content/uploads/2026/09/font-source-sans-3-Zejf5HdF8Q-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:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://gensetinfo.com/wp-content/uploads/2026/09/font-source-sans-3-w8aZejf5Hc-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: #15191d;
  max-width: 20ch;
}
.entry-meta { color: #5b5b55; font-size: 'Source Sans 3',sans-serif; margin: 0; }

.entry-content { max-width: 68ch; color: #15191d; font-size: 'Source Sans 3',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: #15191d;
  line-height: 1.15;
  margin-top: 1.8em;
  margin-bottom: .5em;
}
.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: calc('Source Sans 3',sans-serif * 1.28); }
.entry-content h4 { font-size: calc('Source Sans 3',sans-serif * 1.1); }
.entry-content p { margin: 0; color: #15191d; font-size: 'Source Sans 3',sans-serif; }
.entry-content a { color: #15191d; 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: #d81e2c;
}
.entry-content blockquote {
  margin: 1.6em 0; padding: 18px 22px;
  background: #ffffff; border-radius: 4px;
  font-size: calc('Source Sans 3',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('Source Sans 3',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 #d5dbe0; 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('Source Sans 3',sans-serif * .96); }
.entry-content th, .entry-content td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid #d5dbe0; 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 #d5dbe0; }
.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: #15191d; 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: #15191d; }
.entry-empty { color: #5b5b55; max-width: 60ch; }

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