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


:root{
  --ground:#d9dcdf;
  --paper:#f5f6f7;
  --ink:#111315;
  --mute:#4d5561;
  --line:#b6bbc1;
  --cta:#c8102e;
  --display:'Bai Jamjuree',sans-serif;
  --body:'Sarabun',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:38px}
h2{font-size:30px}
h3{font-size:20px}
p{margin:0}
p,dd,figcaption{max-width:60ch}
.lead{font-size:20px;line-height:1.5}
.cap{font-size:14px;color:var(--mute);max-width:60ch}
.shell{width:min(1180px,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-transform:uppercase;letter-spacing:0.02em;text-decoration:none;padding:16px 24px;line-height:1.3;border:0;cursor:pointer}
.btn.ghost{background:var(--ink);color:var(--paper)}
.label{font-size:15px;font-weight:600;color:var(--mute)}

header{padding:0 20px;border-bottom:1px solid var(--line)}
header .shell{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:0.02em}
.brand svg{width:30px;height:30px}
nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;font-weight:600;font-size:15px}
nav a{text-decoration:none}
@media (max-width:820px){nav{display:none}}

section{padding:56px 20px}
.hero{padding-top:64px;padding-bottom:24px}
.hero h1{max-width:22ch}
.hero .lead{max-width:46ch;margin-top:20px;color:var(--mute)}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.angka{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--ink);padding-top:20px}
.angka b{display:block;font-family:var(--display);font-size:34px;line-height:1.1}
.angka span{display:block;font-size:14px;color:var(--mute);margin-top:4px}
@media (max-width:760px){.angka{grid-template-columns:1fr 1fr;gap:16px}}

/* the signature: one kVA scale every alternator sits on */
.skala{padding-top:24px}
.skala .rail{position:relative;height:190px;margin:44px 48px 0}
.skala .axis{height:2px;background:var(--ink)}
.skala .tick{position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.skala .tick i{display:block;width:2px;height:22px;background:var(--ink)}
.skala .tick.mid i{height:60px}
.skala .tick.tall i{height:135px}
.skala .tick b{font-family:var(--display);font-size:15px;white-space:nowrap}
.skala .tick small{font-size:14px;color:var(--mute);white-space:nowrap}
.skala .ends{display:flex;justify-content:space-between;margin-top:8px;padding-inline:48px}
@media (max-width:760px){.skala .rail,.skala .axis,.skala .ends{display:none}}
.skala ol.phone{display:none}
@media (max-width:760px){.skala ol.phone{display:grid;list-style:none;margin:20px 0 0;padding:0;gap:0;border-top:1px solid var(--ink)}.skala ol.phone li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}.skala ol.phone b{font-family:var(--display)}}

.foto{padding-top:0}
.foto ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.foto li{background:var(--paper);padding:16px}
.foto img{width:100%;height:auto;display:block}
.foto figcaption{font-size:14px;color:var(--mute);margin-top:8px;text-align:center;margin-inline:auto}
.foto figure{margin:0}
@media (max-width:900px){.foto ul{grid-template-columns:repeat(3,1fr)}.foto li:nth-child(n+4){display:none}}

.head{max-width:56ch;margin-bottom:24px}
.head h2{max-width:24ch}
.head p{margin-top:12px;color:var(--mute)}
.tscroll{overflow-x:auto;background:var(--paper);border:1px solid var(--line);padding:6px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-family:var(--display);font-size:14px;letter-spacing:0.04em;text-transform:uppercase;background:var(--ground)}
td:first-child{font-weight:600}
tbody tr:last-child td{border-bottom:0}
tr.grp td{background:var(--ground);font-family:var(--display);font-size:15px;padding-block:8px}
td.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
.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}}

.pakai dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pakai dl > div{background:var(--paper);padding:20px 22px}
.pakai dt{font-family:var(--display);font-size:19px;line-height:1.3}
.pakai dd{margin:6px 0 0;color:var(--mute)}
.pakai figure{margin:24px 0 0;background:var(--paper);border:1px solid var(--line);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.pakai img{width:100%;height:auto;display:block}
.pakai figcaption{font-size:14px;color:var(--mute)}
@media (max-width:760px){.pakai dl{grid-template-columns:1fr}.pakai figure{grid-template-columns:1fr}}

.masalah{background:var(--ink);color:var(--paper)}
.masalah .head p{color:var(--line)}
.masalah ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.masalah li{border-top:1px solid var(--mute);padding-top:16px}
.masalah li strong{display:block;font-family:var(--display);font-size:20px;line-height:1.3;margin-bottom:10px}
.masalah li span{color:var(--line)}
@media (max-width:760px){.masalah ul{grid-template-columns:1fr;gap:20px}}

.tentang .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.tentang table{background:var(--paper);border:1px solid var(--line)}
.tentang td{white-space:normal}
.tentang td:first-child{color:var(--mute);font-weight:400;width:38%}
.tentang figure{margin:24px 0 0;background:var(--paper);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}
@media (max-width:760px){.tentang .grid{grid-template-columns:1fr;gap:16px}}

.tanya ol{list-style:none;margin:0;padding:0;counter-reset:n;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tanya li{counter-increment:n;background:var(--paper);padding:20px 22px}
.tanya li::before{content:counter(n);font-family:var(--display);font-size:28px;font-weight:700;display:block;margin-bottom:6px}
.tanya li strong{display:block;font-size:17px;margin-bottom:6px}
.tanya li span{color:var(--mute);font-size:15px}
@media (max-width:900px){.tanya ol{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tanya ol{grid-template-columns:1fr}}

.faq dl{margin:0;max-width:760px}
.faq dt{font-family:var(--display);font-size:19px;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(--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);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-family:inherit;font-size:16px;line-height:1.5;padding:12px 14px;border:1px solid var(--line);background:var(--paper);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(--paper);border:1px solid var(--line)}
.lokasi td:first-child{color:var(--mute);font-weight:400;width:34%}
@media (max-width:760px){.lokasi .grid{grid-template-columns:1fr}.lokasi td{display:block;white-space:normal}.lokasi 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-block:80px}
.akhir h2{max-width:24ch}
.akhir .lead{max-width:48ch;margin-top:12px}
.akhir .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.akhir .cap{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(--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)}
@media (max-width:760px){footer .shell{grid-template-columns:1fr}}

@media (width >= 861px){h1{font-size:60px}h2{font-size:38px}section{padding-block:80px}.hero{padding-top:96px;padding-bottom:24px}.akhir{padding-block:112px}.skala{padding-top:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:700;font-display:swap;src:url(https://dieselmesin.com/wp-content/uploads/2026/09/font-bai-jamjuree-o02SuCgcva-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:'Bai Jamjuree';font-style:normal;font-weight:700;font-display:swap;src:url(https://dieselmesin.com/wp-content/uploads/2026/09/font-bai-jamjuree-lJo02SuCgQ-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:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url(https://dieselmesin.com/wp-content/uploads/2026/09/font-sarabun-n3YO5gjupg-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:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url(https://dieselmesin.com/wp-content/uploads/2026/09/font-sarabun-BVJn3YO5gg-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:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url(https://dieselmesin.com/wp-content/uploads/2026/09/font-sarabun-6yLUrwB0lw-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:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url(https://dieselmesin.com/wp-content/uploads/2026/09/font-sarabun-lss6yLUrwA-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: #111315;
  max-width: 20ch;
}
.entry-meta { color: #5b5b55; font-size: 'Sarabun',sans-serif; margin: 0; }

.entry-content { max-width: 68ch; color: #111315; font-size: 'Sarabun',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: #111315;
  line-height: 1.15;
  margin-top: 1.8em;
  margin-bottom: .5em;
}
.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: calc('Sarabun',sans-serif * 1.28); }
.entry-content h4 { font-size: calc('Sarabun',sans-serif * 1.1); }
.entry-content p { margin: 0; color: #111315; font-size: 'Sarabun',sans-serif; }
.entry-content a { color: #111315; 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: #c8102e;
}
.entry-content blockquote {
  margin: 1.6em 0; padding: 18px 22px;
  background: #f5f6f7; border-radius: 4px;
  font-size: calc('Sarabun',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('Sarabun',sans-serif * .88); margin-top: 8px; }
.entry-content code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .92em; background: #f5f6f7; padding: 2px 5px; border-radius: 3px;
}
.entry-content pre { background: #f5f6f7; 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 #b6bbc1; 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('Sarabun',sans-serif * .96); }
.entry-content th, .entry-content td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid #b6bbc1; 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 #b6bbc1; }
.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: #111315; 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: #111315; }
.entry-empty { color: #5b5b55; max-width: 60ch; }

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