/*
Theme Name: Maheswara MTI
Theme URI: https://www.maheswaraindonesia.com
Author: Maheswara Teknologi Indonesia
Description: Custom WordPress theme (tanpa page builder) hasil konversi dari frontend Lovable/React "info-nexus-bloom". Products, Projects, dan Insights dikelola sebagai Custom Post Type.
Version: 1.3.2
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: maheswara-mti
*/

/* ===== 1. Reset (setara Tailwind v4 preflight yang dipakai versi Lovable) ===== */
*,::after,::before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:"Montserrat",sans-serif;-webkit-tap-highlight-color:transparent}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
:-moz-focusring{outline:auto}
progress{vertical-align:baseline}
summary{display:list-item}
ol,ul,menu{list-style:none}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}
button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}
[hidden]:where(:not([hidden=until-found])){display:none!important}
*,::after,::before{border-color:var(--border)}

/* ===== 2. Design tokens (identik dengan styles.css Lovable) ===== */
:root {
  --radius: 0.5rem;
  --background: oklch(0.975 0.012 150);
  --foreground: oklch(0.22 0.04 155);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.38 0.12 151);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.945 0.025 148);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.94 0.018 150);
  --muted-foreground: oklch(0.49 0.032 155);
  --accent: oklch(0.73 0.17 55);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.88 0.025 150);
  --input: oklch(0.88 0.025 150);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0;
  margin: 0;
}

/* ===== 3. Komponen (disalin 1:1 dari styles.css Lovable) ===== */
.home-hero { position: relative; min-height: 650px; margin-top: 40px; margin-bottom: 25px; overflow: hidden; border-radius: 8px; color: var(--primary-foreground); }
.home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.13 0.04 155 / 90%) 0%, oklch(0.15 0.04 155 / 50%) 58%, oklch(0.15 0.04 155 / 16%) 100%); }
.hero-copy { position: relative; z-index: 1; width: min(680px, 72%); padding: 82px 55px; }
.hero-brands { display: flex; align-items: center; gap: 12px; margin-bottom: 42px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.hero-brands span + span { padding-left: 12px; border-left: 1px solid oklch(1 0 0 / 36%); }
.hero-copy h1 { margin: 13px 0 20px; font-size: clamp(44px, 6vw, 78px); line-height: 1.04; }
.hero-copy p { max-width: 560px; font-size: 16px; line-height: 1.8; opacity: .82; }
.hero-copy b { display: block; margin: 25px 0; font-size: 11px; }
.hero-actions { display: flex; gap: 10px; }
.field-interface { position: absolute; right: 20px; bottom: 20px; z-index: 2; width: 270px; padding: 18px; border: 1px solid oklch(1 0 0 / 18%); border-radius: 8px; background: oklch(0.16 0.04 155 / 78%); backdrop-filter: blur(10px); }
.field-interface > div:first-child { display: flex; justify-content: space-between; font-size: 8px; }
.sensor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; }
.sensor-grid span { display: flex; min-height: 64px; flex-direction: column; justify-content: space-between; padding: 9px; border-radius: 6px; background: oklch(1 0 0 / 8%); font-size: 7px; }
.field-interface small { font-size: 7px; opacity: .6; }
.ecosystem-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; align-items: stretch; }
.ecosystem-main, .ecosystem-card { position: relative; padding: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.ecosystem-main { background: color-mix(in oklch, var(--primary) 76%, var(--card)); color: var(--primary-foreground); }
.ecosystem-main > span { position: absolute; top: 22px; right: 22px; border-radius: 99px; padding: 5px 8px; background: var(--accent); color: var(--foreground); font-size: 7px; text-transform: uppercase; }
.product-brand-logo { width: 94px; height: 72px; object-fit: contain; object-position: left center; }
.ecosystem-grid h3 { margin: 42px 0 8px; font-size: 24px; }
.ecosystem-grid b { color: var(--muted-foreground); font-size: 11px; font-weight: 500; }
.ecosystem-main b { color: oklch(0.85 0.025 150); }
.ecosystem-grid p { margin: 22px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.7; }
.ecosystem-main p { color: oklch(0.85 0.025 150); }
.problem-band { position: relative; overflow: hidden; padding: 80px 0; background: var(--primary); color: var(--primary-foreground); }
.problem-background, .problem-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.problem-background { object-fit: cover; }
.problem-shade { background: oklch(0.17 0.055 155 / 82%); }
.problem-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.problem-grid h2 { margin: 12px 0 0; font-size: 40px; line-height: 1.12; }
.problem-box { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid oklch(1 0 0 / 25%); border-radius: 8px; }
.problem-box > div { padding: 28px; }
.problem-box > div:last-child { background: oklch(1 0 0 / 14%); }
.problem-box span { color: var(--accent); font-size: 9px; text-transform: uppercase; }
.problem-box p { margin: 18px 0 0; font-size: 13px; line-height: 2.1; opacity: .76; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--background) 92%, transparent); backdrop-filter: blur(14px); }
.nav-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--foreground); text-decoration: none; flex: none; }
.brand > img { width: 52px; height: 42px; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { max-width: 180px; font-size: 11px; line-height: 1.2; }
.brand small { margin-top: 3px; font-size: 7px; color: var(--muted-foreground); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--muted-foreground); text-decoration: none; font-size: 13px; font-weight: 600; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.language { border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font-size: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 7px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid transparent; }
.button-primary { background: var(--primary); color: var(--primary-foreground); }
.button-secondary { background: color-mix(in oklch, var(--background) 12%, transparent); border-color: color-mix(in oklch, var(--primary-foreground) 36%, transparent); color: var(--primary-foreground); }
.button-orange { background: var(--accent); color: var(--foreground); }
.menu-button { display: none; border: 0; background: transparent; color: var(--foreground); }
.eyebrow { display: inline-block; color: var(--primary); font-size: 10px; line-height: 1.3; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.eyebrow.light { color: var(--accent); }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { letter-spacing: 0; }
.page-intro { padding: 92px 0 70px; border-bottom: 1px solid var(--border); }
.page-intro h1 { max-width: 850px; margin: 14px 0 20px; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; }
.page-intro p { max-width: 690px; margin-bottom: 0; color: var(--muted-foreground); font-size: 18px; line-height: 1.75; }
.section { padding: 92px 0; }
.section-alt { background: var(--muted); }
.section-head { display: grid; grid-template-columns: 1.35fr 1fr auto; align-items: end; gap: 32px; margin-bottom: 38px; }
.section-head h2 { margin: 9px 0 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; }
.section-head p { color: var(--muted-foreground); line-height: 1.75; margin-bottom: 0; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); text-decoration: none; font-size: 13px; font-weight: 800; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.content-card { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.content-card img { width: 100%; aspect-ratio: 1.55; object-fit: cover; display: block; }
.card-body { padding: 25px; }
.card-body h3, .article-card h3 { margin: 9px 0 12px; font-size: 21px; line-height: 1.25; }
.card-body p, .article-card p { color: var(--muted-foreground); font-size: 14px; line-height: 1.7; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; }
.tag-row span { border: 1px solid var(--border); border-radius: 99px; padding: 5px 8px; font-size: 9px; color: var(--muted-foreground); }
.article-list { border-top: 1px solid var(--border); }
.article-card { display: grid; grid-template-columns: 180px 1fr; gap: 26px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.article-image { overflow: hidden; border-radius: 7px; }
.article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card small { display: block; color: var(--muted-foreground); margin: 10px 0 18px; }
.consultation { position: relative; overflow: hidden; padding: 80px 0; background: var(--primary); color: var(--primary-foreground); }
.consultation-background, .consultation-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.consultation-background { object-fit: cover; }
.consultation-shade { background: linear-gradient(90deg, oklch(0.15 0.05 155 / 90%), oklch(0.17 0.05 155 / 72%)); }
.consultation-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; }
.consultation h2 { margin: 12px 0 0; font-size: clamp(38px, 5vw, 68px); line-height: 1.02; }
.consultation p { max-width: 520px; line-height: 1.7; opacity: .76; }
.footer { background: oklch(0.2 0.05 155); color: oklch(0.94 0.02 150); padding: 65px 0 25px; }
.footer .brand { color: inherit; }
.footer .brand small, .footer p, .footer span { color: oklch(0.74 0.025 150); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 70px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 12px; }
.footer-grid p { max-width: 370px; font-size: 13px; line-height: 1.7; margin: 12px 0 0; }
.footer-grid b { font-size: 11px; text-transform: uppercase; color: var(--accent); }
.footer-grid a { color: inherit; text-decoration: none; font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 20px; border-top: 1px solid oklch(1 0 0 / 12%); font-size: 10px; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted-foreground); }
.breadcrumb a { color: inherit; text-decoration: none; }
.detail-hero { padding: 40px 0 72px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 570px; border-radius: 8px; overflow: hidden; background: var(--primary); color: var(--primary-foreground); }
.detail-copy { padding: clamp(35px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.detail-copy h1 { margin: 15px 0 22px; font-size: clamp(38px, 5vw, 66px); line-height: 1.02; }
.detail-copy p { line-height: 1.75; opacity: .78; }
.detail-image { width: 100%; height: 100%; object-fit: cover; }
.detail-body { display: grid; grid-template-columns: 260px 1fr; gap: 70px; }
.detail-aside { align-self: start; position: sticky; top: 100px; border-top: 2px solid var(--primary); padding-top: 18px; }
.detail-aside b { display: block; margin-bottom: 14px; font-size: 11px; text-transform: uppercase; }
.detail-aside a { display: block; color: var(--muted-foreground); text-decoration: none; padding: 7px 0; font-size: 12px; }
.prose-section { padding-bottom: 58px; scroll-margin-top: 100px; }
.prose-section h2 { font-size: 34px; margin-bottom: 18px; }
.prose-section p { color: var(--muted-foreground); line-height: 1.85; font-size: 16px; }
.feature-grid, .spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.feature-item, .spec-item { border: 1px solid var(--border); background: var(--card); border-radius: 7px; padding: 20px; }
.feature-item { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; font-size: 13px; }
.feature-item span:first-child { color: var(--accent); }
.spec-item span { display: block; color: var(--muted-foreground); font-size: 10px; text-transform: uppercase; margin-bottom: 8px; }
.steps { counter-reset: step; border-top: 1px solid var(--border); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 55px 1fr; align-items: center; list-style: none; padding: 18px 0; border-bottom: 1px solid var(--border); font-weight: 700; }
.steps li::before { content: "0" counter(step); color: var(--accent); font-size: 11px; }
.related { border-top: 1px solid var(--border); }
.related-label { display: flex; align-items: center; gap: 8px; margin: 45px 0 18px; font-size: 13px; text-transform: uppercase; }
.notice { margin-top: 25px; border-left: 3px solid var(--accent); padding: 14px 18px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; line-height: 1.6; }
.detail-copy .notice { background: oklch(1 0 0 / 10%); color: inherit; }
.article-hero { padding: 50px 0 0; }
.article-hero .eyebrow { margin-top: 65px; }
.article-hero h1 { max-width: 950px; margin: 14px 0 20px; font-size: clamp(42px, 6vw, 76px); line-height: 1.04; }
.article-hero p { max-width: 700px; color: var(--muted-foreground); font-size: 18px; line-height: 1.7; }
.article-hero small { color: var(--muted-foreground); }
.article-hero img { display: block; width: 100%; max-height: 600px; object-fit: cover; margin-top: 42px; border-radius: 8px; }
.article-lead { margin: 0 0 65px; font-size: 24px; line-height: 1.65; color: var(--foreground); }
.about-statement { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.about-statement h2 { margin: 10px 0 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; }
.about-copy p { color: var(--muted-foreground); font-size: 16px; line-height: 1.85; }
.about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-pillar { border-top: 2px solid var(--primary); padding: 24px 0; }
.about-pillar svg { color: var(--accent); }
.about-pillar h3 { margin: 24px 0 10px; font-size: 20px; }
.about-pillar p { color: var(--muted-foreground); font-size: 13px; line-height: 1.75; }
.brand-architecture { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.company-panel, .product-panel { min-height: 330px; padding: 35px; border-radius: 8px; }
.company-panel { background: var(--card); border: 1px solid var(--border); }
.product-panel { background: var(--primary); color: var(--primary-foreground); }
.company-panel img, .product-panel img { display: block; width: 130px; height: 90px; object-fit: contain; object-position: left center; margin-bottom: 38px; }
.company-panel h3, .product-panel h3 { margin-bottom: 12px; font-size: 25px; }
.company-panel p, .product-panel p { max-width: 520px; color: var(--muted-foreground); font-size: 14px; line-height: 1.75; }
.product-panel p { color: color-mix(in oklch, var(--primary-foreground) 76%, transparent); }
.company-facts { display: grid; gap: 10px; margin-top: 36px; }
.company-facts span { display: grid; grid-template-columns: 20px 110px 1fr; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 12px; }
.company-facts svg { color: var(--accent); }
.company-facts b { color: var(--foreground); }
.vision-copy { border-left: 3px solid var(--accent); padding-left: 18px; color: var(--foreground) !important; font-weight: 600; }
.contact-strip { border-top: 1px solid var(--border); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.contact-grid h2 { max-width: 590px; margin: 10px 0 0; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; }
.contact-grid > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-grid a { color: var(--primary); font-weight: 700; text-decoration: none; }
.contact-grid p { max-width: 460px; color: var(--muted-foreground); line-height: 1.7; }

@media (max-width: 800px) {
  .home-hero { min-height: 720px; margin-top: 14px; }
  .hero-copy { width: auto; padding: 55px 25px; }
  .hero-brands { margin-bottom: 28px; }
  .field-interface { left: 20px; width: auto; }
  .ecosystem-grid, .problem-grid, .problem-box, .about-statement, .about-pillars, .brand-architecture, .contact-grid { grid-template-columns: 1fr; }
  .shell { width: min(100% - 28px, 1180px); }
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; padding: 22px; background: var(--background); border-bottom: 1px solid var(--border); flex-direction: column; align-items: flex-start; }
  .nav-links.is-open { display: flex; }
  .language, .nav-actions .button { display: none; }
  .menu-button { display: block; }
  .page-intro { padding: 64px 0 48px; }
  .section { padding: 65px 0; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .article-card { grid-template-columns: 110px 1fr; gap: 16px; }
  .consultation-grid, .footer-grid, .detail-grid, .detail-body { grid-template-columns: 1fr; }
  .footer-grid { gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .detail-grid { min-height: 0; }
  .detail-copy { order: 2; }
  .detail-image { aspect-ratio: 1.4; }
  .detail-body { gap: 40px; }
  .detail-aside { position: static; }
  .feature-grid, .spec-grid { grid-template-columns: 1fr; }
}


/* ===== 4. Tambahan khusus WordPress (tidak mengubah tampilan) ===== */
.menu-button .icon-close{display:none}
.menu-button[aria-expanded="true"] .icon-open{display:none}
.menu-button[aria-expanded="true"] .icon-close{display:block}
.mti-404{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--background);padding-inline:1rem}
.mti-404-inner{max-width:28rem;text-align:center}
.mti-404 h1{font-size:4.5rem;line-height:1;font-weight:700;color:var(--foreground)}
.mti-404 h2{margin-top:1rem;font-size:1.25rem;line-height:1.4;font-weight:600;color:var(--foreground)}
.mti-404 p{margin-top:.5rem;font-size:.875rem;line-height:1.43;color:var(--muted-foreground)}
.mti-404 .mti-404-btn{margin-top:1.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:var(--primary);padding:.5rem 1rem;font-size:.875rem;line-height:1.43;font-weight:500;color:var(--primary-foreground);transition:color,background-color .15s cubic-bezier(.4,0,.2,1)}
.mti-404 .mti-404-btn:hover{background:color-mix(in oklab,var(--primary) 90%,transparent)}
.wp-generic{padding-bottom:92px}
.wp-generic .entry{max-width:760px;color:var(--muted-foreground);line-height:1.85;font-size:16px}
.wp-generic .entry p{margin-bottom:1em}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ===== 5. Revisi klien (lanjutan) ===== */
/* Pilihan bahasa ID / EN */
.language a { color: inherit; }
.language a.is-active { color: var(--primary); font-weight: 800; }
.language-mobile { display: none; }
/* Logo & nama perusahaan di header/footer dibesarkan */
.nav-wrap { min-height: 94px; }
.brand { gap: 14px; }
.brand > img { width: 98px; height: 68px; }
.brand strong { max-width: none; white-space: nowrap; font-size: 14.5px; line-height: 1.2; }
.brand small { margin-top: 4px; font-size: 10.5px; }
/* Footer: logo & nama lebih besar lagi */
.footer .brand { gap: 14px; }
.footer .brand > img { width: 84px; height: 58px; }
.footer .brand strong { max-width: none; white-space: nowrap; font-size: 15px; }
.footer .brand small { margin-top: 4px; font-size: 11px; }
@media (max-width: 1100px) { .brand strong { white-space: normal; max-width: 190px; } }

/* Aksen hijau halus di seluruh halaman */
body {
  background-image:
    radial-gradient(60rem 26rem at 0% -3%, oklch(0.9 0.07 150 / 55%), transparent 70%),
    radial-gradient(46rem 24rem at 100% 560px, oklch(0.92 0.06 155 / 45%), transparent 70%),
    radial-gradient(oklch(0.4 0.1 150 / 9%) 1px, transparent 1.3px);
  background-size: auto, auto, 26px 26px;
  background-repeat: no-repeat, no-repeat, repeat;
}
.site-header { position: sticky; border-top: 3px solid var(--primary); border-bottom-color: color-mix(in oklch, var(--primary) 22%, var(--border)); background: linear-gradient(90deg, oklch(0.985 0.008 100) 0%, oklch(0.955 0.04 130) 30%, oklch(0.9 0.07 138) 62%, oklch(0.76 0.09 150) 100%); }
/* Latar header: header-pattern.svg (1600x100) direntangkan penuh selebar header; sisi kiri sudah terang sehingga logo & menu tetap terbaca */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(assets/images/header-pattern.svg) center / 100% 100% no-repeat; }
/* Tablet & mobile: gambar di-zoom memenuhi header (cover) mengikuti ukuran layar; sisi kiri dipudarkan putih agar area logo tetap putih seperti di desktop */
@media (max-width: 1100px) { .site-header::before { background: linear-gradient(90deg, rgb(255 255 255 / 96%) 0%, rgb(255 255 255 / 0%) 55%), url(assets/images/header-pattern.svg) 80% center / cover no-repeat; } }
.site-header > .nav-wrap { position: relative; z-index: 1; }
.eyebrow:not(.light)::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--primary); }
.section-alt { border-block: 1px solid color-mix(in oklch, var(--primary) 12%, transparent); }
.home-hero, .page-hero-card { box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 22%, transparent), 0 22px 44px -22px color-mix(in oklch, var(--primary) 50%, transparent); }
.footer { border-top: 3px solid var(--primary); background-image: linear-gradient(180deg, oklch(0.26 0.07 152), oklch(0.2 0.05 155) 140px); }
/* Logo Swara Tani di kartu ekosistem dibesarkan */
.product-brand-logo { width: 150px; height: 112px; }
/* Logo Maheswara + Swara Tani berdampingan di hero beranda */
.hero-brands { gap: 0; margin-bottom: 36px; }
.hero-logos { display: inline-flex; align-items: center; gap: 22px; padding: 12px 22px; border-radius: 12px; background: oklch(1 0 0 / 94%); }
.hero-logos img { height: 64px; width: auto; max-width: 150px; object-fit: contain; }
.hero-logos i { display: block; width: 1px; height: 46px; background: oklch(0.5 0.03 155 / 30%); }
/* Tag/lingkaran di hero detail produk: putih agar terbaca di latar hijau */
.detail-copy .tag-row span { border-color: oklch(1 0 0 / 45%); color: #fff; }
/* Hero bergambar untuk halaman dalam (Produk, Proyek, Wawasan, Tentang Kami) */
.page-hero-section { padding-top: 40px; }
.page-hero-card { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 460px; border-radius: 8px; color: var(--primary-foreground); }
.page-hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.13 0.04 155 / 90%) 0%, oklch(0.15 0.04 155 / 72%) 55%, oklch(0.15 0.04 155 / 40%) 100%); }
.page-hero-copy { position: relative; z-index: 1; max-width: 780px; padding: 82px 55px; }
.page-hero-copy h1 { margin: 14px 0 20px; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; }
.page-hero-copy p { max-width: 690px; color: oklch(1 0 0 / 88%); font-size: 18px; line-height: 1.75; }
/* Widget chat AI */
.mti-bot { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-size: 13px; }
.mti-bot-toggle { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 16px; border: 0; border-radius: 99px; background: var(--primary); color: var(--primary-foreground); font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 10px 30px oklch(0.2 0.05 155 / 35%); }
.mti-bot-toggle:hover { background: color-mix(in oklch, var(--primary) 88%, white); }
.mti-bot-panel { position: absolute; right: 0; bottom: 68px; display: flex; flex-direction: column; width: min(380px, calc(100vw - 28px)); height: min(560px, calc(100vh - 130px)); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--foreground); box-shadow: 0 24px 60px oklch(0.2 0.05 155 / 28%); }
.mti-bot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--primary); color: var(--primary-foreground); }
.mti-bot-head strong { display: block; font-size: 14px; }
.mti-bot-head small { display: block; margin-top: 2px; font-size: 10px; opacity: .8; }
.mti-bot-close { display: flex; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 4px; }
.mti-bot-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; background: var(--background); }
.mti-msg { max-width: 86%; padding: 10px 13px; border-radius: 12px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; }
.mti-msg.bot { align-self: flex-start; border: 1px solid var(--border); background: var(--card); }
.mti-msg.user { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); }
.mti-msg a { text-decoration: underline; font-weight: 700; }
.mti-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mti-chips button { border: 1px solid var(--border); border-radius: 99px; background: var(--card); padding: 6px 10px; font-size: 11px; color: var(--primary); cursor: pointer; }
.mti-bot-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--card); }
.mti-bot-form input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; background: var(--background); }
.mti-bot-form button { display: flex; align-items: center; justify-content: center; width: 42px; border: 0; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); cursor: pointer; }
.mti-bot-form button:disabled { opacity: .5; cursor: default; }
.mti-bot-note { padding: 0 14px 12px; background: var(--card); font-size: 10px; line-height: 1.5; color: var(--muted-foreground); }
.mti-bot-note a { color: var(--primary); font-weight: 700; text-decoration: underline; }

@media (max-width: 800px) {
  .nav-wrap { min-height: 80px; }
  .nav-links { top: 80px; }
  .brand { gap: 10px; }
  .brand > img { width: 70px; height: 50px; }
  .brand strong { max-width: 160px; font-size: 13px; }
  .brand small { font-size: 10px; }
  .footer .brand > img { width: 70px; height: 50px; }
  .footer .brand { max-width: 100%; }
  .footer .brand > img { flex: none; }
  .footer .brand > span { min-width: 0; }
  .footer .brand strong { max-width: none; white-space: nowrap; font-size: clamp(10px, 3.6vw, 14px); }
  .footer .brand small { font-size: 10px; }
  .hero-logos { gap: 14px; padding: 10px 14px; }
  .hero-logos img { height: 48px; max-width: 110px; }
  .page-hero-section { padding-top: 14px; }
  .page-hero-card { min-height: 0; }
  .page-hero-copy { padding: 55px 25px; }
  .mti-bot { right: 14px; bottom: 14px; }
  .mti-bot-toggle span { display: none; }
  .mti-bot-toggle { width: 54px; padding: 0; justify-content: center; }
}

@media (max-width: 800px) {
  /* Hero beranda: panel Live Field Interface tidak lagi menimpa tombol */
  .home-hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 55px 25px 28px; }
  .field-interface { position: relative; right: auto; bottom: auto; left: auto; z-index: 2; width: auto; margin: 0 20px 20px; }
  /* Pilihan bahasa dipindah ke dalam menu mobile */
  .nav-links .language-mobile { display: inline-block; margin-top: 6px; font-size: 12px; }
}
/* Mobile & tablet (menu collapse): nama perusahaan di header satu baris, sejajar dengan logo; ukuran huruf menyesuaikan lebar layar */
@media (max-width: 800px) {
  .nav-wrap { gap: 12px; }
  .brand { min-width: 0; }
  .brand > img { flex: none; }
  .brand > span { min-width: 0; }
  .brand strong { max-width: none; white-space: nowrap; font-size: clamp(10px, 3.3vw, 14px); }
}