/*
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.0.0
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}