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


:root{
  --sea:#0b2545;
  --deep:#071a33;
  --foam:#e4ecf5;
  --mist:#9fb3c8;
  --line:#25436a;
  --cta:#57d9b8;
  --white:#ffffff;
  --radius:4px;
  --display:'Bitter',Georgia,serif;
  --body:'Public Sans',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--sea);color:var(--foam);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;color:var(--white)}
h1{font-size:40px}
h2{font-size:30px}
h3{font-size:21px}
p{margin:0}
p,dd,figcaption{max-width:60ch}
.lead{font-size:20px;line-height:1.5;color:var(--mist)}
.cap{font-size:14px;color:var(--mist);max-width:64ch}
.shell{width:min(1140px,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(--deep);font-family:var(--body);font-weight:600;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(--white);border:1px solid var(--mist)}

header{padding:0 20px;background:var(--deep)}
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:21px;color:var(--white)}
.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;color:var(--foam)}
@media (max-width:800px){nav{display:none}}

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

/* the signature: the whole catalogue on one strip, the category as the big word */
.enam{padding-top:56px}
.enam .head{margin-bottom:24px}
.enam .tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);padding:4px}
.enam table{width:100%;border-collapse:collapse}
.enam th,.enam td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
.enam tbody tr:last-child td{border-bottom:0}
.enam th{font-family:var(--body);font-size:14px;color:var(--mist);font-weight:600}
.enam td.kat{font-family:var(--display);font-size:26px;color:var(--white);line-height:1.1;white-space:nowrap}
.enam td.kat small{display:block;font-family:var(--body);font-size:14px;color:var(--mist);margin-top:6px;white-space:normal}
.enam td img{width:72px;height:72px;display:block;background:var(--white);border-radius:var(--radius);object-fit:contain}
@media (max-width:700px){
  .enam thead{display:none}
  .enam tr{display:grid;grid-template-columns:72px 1fr;gap:4px 14px;padding:14px 8px;border-bottom:1px solid var(--line)}
  .enam tbody tr:last-child{border-bottom:0}
  .enam td{display:block;border-bottom:0;padding:0}
  .enam td:first-child{grid-row:1 / span 4}
  .enam td.kat{font-size:22px;white-space:normal}
  .enam td[data-k]::before{content:attr(data-k) ": ";color:var(--mist)}
}

.head{max-width:56ch;margin-bottom:28px}
.head h2{max-width:24ch}
.head p{margin-top:12px;color:var(--mist)}

.masalah ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.masalah li{background:var(--deep);border-radius:var(--radius);padding:24px}
.masalah li strong{display:block;font-family:var(--display);font-size:19px;line-height:1.3;color:var(--white);margin-bottom:10px}
.masalah li span{color:var(--mist)}
@media (max-width:760px){.masalah ul{grid-template-columns:1fr}}

.fitur dl{margin:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fitur dl > div{background:var(--sea);padding:22px}
.fitur dt{font-family:var(--display);font-size:19px;color:var(--white)}
.fitur dd{margin:8px 0 0;color:var(--mist)}
@media (max-width:900px){.fitur dl{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fitur dl{grid-template-columns:1fr}}

.pilih{background:var(--deep)}
.pilih .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pilih .grid > div{grid-column:1 / -1;max-width:760px}
.pilih ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px}
.pilih li{counter-increment:n;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.pilih li::before{content:counter(n);font-family:var(--display);font-size:26px;color:var(--cta);line-height:1}
.pilih li strong{display:block;color:var(--white)}
.pilih li span{color:var(--mist);font-size:15px}
.pilih figure{margin:0;background:var(--white);border-radius:var(--radius);padding:20px}
.pilih img{width:100%;height:auto;display:block;max-width:320px;margin-inline:auto}
.pilih figcaption{font-size:14px;color:var(--line);text-align:center;margin-top:8px;font-weight:600;margin-inline:auto}
@media (max-width:820px){.pilih .grid{grid-template-columns:1fr}}

.tentang .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.tentang table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tentang td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:16px}
.tentang tr:last-child td{border-bottom:0}
.tentang td:first-child{color:var(--mist);width:30%}
.tentang .rail{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tentang .rail li{border-top:1px solid var(--line);padding-top:10px}
.tentang .rail b{display:block;font-family:var(--display);font-size:30px;line-height:1.1;color:var(--white)}
.tentang .rail span{display:block;font-size:14px;color:var(--mist);margin-top:4px}
@media (max-width:760px){.tentang .grid{grid-template-columns:1fr;gap:16px}}

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

.kirim{background:var(--deep)}
.kirim .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.kirim form{display:grid;gap:14px;background:var(--sea);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;color:var(--foam)}
.kirim input,.kirim select,.kirim textarea{font-family:inherit;font-size:16px;line-height:1.5;padding:12px 14px;border:1px solid var(--mist);border-radius:var(--radius);background:var(--white);color:var(--deep);width:100%}
.kirim textarea{resize:vertical}
.kirim .status{font-size:14px;color:var(--mist);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:24px}
.lokasi table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lokasi th{font-family:var(--display);font-size:18px;color:var(--white);text-align:left;padding:16px 16px 8px}
.lokasi td{padding:10px 16px;border-top:1px solid var(--line)}
.lokasi td:first-child{color:var(--mist);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;border-top:0}}

.akhir{background:var(--deep);padding-block:80px}
.akhir h2{max-width:22ch}
.akhir .lead{max-width:46ch;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(--sea);border-top:1px solid var(--line);color:var(--mist);padding:40px 20px;font-size:15px}
footer .shell{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
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(--foam)}
@media (max-width:760px){footer .shell{grid-template-columns:1fr}}

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

@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;src:url(https://teknikindustri.com/wp-content/uploads/2026/09/font-bitter-pzveS5B3Nd-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:'Bitter';font-style:normal;font-weight:700;font-display:swap;src:url(https://teknikindustri.com/wp-content/uploads/2026/09/font-bitter-XXpzveS5Bw-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:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://teknikindustri.com/wp-content/uploads/2026/09/font-public-sans-J7QwOk1Fig-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:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://teknikindustri.com/wp-content/uploads/2026/09/font-public-sans-NGfJ7QwOk1-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: #e4ecf5;
  max-width: 20ch;
}
.entry-meta { color: #5b5b55; font-size: 'Public Sans',sans-serif; margin: 0; }

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

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