/*
Theme Name: Meterin
Theme URI: https://meterin.id
Author: voyajers.com
Author URI: https://voyajers.com/
Description: Custom WooCommerce theme for Meterin — IoT smart metering solutions. Red/white/ink design system with WooCommerce integration.
Version: 1.7.7
Text Domain: meterin
*/

/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
  --red: #D92B2B;
  --red-dark: #B81E1E;
  --red-tint: #FCE9E9;
  --ink: #14151A;
  --navy: #12141C;
  --steel: #6B6E76;
  --line: #ECEBE8;
  --white: #FFFFFF;
  --paper: #FAFAF9;
  --ok: #22C55E;
  --cyan: #00BCD4;
  --cyan-dark: #00A5B8;
  --radius: 12px;
  --font-body: 'Inter', sans-serif;
  --font-head: 'Poppins', 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* Brand headings use the rounded Poppins face (Microthings "Sensor to Cloud" feel) */
h1, h2, h3, .hero-inner h1, .meterin-hero__content h1 { font-family: var(--font-head); }

*{ box-sizing:border-box; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--white); line-height:1.5; margin:0; -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.container{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* =========================================================
   2. IoT MOTIFS — circuit texture, pulse, connectors, mono data
   ========================================================= */

/* dotted circuit-node background, used on dark sections */
.bg-circuit{
  position:relative;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* live/pulsing status dot */
.pulse-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.pulse-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--ok); opacity:0.6;
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(0.6); opacity:0.7; }
  100%{ transform:scale(1.8); opacity:0; }
}
.pulse-dot.red{ background:var(--red); }
.pulse-dot.red::after{ border-color:var(--red); }

/* hex/ring icon container — "network node" feel */
.icon-node{
  width:44px; height:44px; border-radius:10px;
  background:var(--red-tint); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; position:relative;
}
.icon-node::after{
  content:""; position:absolute; inset:-4px; border-radius:12px;
  border:1px dashed rgba(217,43,43,0.35); pointer-events:none;
}

/* dotted connector line between steps */
.connector{ flex:1; height:1px; margin-top:26px; background-image: linear-gradient(90deg, var(--line) 40%, transparent 0%); background-size:8px 1px; background-repeat:repeat-x; position:relative; }
.connector::after{ content:"›"; position:absolute; right:-2px; top:-10px; color:var(--line); font-size:16px; }

/* mono data figures — prices, readings, order numbers */
.data-mono{ font-family:var(--font-mono); font-variant-numeric: tabular-nums; }

/* =========================================================
   3. LAYOUT PRIMITIVES (header/hero/etc — carried from prototype)
   ========================================================= */
.eyebrow{ color:var(--red); font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:13px 22px; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.btn-primary{ background:var(--red); color:var(--white); }
.btn-primary:hover{ background:var(--red-dark); }
.btn-ghost{ background:transparent; color:var(--ink); }
.section{ padding:72px 0; }

header.site-header{ border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--white); z-index:20; }
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 32px; max-width:1180px; margin:0 auto; position:relative; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; font-family:var(--font-head); }
.logo .mark{ width:28px; height:28px; background:var(--red); border-radius:7px; transform:rotate(45deg); display:flex; align-items:center; justify-content:center; }
.logo .mark span{ transform:rotate(-45deg); color:#fff; font-weight:800; font-size:15px; }
/* Uploaded logo — height comes from Customizer (Site Identity): --logo-h / --logo-h-m */
.logo--image{ line-height:0; flex:0 1 auto; min-width:0; }
.logo--image .custom-logo-link{ display:inline-flex; align-items:center; }
.logo--image img,
.logo--image .custom-logo{ height:var(--logo-h,40px); width:auto; max-width:100%; max-height:none; }

/* Primary nav — centered, red active underline, red hover */
.nav-links{ display:flex; gap:34px; font-size:14px; font-weight:600; list-style:none; margin:0 auto; padding:0; }
.nav-links a{ position:relative; padding:6px 0; color:var(--ink); transition:color .15s ease; }
.nav-links a:hover{ color:var(--red); }
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a,
.nav-links li.current_page_parent > a,
.nav-links li.current-menu-parent > a,
.nav-links li.current-menu-ancestor > a,
.nav-links li.current-post-ancestor > a,
.nav-links a.current{ color:var(--red); }
.nav-links li.current-menu-item > a::after,
.nav-links li.current_page_item > a::after,
.nav-links li.current_page_parent > a::after,
.nav-links li.current-menu-parent > a::after,
.nav-links li.current-menu-ancestor > a::after,
.nav-links li.current-post-ancestor > a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red); border-radius:2px; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-icon{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--ink); position:relative; }
.header-icon svg{ width:22px; height:22px; }
.header-cart .cart-count{ position:absolute; top:-7px; right:-9px; background:var(--red); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* Header CTA button (design: "Contact Us →") */
.header-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; font-weight:700; font-size:14px; padding:11px 20px; border-radius:8px; white-space:nowrap; transition:background .15s ease; }
.header-cta:hover{ background:var(--red-dark); }
.header-cta svg{ width:16px; height:16px; }

.hamburger{ display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; }
.hamburger span{ width:22px; height:2px; background:var(--ink); }

footer.site-footer{ background:var(--navy); color:#B8BAC2; padding:60px 0 24px; margin-top:20px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-grid h4{ color:var(--white); font-size:13px; margin-bottom:16px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13px; padding:0; margin:0; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:20px; font-size:12px; flex-wrap:wrap; gap:10px; }

/* Footer logo — height from Customizer (Site Identity): --footer-logo-h */
.footer-logo{ display:inline-flex; align-items:center; margin-bottom:12px; color:#fff; }
.footer-logo.logo{ gap:10px; }
.footer-logo--image{ line-height:0; }
.footer-logo img,
.footer-logo .footer-logo__img{ display:block; height:var(--footer-logo-h,36px); width:auto; max-width:100%; }
.footer-logo--white img{ filter:brightness(0) invert(1); }
.footer-tagline{ font-size:14px; line-height:1.6; margin:0; }
.footer-grid a,
.footer-bottom a{ color:inherit; transition:color .15s ease; }
.footer-grid a.footer-logo{ color:#fff; }
.footer-grid a:hover,
.footer-bottom a:hover{ color:var(--white); }
.footer-legal .sep{ margin:0 6px; opacity:.6; }

/* Nav drawer wrapper: invisible on desktop (nav stays inline in the header row) */
.nav-drawer{ display:contents; }
.nav-drawer__head,
.nav-drawer__search,
.nav-drawer__account,
.nav-overlay{ display:none; }

@media (max-width:860px){
  /* Header row: hamburger (left) | logo (center) | cart (right) */
  .nav-row{
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
    gap:8px; padding:8px 16px;
  }
  .hamburger{
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    grid-column:1; grid-row:1; justify-self:start; width:44px; height:44px; margin-left:-10px; padding:0;
  }
  .nav-row > .logo{ grid-column:2; grid-row:1; justify-self:center; margin:0; }
  .header-actions{ grid-column:3; grid-row:1; justify-self:end; gap:0; margin:0; }
  .logo--image img,
  .logo--image .custom-logo{ height:var(--logo-h-m,32px); }

  /* Search + account live inside the drawer on mobile */
  .header-icon--desk,
  .header-cta,
  .header-search{ display:none !important; }

  /* Side drawer (slides in from the left, full height) */
  .nav-drawer{
    display:flex; flex-direction:column;
    position:fixed; top:var(--wp-admin--admin-bar--height,0px); bottom:0; left:0; width:min(86vw,340px);
    background:var(--white); z-index:1001; overflow-y:auto; overscroll-behavior:contain;
    box-shadow:0 0 40px rgba(0,0,0,0.20);
    transform:translateX(-100%); visibility:hidden;
    transition:transform .28s ease, visibility 0s linear .28s;
  }
  .nav-drawer.is-open{ transform:none; visibility:visible; transition:transform .28s ease; }

  .nav-drawer__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; border-bottom:1px solid var(--line);
  }
  .nav-drawer__close{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-right:-8px;
    background:transparent; border:none; border-radius:8px; color:var(--ink); cursor:pointer;
  }
  .nav-drawer__close:hover{ background:var(--paper); color:var(--red); }
  .nav-drawer__close svg{ width:22px; height:22px; }

  .nav-drawer__search{ display:flex; gap:8px; padding:16px 20px 8px; }
  .nav-drawer__search input[type="search"]{
    flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:11px 14px;
    font-size:14px; font-family:var(--font-body); background:#fff;
  }
  .nav-drawer__search input[type="search"]:focus{ border-color:var(--red); outline:none; }
  .nav-drawer__search button{
    flex:0 0 auto; width:44px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--red); color:#fff; border:none; border-radius:8px; cursor:pointer;
  }
  .nav-drawer__search button:hover{ background:var(--red-dark); }
  .nav-drawer__search svg{ width:18px; height:18px; }

  .nav-drawer .nav-links{
    display:flex; flex-direction:column; gap:0; margin:0; padding:8px 20px; font-size:16px;
  }
  .nav-drawer .nav-links li{ padding:0; border-bottom:1px solid var(--line); }
  .nav-drawer .nav-links > li > a{ display:block; padding:14px 0; }
  /* Active item: red text only (no desktop underline) */
  .nav-drawer .nav-links :is(.current-menu-item,.current_page_item,.current_page_parent,.current-menu-parent,.current-menu-ancestor,.current-post-ancestor):not(.menu-item-has-children) > a::after{ display:none; }

  .nav-drawer__account{
    display:flex; align-items:center; gap:10px; margin:auto 20px 0; padding:16px 0;
    border-top:1px solid var(--line); font-weight:600; font-size:15px; color:var(--ink);
  }
  .nav-drawer__account svg{ width:20px; height:20px; }
  .nav-drawer__account:hover{ color:var(--red); }

  /* Dark backdrop behind the drawer */
  .nav-overlay{
    display:block; position:fixed; inset:0; background:rgba(17,20,28,0.5); z-index:1000;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;
  }
  .nav-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease; }

  /* Lock page scroll while open; hide the floating WhatsApp bubble so it doesn't sit on top */
  html.nav-open,
  html.nav-open body{ overflow:hidden; }
  html.nav-open .wa-float{ display:none; }

  .footer-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   3b. HOMEPAGE SECTIONS (design-system classes reused by the Meterin Core Elementor widgets)
   Layout via core wp:columns; these rules style the inner content.
   ========================================================= */
.section-alt{ background:var(--paper); }
.wp-block-group.section{ padding:72px 0; }
.wp-block-group.hero{ background:var(--paper); padding:0; }
.eyebrow{ color:var(--red); font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }

/* Gutenberg button → primary red (fixes double-button issue) */
.wp-block-button__link{ background:var(--red); color:#fff; font-weight:700; font-size:14px; padding:13px 24px; border-radius:8px; }
.wp-block-button__link:hover{ background:var(--red-dark); color:#fff; }
.wp-block-button.is-style-white .wp-block-button__link{ background:#fff; color:var(--red); }
.wp-block-button.is-style-white .wp-block-button__link:hover{ background:#f3f3f2; color:var(--red); }

/* Hero */
.hero-inner{ padding:60px 0; }
.hero-inner h1{ font-size:44px; font-weight:800; line-height:1.15; margin-bottom:16px; }
.hero-inner p{ color:var(--steel); font-size:15px; max-width:420px; margin-bottom:26px; }
.hero-visual{ position:relative; }
.hero-photo{ height:340px; border-radius:16px; background:linear-gradient(135deg,#3a3f4b,#14151a 70%); }
.float-card{ position:absolute; background:var(--white); border-radius:10px; padding:12px 16px; box-shadow:0 12px 28px rgba(0,0,0,0.12); font-size:12px; margin:0; }
.float-card p{ margin:0; }
.float-card.status{ top:24px; left:24px; display:flex; align-items:center; gap:8px; }
.float-card.status p{ display:flex; align-items:center; gap:8px; }
.float-card.temp{ bottom:24px; left:24px; }

/* Feature strip — IoT "data pipeline" style: pulsing nodes on a dotted line */
.feature-strip{ padding:52px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; }
.feature-strip .wp-block-columns{ position:relative; }
/* dotted connecting line running behind the node row */
.feature-strip .wp-block-columns::before{
  content:""; position:absolute; top:22px; left:8%; right:8%; height:2px;
  background-image:linear-gradient(90deg, var(--line) 60%, transparent 0);
  background-size:10px 2px; background-repeat:repeat-x; z-index:0;
}
.feature-item{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; position:relative; z-index:1; }
.feature-item .icon-node{
  width:46px; height:46px; border-radius:50%; margin:0; background:#fff;
  border:2px solid var(--red); box-shadow:0 0 0 6px var(--white); position:relative;
}
.feature-item .icon-node[class*="icon-"]::before{ width:20px; height:20px; position:relative; z-index:1; }
/* live pulse ring on the node (reuse ::after, override the square-ring default) */
.feature-item .icon-node::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--red); opacity:.5; background:none;
  animation:meterin-node-pulse 2.4s ease-out infinite;
}
@keyframes meterin-node-pulse{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.7); opacity:0; } }
.feature-text{ font-size:13px; color:var(--steel); margin:0; }
.feature-text strong{ display:block; font-size:15px; color:var(--ink); margin-bottom:4px; }

@media (max-width:781px){
  .feature-strip .wp-block-columns::before{ display:none; }
  .feature-item{ flex-direction:row; align-items:flex-start; }
}

/* Solutions cards */
.sol-card{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; height:100%; }
.sol-card h3{ font-size:15px; font-weight:700; margin:0 0 8px; }
.sol-card p{ font-size:13px; color:var(--steel); margin:0 0 6px; }
.sol-card .link{ margin-top:auto; }
.sol-card .link a{ font-size:13px; font-weight:700; color:var(--red); }
.icon-node{ margin:0 0 16px; }

/* Case studies */
.case-main{ border-radius:var(--radius); overflow:hidden; position:relative; min-height:360px; background:linear-gradient(160deg,#2b3a2f,#0f1610); display:flex; flex-direction:column; justify-content:flex-end; }
.case-main .tag{ position:absolute; top:20px; left:20px; background:var(--white); font-size:11px; font-weight:700; padding:6px 12px; border-radius:20px; margin:0; }
.case-main .content{ padding:26px; background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent); color:var(--white); }
.case-main .content h3{ font-size:20px; font-weight:800; margin-bottom:8px; max-width:300px; }
.case-main .content a{ color:var(--white); font-weight:700; font-size:13px; }
.case-small{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:20px; }
.case-small .tag{ font-size:10px; color:var(--steel); font-weight:600; margin:0 0 6px; text-transform:uppercase; letter-spacing:.03em; }
.case-small .title{ font-size:14px; margin:0 0 8px; }
.case-small a{ font-size:12px; font-weight:700; color:var(--red); }

/* Partners */
.partner-row{ opacity:0.55; margin-top:20px; gap:24px; }
.partner-row p{ font-weight:800; font-size:16px; color:var(--ink); margin:0; }

/* Process */
.process-step{ text-align:center; }
.process-step p{ font-size:12px; color:var(--steel); margin:0; }
.process-step p strong{ display:block; font-size:14px; color:var(--ink); margin-bottom:4px; }
.process-step .icon-node{ margin:0 auto 14px; }

/* CTA band */
.cta-band{ background:linear-gradient(120deg, var(--red-dark), var(--red)); border-radius:20px; padding:44px; color:var(--white); margin:60px 0; }
.cta-band h2{ font-size:26px; font-weight:800; margin-bottom:8px; color:#fff; }
.cta-band p{ font-size:14px; opacity:0.9; margin:0; color:#fff; }

/* mobile: WooCommerce/columns already stack via core; extra tweaks */
@media (max-width:781px){
  .hero-inner{ padding:36px 0; }
  .hero-inner h1{ font-size:32px; }
  .cta-band{ padding:32px 24px; }
}

/* =========================================================
   3c. ABOUT / CONTACT SECTIONS
   ========================================================= */
/* About intro */
.about-intro h2{ font-size:30px; font-weight:800; line-height:1.2; }
.about-intro p{ color:var(--steel); font-size:15px; }

/* Stats */
.stats-row .stat-item{ text-align:center; }
.stat-num{ font-family:var(--font-mono); font-size:40px; font-weight:600; color:var(--ink); margin:0; }
.stat-num span{ color:var(--red); }
.stat-label{ font-size:13px; color:var(--steel); margin:6px 0 0; }

/* Mission / Vision */
.mv-card{ border:1px solid var(--line); border-radius:var(--radius); padding:32px; height:100%; }
.mv-card h3{ font-size:18px; font-weight:800; margin:16px 0 10px; }
.mv-card p{ font-size:14px; color:var(--steel); margin:0; }

/* Team */
.team-card{ text-align:center; }
.team-photo{ aspect-ratio:1/1; border-radius:var(--radius); background:linear-gradient(160deg,#3a3f4b,#14151a); margin-bottom:14px; }
.team-name{ font-size:15px; margin:0; }
.team-role{ font-size:13px; color:var(--red); font-weight:600; margin:2px 0 0; }

/* Contact */
.contact-info{ margin-top:24px; }
.contact-info p{ font-size:14px; color:var(--steel); margin:0 0 14px; }
.contact-info p strong{ display:block; color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.contact-form-box{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--paper); }
.contact-form-box > p:first-child strong{ font-size:16px; }
.form-note{ font-size:13px; color:var(--steel); margin-top:8px; }
/* generic form field styling for any form plugin dropped into the form box */
.contact-form-box input[type="text"],
.contact-form-box input[type="email"],
.contact-form-box input[type="tel"],
.contact-form-box textarea,
.contact-form-box select{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  font-family:var(--font-body); font-size:14px; margin-bottom:14px; background:#fff;
}
.contact-form-box input:focus,
.contact-form-box textarea:focus,
.contact-form-box select:focus{ border-color:var(--red); outline:none; }
.contact-form-box input[type="submit"],
.contact-form-box button[type="submit"]{
  background:var(--red); color:#fff; border:none; border-radius:8px; padding:14px 26px;
  font-weight:700; font-size:14px; cursor:pointer; width:auto;
}
.contact-form-box input[type="submit"]:hover,
.contact-form-box button[type="submit"]:hover{ background:var(--red-dark); }

/* =========================================================
   4. WOOCOMMERCE — shop loop / product card
   ========================================================= */
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; padding:0; margin:0 0 40px; }
/* Undo WooCommerce's float layout (we use CSS grid): its clearfix pseudo-elements
   would become grid cells and its 22% widths/margins would shrink the cards. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; display:none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product{ width:auto !important; float:none !important; margin:0 !important; }

.woocommerce ul.products li.product{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:0; text-align:left; position:relative; overflow:hidden;
  display:flex; flex-direction:column; background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link{ display:block; flex:1; }
.woocommerce ul.products li.product:hover{ border-color:var(--red); box-shadow:0 8px 24px rgba(20,21,26,0.06); }
.woocommerce ul.products li.product img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; margin:0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-head); font-size:14px; font-weight:700; line-height:1.35; padding:0; margin:6px 16px 4px; color:var(--ink);
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--red);
  margin:0 16px 14px; display:block;
}
.woocommerce ul.products li.product .price del{ color:var(--steel); font-weight:400; opacity:.7; margin-right:6px; }
.woocommerce ul.products li.product .button{
  margin:0 16px 16px; align-self:flex-start; display:inline-flex; background:var(--ink); color:var(--white);
  font-size:12px; font-weight:700; padding:10px 16px; border-radius:6px; line-height:1.2;
}
.woocommerce ul.products li.product .button:hover{ background:var(--red); }
.woocommerce ul.products li.product .onsale{
  position:absolute; top:12px; left:12px; background:var(--red); color:#fff;
  font-size:10px; font-weight:700; padding:4px 9px; border-radius:20px; text-transform:uppercase;
}
.woocommerce ul.products li.product .star-rating{ margin:14px 16px 0; font-size:12px; color:#F5A623; }


@media (max-width:860px){
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   5. WOOCOMMERCE — single product
   ========================================================= */
.woocommerce div.product .price{ font-family:var(--font-mono); font-size:24px; color:var(--red); font-weight:700; }
.woocommerce div.product form.cart .button{
  background:var(--red); color:#fff; font-weight:700; padding:14px 28px; border-radius:8px; border:none; font-size:14px;
}
.woocommerce div.product form.cart .button:hover{ background:var(--red-dark); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-weight:700; font-size:13px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--red); }

/* =========================================================
   6. WOOCOMMERCE — cart page
   ========================================================= */
body.woocommerce-cart:not(.mtr-shop-ui) table.cart{ border:1px solid var(--line); border-radius:var(--radius); border-collapse:separate; border-spacing:0; width:100%; overflow:hidden; }
body.woocommerce-cart:not(.mtr-shop-ui) table.cart th{ background:var(--paper); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--steel); padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
body.woocommerce-cart:not(.mtr-shop-ui) table.cart td{ padding:16px; border-bottom:1px solid var(--line); vertical-align:middle; }
body.woocommerce-cart:not(.mtr-shop-ui) table.cart tr:last-child td{ border-bottom:none; }
body.woocommerce-cart:not(.mtr-shop-ui) table.cart td.product-thumbnail img{ width:64px; border-radius:8px; }
body.woocommerce-cart:not(.mtr-shop-ui) table.cart td.product-price,
body.woocommerce-cart:not(.mtr-shop-ui) table.cart td.product-subtotal{ font-family:var(--font-mono); font-weight:600; }
body.woocommerce-cart:not(.mtr-shop-ui) table.cart td.product-remove a.remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--paper); color:var(--red) !important;
  font-size:16px; font-weight:700;
}
body.woocommerce-cart:not(.mtr-shop-ui) table.cart td.product-quantity .qty{
  border:1px solid var(--line); border-radius:6px; padding:8px; width:64px; font-family:var(--font-mono);
}
body.woocommerce-cart:not(.mtr-shop-ui) .coupon .input-text{ border:1px solid var(--line); border-radius:6px; padding:11px 14px; font-family:var(--font-body); }
body.woocommerce-cart:not(.mtr-shop-ui) .cart_totals{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--paper); }
body.woocommerce-cart:not(.mtr-shop-ui) .cart_totals h2{ font-size:16px; font-weight:800; margin:0 0 16px; }
body.woocommerce-cart:not(.mtr-shop-ui) .cart_totals table.shop_table td,
body.woocommerce-cart:not(.mtr-shop-ui) .cart_totals table.shop_table th{ border:none; padding:10px 0; font-size:14px; }
body.woocommerce-cart:not(.mtr-shop-ui) .cart_totals table.shop_table .order-total .amount{ font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--red); }
body.woocommerce-cart:not(.mtr-shop-ui) .wc-proceed-to-checkout .checkout-button{
  background:var(--red); color:#fff; width:100%; text-align:center; border-radius:8px;
  padding:15px; font-weight:700; font-size:14px; display:block;
}

/* =========================================================
   7. WOOCOMMERCE — checkout page
   ========================================================= */
body.woocommerce-checkout:not(.mtr-shop-ui) #customer_details{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
body.woocommerce-checkout:not(.mtr-shop-ui) .form-row label{ font-size:13px; font-weight:600; margin-bottom:6px; display:block; }
body.woocommerce-checkout:not(.mtr-shop-ui) .form-row input.input-text,
body.woocommerce-checkout:not(.mtr-shop-ui) .form-row select,
body.woocommerce-checkout:not(.mtr-shop-ui) .form-row textarea{
  border:1px solid var(--line); border-radius:6px; padding:12px 14px; width:100%; font-family:var(--font-body); font-size:14px;
}
body.woocommerce-checkout:not(.mtr-shop-ui) .form-row input.input-text:focus,
body.woocommerce-checkout:not(.mtr-shop-ui) .form-row select:focus{ border-color:var(--red); outline:none; }
body.woocommerce-checkout:not(.mtr-shop-ui) #order_review{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--paper); }
body.woocommerce-checkout:not(.mtr-shop-ui) #order_review table.shop_table{ border:none; }
body.woocommerce-checkout:not(.mtr-shop-ui) #order_review table.shop_table th,
body.woocommerce-checkout:not(.mtr-shop-ui) #order_review table.shop_table td{ border:none; border-bottom:1px solid var(--line); padding:10px 0; font-size:14px; }
body.woocommerce-checkout:not(.mtr-shop-ui) #order_review .order-total .amount{ font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--red); }
body.woocommerce-checkout:not(.mtr-shop-ui) ul.wc_payment_methods{ list-style:none; padding:0; margin:16px 0; }
body.woocommerce-checkout:not(.mtr-shop-ui) ul.wc_payment_methods li{ border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:8px; }
body.woocommerce-checkout:not(.mtr-shop-ui) ul.wc_payment_methods li.woocommerce-checkout-payment-method-invalid,
body.woocommerce-checkout:not(.mtr-shop-ui) ul.wc_payment_methods li input:checked ~ label{ }
body.woocommerce-checkout:not(.mtr-shop-ui) #place_order{
  background:var(--red); color:#fff; width:100%; padding:16px; border-radius:8px; font-weight:700; font-size:15px; border:none;
}
body.woocommerce-checkout:not(.mtr-shop-ui) #place_order:hover{ background:var(--red-dark); }

/* =========================================================
   8. WOOCOMMERCE — my account
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li{ border-bottom:1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child{ border-bottom:none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{ display:block; padding:12px 16px; font-size:14px; font-weight:600; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ color:var(--red); background:var(--red-tint); }

/* =========================================================
   9. BLOG — index grid, cards, single post
   ========================================================= */
.blog-head{ margin-bottom:36px; }
.blog-head h1{ font-size:32px; font-weight:800; margin:0; }
.blog-head__desc{ color:var(--steel); font-size:14px; margin-top:8px; max-width:560px; }

.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.post-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s ease; }
.post-card:hover{ border-color:var(--red); }
.post-card__thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper); }
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card__thumb-fallback{ display:block; width:100%; height:100%; background:linear-gradient(160deg,#3a3f4b,#14151a); }
.post-card__body{ padding:18px; display:flex; flex-direction:column; flex:1; }
.post-card__cat{ display:inline-block; align-self:flex-start; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--red); background:var(--red-tint); padding:4px 10px; border-radius:20px; margin-bottom:12px; }
.post-card__title{ font-size:16px; font-weight:700; line-height:1.35; margin:0 0 8px; }
.post-card__title a{ color:var(--ink); }
.post-card__title a:hover{ color:var(--red); }
.post-card__excerpt{ font-size:13px; color:var(--steel); margin:0 0 16px; flex:1; }
.post-card__meta{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--steel); }
.post-card__more{ font-weight:700; color:var(--red); }

.pagination-wrap{ margin-top:40px; }
.pagination-wrap .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--line); border-radius:8px; margin:0 3px; font-size:14px; font-weight:600; color:var(--ink); }
.pagination-wrap .page-numbers.current{ background:var(--red); color:#fff; border-color:var(--red); }
.pagination-wrap .page-numbers:hover:not(.current){ border-color:var(--red); color:var(--red); }
.pagination-wrap .nav-links{ display:flex; flex-wrap:wrap; gap:4px; }

/* Single post */
/* NOTE: WordPress adds the body class "single-post" on every post, so the article wrapper must NOT use that name. */
.mtr-article{ max-width:760px; margin:0 auto; }
.single-post__head{ text-align:center; margin-bottom:28px; }
.single-post__title{ font-size:34px; font-weight:800; line-height:1.2; margin:14px 0 14px; }
.single-post__meta{ display:flex; gap:10px; justify-content:center; align-items:center; font-size:13px; color:var(--steel); }
.single-post__hero{ border-radius:14px; overflow:hidden; margin-bottom:32px; }
.single-post__hero img{ width:100%; object-fit:cover; }
.single-post__content{ font-size:16px; line-height:1.75; color:#2a2c33; }
.single-post__content h2{ font-size:24px; font-weight:800; margin:36px 0 14px; }
.single-post__content h3{ font-size:20px; font-weight:700; margin:28px 0 12px; }
.single-post__content p{ margin:0 0 20px; }
.single-post__content img{ border-radius:10px; margin:24px 0; }
.single-post__content blockquote{ border-left:3px solid var(--red); padding-left:20px; margin:24px 0; color:var(--steel); font-style:italic; }
.single-post__content a{ color:var(--red); text-decoration:underline; }
.single-post__tags{ margin-top:32px; display:flex; flex-wrap:wrap; gap:8px; }
.single-post__tags a{ font-size:12px; font-weight:600; color:var(--steel); border:1px solid var(--line); border-radius:20px; padding:5px 12px; }
.single-post__tags a:hover{ border-color:var(--red); color:var(--red); }

@media (max-width:860px){
  .post-grid{ grid-template-columns:1fr; }
  .single-post__title{ font-size:26px; }
}

/* =========================================================
   10. WOOCOMMERCE — order received / thank you (post-payment, e.g. Xendit)
   ========================================================= */
.woocommerce-order{ max-width:760px; margin:0 auto; }
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received{
  background:var(--red-tint); border:1px solid var(--red); border-radius:var(--radius);
  padding:20px 24px; font-weight:700; color:var(--ink); margin-bottom:28px;
}
.woocommerce-order ul.order_details{
  list-style:none; padding:0; margin:0 0 32px; display:flex; flex-wrap:wrap; gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.woocommerce-order ul.order_details li{
  flex:1 1 auto; padding:16px 20px; border-right:1px solid var(--line); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--steel); font-weight:600;
}
.woocommerce-order ul.order_details li:last-child{ border-right:none; }
.woocommerce-order ul.order_details li strong{
  display:block; font-family:var(--font-mono); font-size:15px; color:var(--ink);
  text-transform:none; letter-spacing:0; margin-top:4px; font-weight:600;
}
.woocommerce-order .woocommerce-order-overview__payment-method strong,
.woocommerce-order .woocommerce-order-overview__total strong{ color:var(--red); }

/* =========================================================
   11. ICON SYSTEM (inline SVG via CSS mask, URL-encoded)
   Ganti ikon = ganti class-nya (mis. icon-monitor -> icon-water).
   ========================================================= */
.icon-node[class*="icon-"]{ font-size:0; }
.icon-node[class*="icon-"]::before{
  content:""; display:block; width:22px; height:22px; background:var(--red);
  -webkit-mask:center/contain no-repeat var(--icon);
  mask:center/contain no-repeat var(--icon);
}
.icon-monitor{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='1'/%3E%3Cpath d='M6 10.5l3 2 3-4 2 3 4-2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E"); }
.icon-building{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/%3E%3C/svg%3E"); }
.icon-bolt{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.icon-nodes{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3Cpath d='M8 7l3 9M16 7l-3 9M8.5 6h7'/%3E%3C/svg%3E"); }
.icon-target{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E"); }
.icon-eye{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon-analytics{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.icon-scalable{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V3h4M21 7V3h-4M3 17v4h4M21 17v4h-4'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1'/%3E%3C/svg%3E"); }
.icon-water{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2s6 7 6 12a6 6 0 0 1-12 0c0-5 6-12 6-12z'/%3E%3C/svg%3E"); }
.icon-gas{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2c1 3-1 4-1 6a4 4 0 0 0 8 0c0-1-.5-2-1-3 2 1 4 4 4 8a7 7 0 0 1-14 0c0-5 4-7 5-11z'/%3E%3C/svg%3E"); }

.icon-device{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E"); }
.icon-signal{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20v-3M8.5 20v-7M14 20v-11M19.5 20V4'/%3E%3C/svg%3E"); }
.icon-cloud{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 18a4.5 4.5 0 0 1-.9-8.9 6 6 0 0 1 11.6-1.6A4 4 0 0 1 17.5 18z'/%3E%3C/svg%3E"); }

/* =========================================================
   12. IoT ANIMATIONS (transform/opacity only — GPU friendly)
   ========================================================= */
/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; will-change:opacity, transform; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Hero photo: scanning line + subtle grid, evokes live monitoring */
.hero-photo{ position:relative; overflow:hidden; }
.hero-photo::before{
  content:""; position:absolute; left:0; right:0; height:38%;
  background:linear-gradient(180deg, rgba(217,43,43,0) 0%, rgba(217,43,43,0.18) 70%, rgba(217,43,43,0.45) 100%);
  animation:meterin-scan 3.2s ease-in-out infinite; pointer-events:none;
}
.hero-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:20px 20px;
}
@keyframes meterin-scan{
  0%{ transform:translateY(-100%); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(280%); opacity:0; }
}

/* Live status dot on float card already pulses (.pulse-dot). Give the temp card a soft blink. */
.float-card.temp .data-mono{ animation:meterin-flicker 4s steps(1) infinite; }
@keyframes meterin-flicker{ 0%,96%,100%{ opacity:1; } 97%{ opacity:.55; } }

/* Icon node ring gently rotates dashes (very subtle) */
.icon-node::after{ animation:meterin-spin 12s linear infinite; }
@keyframes meterin-spin{ to{ transform:rotate(360deg); } }

/* Button arrow nudge on hover */
.wp-block-button__link{ transition:background .15s ease; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-photo::before, .float-card.temp .data-mono, .icon-node::after, .pulse-dot::after{ animation:none !important; }
}

/* =========================================================
   13. SLIDER (Cover-based slides — support bg image + overlay)
   ========================================================= */
.meterin-slider{ position:relative; border-radius:16px; overflow:hidden; }
.meterin-slider__track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform; }
.meterin-slider .slide{ min-width:100%; margin:0; border-radius:0; }
.meterin-slider .slide .wp-block-cover__inner-container{ max-width:1180px; margin:0 auto; padding:0 56px; width:100%; }
.meterin-slider .slide h2{ font-size:32px; font-weight:800; line-height:1.15; margin:0 0 14px; max-width:560px; }
.meterin-slider .slide p{ font-size:15px; margin:0 0 24px; max-width:480px; }
.eyebrow--light{ color:#fff; opacity:.85; }

.meterin-slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.15); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
  transition:background .15s ease;
}
.meterin-slider__arrow:hover{ background:rgba(255,255,255,0.3); }
.meterin-slider__arrow--prev{ left:16px; }
.meterin-slider__arrow--next{ right:16px; }
.meterin-slider__dots{ position:absolute; bottom:18px; left:0; right:0; z-index:2; display:flex; justify-content:center; gap:8px; }
.meterin-slider__dot{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,0.4); cursor:pointer; padding:0; transition:background .15s ease, width .15s ease; }
.meterin-slider__dot.is-active{ background:#fff; width:22px; border-radius:5px; }

@media (max-width:781px){
  .meterin-slider .slide .wp-block-cover__inner-container{ padding:0 28px; }
  .meterin-slider .slide h2{ font-size:24px; }
  .meterin-slider__arrow{ width:36px; height:36px; font-size:20px; }
}

/* =========================================================
   16. HERO COVER + IMAGE CARDS (Cover-based, editable bg/overlay)
   ========================================================= */
.meterin-hero-cover .wp-block-cover__inner-container{ width:100%; }
.hero-cover-title{ font-size:46px; font-weight:800; line-height:1.12; max-width:620px; margin:0 0 16px; }
.hero-cover-text{ font-size:16px; max-width:480px; margin:0 0 26px; opacity:.92; }

.image-cards .img-card{ border-radius:14px; overflow:hidden; height:100%; }
.image-cards .img-card .wp-block-cover__inner-container{ width:100%; }
.image-cards .img-card h3{ font-size:20px; font-weight:800; margin:0 0 6px; }
.image-cards .img-card p{ font-size:14px; margin:0 0 16px; opacity:.92; }

@media (max-width:781px){
  .hero-cover-title{ font-size:32px; }
}

/* =========================================================
   17. SHOP / ARCHIVE styling (catalog toolbar, title, pagination)
   ========================================================= */
.woocommerce-products-header{ margin-bottom:28px; }
.woocommerce-products-header__title,
.woocommerce div.product .product_title{ font-size:30px; font-weight:800; margin:0; }
.term-description, .woocommerce-products-header .term-description{ color:var(--steel); font-size:14px; margin-top:10px; max-width:640px; }

.woocommerce .woocommerce-result-count{ color:var(--steel); font-size:13px; margin:0; }
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px;
  font-family:var(--font-body); background:#fff; color:var(--ink);
}
.woocommerce-breadcrumb{ font-size:12px; color:var(--steel); margin-bottom:20px; }
.woocommerce-breadcrumb a{ color:var(--steel); }
.woocommerce-breadcrumb a:hover{ color:var(--red); }

/* WooCommerce default pagination on shop */
.woocommerce nav.woocommerce-pagination ul{ border:none; display:flex; gap:6px; justify-content:flex-start; margin-top:36px; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line); border-radius:8px; min-width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; color:var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--red); color:#fff; border-color:var(--red); }
.woocommerce nav.woocommerce-pagination ul li a:hover{ border-color:var(--red); color:var(--red); background:transparent; }

/* Sale badge already themed in section 4; ensure ordering row wraps nicely */
.woocommerce .before-shop-toolbar,
.woocommerce-page .woocommerce-result-count{ display:inline-block; }

@media (max-width:781px){
  .woocommerce-products-header__title{ font-size:24px; }
}

/* =========================================================
   3a. HEADER ACTIONS (search / account / cart)
   ========================================================= */
.header-actions{ display:flex; align-items:center; gap:6px; }
.header-icon{
  width:40px; height:40px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); background:transparent; border:none; cursor:pointer; position:relative; transition:background .15s ease, color .15s ease;
}
.header-icon:hover{ background:var(--paper); color:var(--red); }
.header-icon svg{ width:20px; height:20px; }
.header-cart .cart-count{
  position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px;
  background:var(--red); color:#fff; border-radius:20px; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}


/* Search bar (toggled open) */
.header-search{ display:none; border-top:1px solid var(--line); }
.header-search.is-open{ display:block; }
.header-search__inner{ max-width:1180px; margin:0 auto; padding:16px 32px; }
.header-search form{ display:flex; gap:10px; }
.header-search input[type="search"], .header-search input[type="text"]{
  flex:1; border:1px solid var(--line); border-radius:8px; padding:12px 16px; font-size:14px; font-family:var(--font-body);
}
.header-search input[type="search"]:focus, .header-search input[type="text"]:focus{ border-color:var(--red); outline:none; }
.header-search button[type="submit"]{
  background:var(--red); color:#fff; border:none; border-radius:8px; padding:12px 22px; font-weight:700; font-size:14px; cursor:pointer;
}
.header-search button[type="submit"]:hover{ background:var(--red-dark); }

@media (max-width:860px){
  .header-search__inner{ padding:14px 20px; }
}

/* Screen-reader-only text (search label) */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   18. NAV SUBMENU / DROPDOWN (master menu + kategori)
   ========================================================= */
.nav-links li{ position:relative; }
.nav-links .menu-item-has-children > a::after{ content:"\25be"; margin-left:5px; font-size:10px; color:var(--steel); }
.nav-links .sub-menu{
  list-style:none; margin:0; padding:8px; min-width:220px;
  position:absolute; top:100%; left:0; background:#fff;
  border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,0.10);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s; z-index:30;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-links .sub-menu li{ position:relative; }
.nav-links .sub-menu a{ display:block; padding:9px 12px; border-radius:6px; font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; }
.nav-links .sub-menu a:hover{ background:var(--paper); color:var(--red); }
/* nested (3rd level) opens to the side */
.nav-links .sub-menu .sub-menu{ top:0; left:100%; }
.nav-links .sub-menu .menu-item-has-children > a::after{ content:"\203a"; float:right; }

/* Two-column "mega" dropdown when a menu item has this class (add in Menus) */
.nav-links .mega > .sub-menu{ display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:2px; min-width:420px; }

@media (max-width:860px){
  /* On mobile the whole menu is a stacked panel; show submenus inline */
  .nav-links .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-radius:0; padding:0 0 0 14px; min-width:0;
  }
  .nav-links .mega > .sub-menu{ display:block; min-width:0; }
  .nav-links .menu-item-has-children > a::after{ float:right; }
}

/* =========================================================
   19. SHOP SIDEBAR / FILTERS
   ========================================================= */
.shop-layout{ display:flex; gap:36px; align-items:flex-start; }
.shop-sidebar{ order:-1; width:240px; flex-shrink:0; }
.shop-main{ flex:1; min-width:0; }
/* narrower content → 3-up product grid */
.shop-layout .shop-main ul.products{ grid-template-columns:repeat(3,1fr); }

.shop-widget{ margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.shop-widget:last-child{ border-bottom:none; }
.shop-widget__title{ font-size:14px; font-weight:800; margin:0 0 14px; }

/* Widget lists (categories, layered nav) */
.shop-widget ul{ list-style:none; margin:0; padding:0; }
.shop-widget ul li{ font-size:13px; padding:6px 0; color:var(--steel); }
.shop-widget ul li a{ color:var(--ink); }
.shop-widget ul li a:hover{ color:var(--red); }
.shop-widget ul li.current-cat > a,
.shop-widget ul li.chosen > a{ color:var(--red); font-weight:700; }
.shop-widget .count{ color:var(--steel); font-size:11px; }

/* Layered nav active filters / chosen chips */
.woocommerce-widget-layered-nav-list__item.chosen a,
.shop-widget .woocommerce-widget-layered-nav-list__item.chosen a{ position:relative; }

/* Price filter slider */
.shop-widget .price_slider_wrapper{ margin-top:6px; }
.shop-widget .price_slider{ margin:14px 4px 18px; }
.shop-widget .ui-slider{ position:relative; height:4px; background:var(--line); border-radius:4px; }
.shop-widget .ui-slider .ui-slider-range{ position:absolute; height:4px; background:var(--red); border-radius:4px; }
.shop-widget .ui-slider .ui-slider-handle{ position:absolute; top:-6px; width:16px; height:16px; margin-left:-8px; background:#fff; border:2px solid var(--red); border-radius:50%; cursor:pointer; }
.shop-widget .price_slider_amount{ display:flex; flex-direction:column; gap:10px; font-size:12px; color:var(--steel); }
.shop-widget .price_slider_amount .price_label{ font-family:var(--font-mono); color:var(--ink); }
.shop-widget .price_slider_amount .button{
  align-self:flex-start; background:var(--ink); color:#fff; border:none; border-radius:6px;
  padding:9px 18px; font-size:12px; font-weight:700; cursor:pointer; order:2;
}
.shop-widget .price_slider_amount .button:hover{ background:var(--red); }

/* Block-based WooCommerce filter blocks (newer widgets) */
.shop-sidebar .wc-block-components-price-slider__range-input-progress{ --range-color:var(--red); }
.shop-sidebar .wp-block-woocommerce-filter-wrapper{ margin-bottom:24px; }

@media (max-width:960px){
  .shop-layout{ flex-direction:column; }
  .shop-sidebar{ order:1; width:100%; }
  .shop-layout .shop-main ul.products{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .shop-layout .shop-main ul.products,
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); }

  /* 2-up cards are too narrow for "Best Seller" + a connectivity pill on the
     same row — drop the connectivity pill below it instead of shrinking both
     into an unreadable squeeze. ("Sale" is short enough to stay side-by-side.) */
  .woocommerce ul.products li.product .badge-pill,
  .woocommerce ul.products li.product .onsale{
    font-size:9px; padding:4px 8px; max-width:calc(100% - 24px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .woocommerce ul.products li.product .conn-badge{ font-size:9px; padding:4px 7px; }
  .prod-thumb:has(.badge-pill) .conn-badge{ top:38px; }
}

/* =========================================================
   14. DESIGN POLISH — premium micro-details (Poppins tuning,
   hover states, focus rings, transitions). Inherited by the
   Meterin Core Elementor widgets too.
   ========================================================= */

/* Smooth in-page scrolling for anchor CTAs */
html{ scroll-behavior:smooth; }

/* Poppins heading tuning — tighter tracking so big titles feel intentional */
h1,h2,h3{ letter-spacing:-0.015em; text-wrap:balance; }
.hero-inner h1,.meterin-hero__content h1{ letter-spacing:-0.025em; line-height:1.08; }

/* Nicer body rendering + comfy paragraph measure */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Selection + accessible focus ring (red, matches the mockup) */
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* Header depth on scroll-away sections */
header.site-header{ box-shadow:0 1px 0 rgba(20,21,26,0.04); }

/* Buttons — subtle, tactile interactions (not flat/generic) */
.btn{ transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn-primary{ box-shadow:0 8px 20px -8px rgba(217,43,43,0.55); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 24px -8px rgba(217,43,43,0.6); }
.btn-ghost:hover{ color:var(--red); }
.header-cta{ box-shadow:0 8px 20px -8px rgba(217,43,43,0.55); }
.header-cta:hover{ transform:translateY(-1px); }

/* Cards — gentle lift + shadow on hover (Solutions, Case Studies, blog, team, stats) */
.sol-card,.post-card,.mv-card,.team-card,.case-small,.stat-item{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sol-card:hover,.post-card:hover,.mv-card:hover,.team-card:hover{
  transform:translateY(-4px); box-shadow:0 16px 34px -18px rgba(20,21,26,0.28); border-color:transparent;
}
.meterin-cases .case-small:hover{ box-shadow:0 14px 30px -18px rgba(20,21,26,0.25); border-color:transparent; }

/* Solution card icon pops on hover */
.sol-card:hover .icon-node{ transform:translateY(-1px) scale(1.03); transition:transform .2s ease; }

/* Links carry a smooth color transition everywhere */
a{ transition:color .15s ease; }

/* Respect reduced-motion: drop the lifts/transitions */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn,.sol-card,.post-card,.mv-card,.team-card,.case-small,.stat-item,.header-cta,a{ transition:none !important; }
  .sol-card:hover,.post-card:hover,.mv-card:hover,.team-card:hover,.btn-primary:hover,.header-cta:hover{ transform:none !important; }
}

/* =========================================================
   20. MERGED FROM mockup-extra.css — new components (§5)
   + layout fixes (§10). Added by Paull Studio, v1.2.0.
   ========================================================= */

:root{
  --wa: #25D366;
  --wa-dark: #1EBE5A;
  --wa-tint: #E8F8EE;
}

/* ---- Layout utility grids (used by page-about / page-contact templates) ---- */
.mtr-grid{ display:grid; gap:24px; }
.mtr-grid--2{ grid-template-columns:repeat(2,1fr); }
.mtr-grid--3{ grid-template-columns:repeat(3,1fr); }
.mtr-grid--4{ grid-template-columns:repeat(4,1fr); }

/* Two-column split (intro+photo, gallery+summary). §10 bug #4: force stretch
   on mobile so a width:100% child never collapses when the row stacks. */
.split{ display:flex; gap:44px; align-items:flex-start; }
.split > *{ position:relative; z-index:1; }   /* §10 bug #2: content stays above decorative layers */
.split__media{ flex:1 1 46%; min-width:0; }
.split__text{ flex:1 1 54%; min-width:0; }

/* Breadcrumb (About / Contact / Woo share this look) */
.mtr-breadcrumb{ font-size:12px; color:var(--steel); margin-bottom:22px; }
.mtr-breadcrumb a{ color:var(--steel); }
.mtr-breadcrumb a:hover{ color:var(--red); }
.mtr-breadcrumb .sep{ margin:0 6px; }

/* ---- Photo placeholder system (.photo-ph) — until real photos land ---- */
.photo-ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg,#3a3f4b,#14151a); min-height:200px;
}
.photo-ph.tone-warm{ background:linear-gradient(160deg,#4a2f30,#180f11); }
.photo-ph.tone-cool{ background:linear-gradient(160deg,#26333d,#0e161d); }
.photo-ph::after{  /* subtle IoT dot texture */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:20px 20px;
}
.ph-label{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; color:#fff;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);
  padding:5px 10px; border-radius:20px;
}
.ph-label::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); }
.ph-label--top{ top:12px; right:12px; bottom:auto; left:auto; }   /* §10 bug #3: different corner */

/* Floating info chips over a photo-ph (About hero: "4.500+ Perangkat Online") */
.ph-chip{
  position:absolute; z-index:2; background:#fff; border-radius:10px; padding:10px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,0.18); font-size:12px;
}
.ph-chip.is-top{ top:16px; left:16px; display:flex; align-items:center; gap:8px; }
.ph-chip.is-bottom{ bottom:16px; left:16px; }
.ph-chip .data-mono{ font-weight:600; }
.ph-chip small{ display:block; color:var(--steel); font-size:11px; }

/* ---- Product card badges (§5) ---- */
/* SALE / Best Seller pill — TOP-LEFT (aligns with Woo .onsale corner). */
.badge-pill{
  position:absolute; top:12px; left:12px; z-index:3;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; background:var(--red); color:#fff;
}
.badge-pill.is-best{ background:var(--ink); }

/* Connectivity badge — TOP-RIGHT (§10 bug #3: opposite corner to .badge-pill). */
.conn-badge{
  position:absolute; top:12px; right:12px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; padding:5px 10px; border-radius:20px; line-height:1;
  background:#6B7280; color:#fff;
}
.conn-badge svg{ width:11px; height:11px; }
.conn-badge.lorawan{ background:#3F4FB8; }
.conn-badge.nbiot{   background:#0B8A9A; }
.conn-badge.wifi{    background:#2E7D32; }
.conn-badge.gprs{    background:#6B7280; }

/* Small category icon chip on product thumb — BOTTOM-RIGHT (§10 bug #3). */
.prod-thumb{ position:relative; display:block; }
.prod-thumb .cat-icon{
  position:absolute; bottom:10px; right:10px; z-index:3;
  width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.92);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--steel);
}
.prod-thumb .cat-icon svg{ width:16px; height:16px; }

/* ---- WhatsApp UI components (§5) ---- */
.btn-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--wa); color:#fff; font-weight:700; font-size:14px;
  padding:14px 22px; border-radius:8px; border:2px solid var(--wa); cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.btn-wa:hover{ background:var(--wa-dark); border-color:var(--wa-dark); color:#fff; transform:translateY(-1px); }
.btn-wa svg{ width:20px; height:20px; }
.btn-wa-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; color:var(--wa-dark); font-weight:700; font-size:14px;
  padding:13px 22px; border-radius:8px; border:2px solid var(--wa); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.btn-wa-outline:hover{ background:var(--wa-tint); color:var(--wa-dark); }
.btn-wa-outline svg{ width:20px; height:20px; }

/* Floating WhatsApp bubble (site-wide) */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:54px; height:54px; border-radius:50%; background:var(--wa); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,0.45); transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{ transform:translateY(-2px) scale(1.04); color:#fff; box-shadow:0 14px 30px rgba(37,211,102,0.55); }
.wa-float svg{ width:28px; height:28px; }

/* Auto-message preview box (cart + product) */
.wa-preview{
  background:var(--wa-tint); border:1px solid rgba(37,211,102,0.35); border-radius:var(--radius);
  padding:16px 18px; margin-top:16px;
}
.wa-preview__label{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--wa-dark); margin:0 0 8px; }
.wa-preview__body{ font-family:var(--font-mono); font-size:12.5px; line-height:1.7; color:#1c3a29; white-space:pre-wrap; margin:0; }

/* Divider "— ATAU —" between the two checkout routes */
.wa-or{ display:flex; align-items:center; gap:12px; color:var(--steel); font-size:12px; margin:14px 0; }
.wa-or::before, .wa-or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* Design annotation (review only — safe to leave, hidden in print) */
.design-note{
  border:1px dashed rgba(217,43,43,0.5); background:var(--red-tint); border-radius:10px;
  padding:12px 16px; font-size:13px; color:#7a2020; margin:0 0 20px;
}
.design-note strong{ color:var(--red); }
@media print{ .design-note, .wa-float{ display:none !important; } }

/* ---- Homepage extras referenced by widgets (§5) ---- */
.case-small-photo{ aspect-ratio:16/10; border-radius:10px; margin-bottom:12px; }
.partner-row-generic{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.partner-logo{
  border:1px solid var(--line); border-radius:10px; padding:14px 22px;
  font-weight:700; font-size:14px; color:var(--steel); background:#fff;
}
.cta-band.cta-photo{ position:relative; overflow:hidden; }

/* Contact WhatsApp CTA card */
.contact-wa{
  display:flex; gap:14px; align-items:flex-start; margin:22px 0;
  background:var(--wa-tint); border:1px solid rgba(37,211,102,0.3); border-radius:var(--radius); padding:18px;
}
.contact-wa__icon{ width:40px; height:40px; border-radius:50%; background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-wa__icon svg{ width:22px; height:22px; }
.contact-wa strong{ display:block; font-size:15px; margin-bottom:2px; }
.contact-wa p{ font-size:13px; color:var(--steel); margin:0 0 12px; }

/* Contact map placeholder */
.map-ph{
  height:220px; border:1px solid var(--line); border-radius:var(--radius); margin-top:18px;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:26px 26px; display:flex; align-items:center; justify-content:center;
  color:var(--steel); font-family:var(--font-mono); font-size:12px; position:relative;
}
.map-ph::before{ content:"\1F4CD"; font-size:26px; }

/* Contact form success/notice */
.mtr-notice{ border-radius:10px; padding:14px 18px; font-size:14px; margin-bottom:20px; }
.mtr-notice.is-ok{ background:var(--wa-tint); border:1px solid rgba(37,211,102,0.4); color:#12703c; }
.mtr-notice.is-err{ background:var(--red-tint); border:1px solid var(--red); color:#7a2020; }

/* Single product: WA quick-order button sits under add-to-cart */
.woocommerce div.product .meterin-wa-order{ margin:14px 0 4px; max-width:420px; }

/* ---- Single product "Pesan Cepat" note + spec tweaks ---- */
.meterin-wa-note{ font-size:12.5px; color:var(--steel); margin:10px 0 0; }

/* Related posts (single.php) */
.related-posts{ margin-top:56px; border-top:1px solid var(--line); padding-top:40px; }
.related-posts .blog-head{ text-align:center; margin-bottom:28px; }
.related-posts .eyebrow{ text-align:center; }

/* Blog category filter pills */
.cat-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 32px; }
.cat-pills a{
  font-size:13px; font-weight:600; color:var(--ink);
  border:1px solid var(--line); border-radius:24px; padding:8px 16px; transition:all .15s ease;
}
.cat-pills a:hover{ border-color:var(--red); color:var(--red); }
.cat-pills a.is-active{ background:var(--red); border-color:var(--red); color:#fff; }

/* =========================================================
   §10 FIX #1 — .container + .section shorthand-padding clash.
   When both classes sit on ONE element, set left/right explicitly with
   higher specificity so horizontal padding never resets to 0 on mobile.
   ========================================================= */
.container.section{ padding-left:32px; padding-right:32px; }

/* =========================================================
   RESPONSIVE — merged breakpoints (§4: 860 / 781 / 640 / 480)
   ========================================================= */
@media (max-width:860px){
  .mtr-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:781px){
  /* §10 bug #4: stacked splits must stretch, not collapse */
  .split{ flex-direction:column; align-items:stretch !important; gap:28px; }
  .mtr-grid--2, .mtr-grid--3{ grid-template-columns:1fr; }
  .mtr-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  /* §10 bug #5: turn the Woo cart table into stacked cards with row labels.
     WooCommerce already prints data-title on each <td>; we surface it. */
  .woocommerce-cart table.cart thead{ display:none; }
  .woocommerce-cart table.cart tr{ display:block; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; padding:6px 4px; }
  .woocommerce-cart table.cart td{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    border-bottom:1px solid var(--line); padding:12px 16px; text-align:right;
  }
  .woocommerce-cart table.cart tr td:last-child{ border-bottom:none; }
  .woocommerce-cart table.cart td::before{
    content:attr(data-title); font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:var(--steel); text-align:left;
  }
  .woocommerce-cart table.cart td.product-remove{ justify-content:flex-end; }
  .woocommerce-cart table.cart td.product-remove::before{ content:""; }
  .wa-preview__body{ font-size:12px; }
}
@media (max-width:480px){
  .mtr-grid--4{ grid-template-columns:1fr; }
  .container, .container.section{ padding-left:20px; padding-right:20px; }
  .nav-row{ padding-left:20px; padding-right:20px; }
}

/* ---- Small template helpers (About / Contact / CTA) ---- */
.mtr-center{ text-align:center; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head h2{ font-size:28px; font-weight:800; margin:0; }

.btn-white{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--red); font-weight:700; font-size:14px; padding:13px 22px; border-radius:8px; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease; }
.btn-white:hover{ color:var(--red-dark); transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(0,0,0,0.4); }

.cta-band--row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band--row > div{ flex:1 1 auto; min-width:240px; }

/* Stats row with hairline frame (About) */
.stats-frame{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:36px 0; margin:8px 0 12px; }

/* Process step number chip */
.process-num{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--red-tint); color:var(--red); font-family:var(--font-mono); font-weight:600; font-size:13px; margin-bottom:10px; }

@media (max-width:781px){
  .cta-band--row{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   20. SHOP — mockup pass (toolbar, filters, intro)
   ========================================================= */
.page-description{ color:var(--steel); font-size:14px; margin-top:10px; max-width:640px; }
.page-description p{ margin:0; }

/* Result count (left) + sorting (right) on one row */
.woocommerce .shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.woocommerce .shop-toolbar .woocommerce-result-count,
.woocommerce .shop-toolbar .woocommerce-ordering{ float:none; margin:0; }

/* Category + connectivity lists */
.shop-widget--cats li,
.shop-widget--conn li{ padding:5px 0; }
.shop-widget--cats li a,
.shop-widget--conn li a{ display:inline-block; }
.shop-widget--cats li.current-cat > a,
.shop-widget--conn li.chosen > a{ color:var(--red); font-weight:700; }
.shop-widget--cats .count{ color:var(--steel); font-size:11px; font-weight:400; }

/* Price filter (two-thumb slider) */
.price-filter .pf-slider{ position:relative; height:18px; margin:6px 2px 10px; }
.price-filter .pf-slider::before{ content:""; position:absolute; left:0; right:0; top:7px; height:4px; border-radius:4px; background:var(--line); }
.price-filter .pf-fill{ position:absolute; top:7px; height:4px; border-radius:4px; background:var(--red); left:0; right:0; }
.price-filter input[type="range"]{
  -webkit-appearance:none; appearance:none; position:absolute; left:0; top:0; width:100%; height:18px; margin:0;
  background:transparent; pointer-events:none; outline:none;
}
.price-filter input[type="range"]::-webkit-slider-runnable-track{ background:transparent; height:18px; }
.price-filter input[type="range"]::-moz-range-track{ background:transparent; height:18px; }
.price-filter input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; pointer-events:auto; width:16px; height:16px; margin-top:1px; border-radius:50%;
  background:#fff; border:2px solid var(--red); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.price-filter input[type="range"]::-moz-range-thumb{
  pointer-events:auto; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--red); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.price-filter .pf-label{ font-family:var(--font-mono); font-size:12px; color:var(--steel); margin:0 0 12px; }
.price-filter .pf-label span{ color:var(--ink); }
.price-filter .pf-submit{
  background:var(--ink); color:#fff; border:none; border-radius:6px; padding:9px 18px;
  font-size:12px; font-weight:700; cursor:pointer; transition:background .15s ease;
}
.price-filter .pf-submit:hover{ background:var(--red); }
.price-filter .pf-reset{ display:inline-block; margin-left:12px; font-size:12px; color:var(--steel); text-decoration:underline; }
.price-filter .pf-reset:hover{ color:var(--red); }

/* WhatsApp help box */
.shop-widget--help p{ font-size:12px; color:var(--steel); line-height:1.6; margin:0 0 14px; }
.shop-widget--help .btn-wa{ padding:12px 16px; font-size:13px; }

@media (max-width:960px){
  .shop-sidebar{ margin-top:16px; }
}

/* =========================================================
   21. TEMPLATE OPTIONS (Customizer > Meterin — Template) — v1.3.0
   ========================================================= */
.post-grid{ grid-template-columns:repeat(var(--blog-cols,3),minmax(0,1fr)); }
.shop-layout .shop-main ul.products{ grid-template-columns:repeat(var(--shop-cols,3),minmax(0,1fr)); }
.shop-layout--right .shop-sidebar{ order:1; }
.shop-layout--none .shop-main ul.products{ grid-template-columns:repeat(var(--shop-cols,4),minmax(0,1fr)); }
.related.products{ margin-top:64px; text-align:center; }
.related.products > h2{ font-size:28px; font-weight:800; line-height:1.25; max-width:520px; margin:0 auto 32px; }
.related.products > h2::before{ display:block; color:var(--red); font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.related.products ul.products{ text-align:left; }
@media (max-width:860px){
  .post-grid{ grid-template-columns:1fr; }
  .shop-layout .shop-main ul.products,.woocommerce .related.products ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop-layout--right .shop-sidebar{ order:1; }
}


/* =========================================================
   22. FIDELITY FIXES v1.4.0 — article, comments, shop, product
   ========================================================= */

/* ---- 22.1 Single article ---- */
.single-post__meta{ flex-wrap:wrap; row-gap:4px; }
.single-post__meta > span{ white-space:nowrap; overflow-wrap:anywhere; }
.single-post__meta > span:not(.data-mono):not(:nth-child(2n)){ white-space:normal; }
.main-crumb, .single-post ~ .mtr-breadcrumb{ display:none; }
main > .container > .mtr-breadcrumb{ margin:0 0 18px; }
.single-post__hero.is-placeholder{ position:relative; height:360px; border-radius:14px; margin-bottom:32px; background:linear-gradient(180deg,#3a3f4b 0%,#2b2e37 46%,#1a1c22 100%); }
.single-post__hero.is-placeholder::before{ content:""; position:absolute; left:0; right:0; top:34%; height:26%; background:linear-gradient(180deg,rgba(217,43,43,0),rgba(217,43,43,.45) 70%,rgba(217,43,43,0)); }
.single-post__hero.is-placeholder::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:14px 14px; }
.single-post__hero.is-placeholder .ph-label{ z-index:2; }
.single-post__content ul,.single-post__content ol{ margin:0 0 20px; padding-left:22px; }
.single-post__content li{ margin-bottom:6px; }
@media (max-width:600px){ .single-post__hero.is-placeholder{ height:220px; } }

/* ---- 22.2 Comments ---- */
.mtr-comments{ max-width:760px; margin:56px auto 0; padding-top:40px; border-top:1px solid var(--line); }
.mtr-comments__title{ font-family:var(--font-head); font-size:22px; font-weight:800; margin:0 0 22px; }
.mtr-comments__list,.mtr-comments__list .children{ list-style:none; margin:0; padding:0; }
.mtr-comments__list .children{ margin-left:28px; border-left:2px solid var(--line); padding-left:18px; }
.mtr-comments__list .comment-body{ position:relative; padding:18px 20px 18px 78px; margin:0 0 14px; background:var(--paper); border:1px solid var(--line); border-radius:12px; font-size:14px; color:#2a2c33; line-height:1.65; }
.mtr-comments__list .comment-author .avatar{ position:absolute; left:20px; top:18px; width:44px; height:44px; border-radius:50%; }
.mtr-comments__list .comment-author{ font-size:14px; }
.mtr-comments__list .comment-author .fn{ font-weight:700; color:var(--ink); font-style:normal; }
.mtr-comments__list .comment-author .says{ display:none; }
.mtr-comments__list .comment-metadata{ font-size:12px; margin:2px 0 8px; }
.mtr-comments__list .comment-metadata a{ color:var(--steel); }
.mtr-comments__list .comment-content p{ margin:0 0 10px; }
.mtr-comments__list .reply a{ font-size:12px; font-weight:700; color:var(--red); }
.mtr-comments__list .comment-awaiting-moderation{ font-size:12px; color:var(--steel); }
.mtr-comments__note,.mtr-comments__closed{ font-size:13px; color:var(--steel); margin:0 0 16px; }
.mtr-comments #reply-title small a{ font-size:12px; color:var(--red); margin-left:10px; }
.mtr-comments form p{ margin:0 0 12px; }
.mtr-comments :is(input[type="text"],input[type="email"],input[type="url"],textarea){ width:100%; background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; font:inherit; font-size:14px; color:var(--ink); }
.mtr-comments textarea{ min-height:130px; resize:vertical; }
.mtr-comments :is(input,textarea):focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint); }
.mtr-comments .comment-form-cookies-consent{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--steel); }
.mtr-comments .comment-form-cookies-consent input{ margin-top:3px; accent-color:var(--red); }
.mtr-comments .form-submit{ margin-top:6px; }
.mtr-comments .form-submit .submit{ border:0; cursor:pointer; }
.mtr-comments .comments-pagination,.mtr-comments .nav-links{ display:flex; gap:12px; justify-content:space-between; margin:0 0 24px; font-size:13px; }

/* ---- 22.3 Photo placeholder (products) ---- */
.mtr-ph-img{ position:relative; display:block; width:100%; aspect-ratio:1/1; overflow:hidden; background:radial-gradient(120% 90% at 18% 6%,rgba(217,43,43,.30) 0%,transparent 46%),radial-gradient(90% 70% at 82% 100%,rgba(70,105,150,.24) 0%,transparent 56%),linear-gradient(160deg,#3a3f4b 0%,#20232b 56%,#14151a 100%); }
.mtr-ph-img::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:14px 14px; }
.mtr-ph-img .ph-label{ z-index:2; }
.mtr-ph-img--single{ aspect-ratio:1/1; border-radius:16px; }
.mtr-ph-cam{ position:absolute; right:14px; bottom:14px; z-index:2; width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; }
.mtr-ph-cam svg{ width:16px; height:16px; }
.woocommerce ul.products li.product .prod-thumb .mtr-ph-img{ aspect-ratio:1/1; }
.woocommerce-cart td.product-thumbnail .mtr-ph-img{ width:64px; border-radius:8px; }
.woocommerce-cart td.product-thumbnail .mtr-ph-img .ph-label{ display:none; }

/* ---- 22.4 Shop loop ---- */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product span.onsale{ right:auto !important; left:12px !important; top:12px !important; margin:0 !important; min-width:0 !important; min-height:0 !important; width:auto !important; line-height:1.2 !important; padding:5px 10px !important; border-radius:20px !important; font-size:10px; letter-spacing:.04em; z-index:3; }
.woocommerce span.onsale{ background:var(--red); color:#fff; }
.woocommerce ul.products li.product .price ins{ background:none; color:var(--red); text-decoration:none; font-weight:600; }
.woocommerce ul.products li.product .price del{ display:block; font-size:12px; margin:0 0 2px; }
.woocommerce ul.products li.product .star-rating{ margin:16px 16px 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ margin-top:8px; }
.woocommerce .star-rating::before{ color:#F4DDB0; }
.woocommerce .star-rating span::before{ color:#F5A623; }
.shop-sidebar .widget,.shop-sidebar .shop-widget{ margin:0 0 28px; }

/* ---- 22.5 Single product ---- */
.woocommerce div.product{ margin-top:8px; }
.woocommerce div.product div.images{ margin-bottom:32px; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{ border-radius:16px; overflow:hidden; }
.woocommerce div.product div.images img{ display:block; width:100%; height:auto; }
.woocommerce div.product div.images .flex-control-thumbs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:12px 0 0; padding:0; list-style:none; }
.woocommerce div.product div.images .flex-control-thumbs li{ width:auto !important; float:none !important; margin:0 !important; }
.woocommerce div.product div.images .flex-control-thumbs img{ border-radius:10px; border:2px solid transparent; opacity:.65; aspect-ratio:1/1; object-fit:cover; cursor:pointer; transition:opacity .15s ease, border-color .15s ease; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{ opacity:1; border-color:var(--red); }
.woocommerce div.product span.onsale{ top:14px; left:14px; right:auto; min-width:0; min-height:0; line-height:1.2; padding:5px 11px; border-radius:20px; font-size:10px; letter-spacing:.04em; margin:0; }

.mtr-sp-cat{ display:inline-block; font-size:12px; font-weight:600; color:var(--steel); margin:0 0 8px; }
.mtr-sp-cat:hover{ color:var(--red); }
.woocommerce div.product .product_title{ font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; }
.woocommerce div.product .woocommerce-product-rating{ display:flex; align-items:center; gap:8px; margin:0 0 14px; }
.woocommerce div.product .woocommerce-product-rating .star-rating{ float:none; margin:0; font-size:14px; }
.woocommerce div.product .woocommerce-review-link{ font-size:12px; color:var(--steel); }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--red); margin:0 0 18px; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{ background:none; color:var(--red); text-decoration:none; }
.woocommerce div.product p.price del,
.woocommerce div.product span.price del{ font-size:15px; font-weight:400; color:var(--steel); opacity:.75; margin-right:8px; }
.woocommerce div.product .woocommerce-product-details__short-description{ font-size:14.5px; line-height:1.7; color:var(--steel); margin:0 0 22px; }

.woocommerce div.product form.cart{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin:0; }
.mtr-conn{ flex:0 0 100%; }
.mtr-conn__label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.mtr-conn__select{ width:100%; max-width:320px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; font:inherit; font-size:14px; color:var(--ink); }
.mtr-conn__select:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint); }
.woocommerce div.product form.cart div.quantity{ margin:0; float:none; }
.woocommerce div.product form.cart .quantity .qty{ width:72px; height:100%; min-height:50px; border:1px solid var(--line); border-radius:8px; text-align:center; font:600 15px var(--font-body); color:var(--ink); background:#fff; }
.woocommerce div.product form.cart .single_add_to_cart_button{ flex:1 1 200px; margin:0; min-height:50px; }
.woocommerce div.product form.cart .meterin-wa-order{ flex:0 0 100%; margin:2px 0 0; max-width:none; }
.woocommerce div.product form.cart .meterin-wa-note{ flex:0 0 100%; margin:0; }
.btn-wa-outline{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 18px; border:1.5px solid var(--wa,#25D366); border-radius:8px; background:#fff; color:#128C4A; font-weight:700; font-size:14px; transition:all .15s ease; }
.btn-wa-outline svg{ width:18px; height:18px; }
.btn-wa-outline:hover{ background:var(--wa,#25D366); color:#fff; }

.woocommerce div.product .product_meta{ display:flex; flex-direction:column; gap:6px; margin:26px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--steel); }
.woocommerce div.product .product_meta > span{ display:block; }
.woocommerce div.product .product_meta .sku,.woocommerce div.product .product_meta a{ color:var(--ink); font-weight:500; }
.woocommerce div.product .product_meta a:hover{ color:var(--red); }
.woocommerce div.product .product_meta .sku_wrapper,.woocommerce div.product .product_meta .posted_in,.woocommerce div.product .product_meta .tagged_as{ font-weight:700; color:var(--ink); }
.woocommerce div.product .product_meta .posted_in a,.woocommerce div.product .product_meta .tagged_as a,.woocommerce div.product .product_meta .sku{ font-weight:400; color:var(--steel); }

/* Tabs — underline style like the mockup */
.woocommerce div.product .woocommerce-tabs{ clear:both; padding-top:36px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ display:flex; gap:30px; margin:0 0 26px; padding:0; border-bottom:1px solid var(--line); overflow:visible; list-style:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs::after{ display:none; border:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:none; border:0; border-radius:0; margin:0; padding:0; box-shadow:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ display:block; padding:12px 0; margin-bottom:-1px; font-size:14px; font-weight:600; color:var(--steel); border-bottom:2px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--red); border-bottom-color:var(--red); }
.woocommerce div.product .woocommerce-tabs .panel{ max-width:860px; margin:0; padding:0; border:0; font-size:15px; line-height:1.75; color:var(--steel); }
.woocommerce div.product .woocommerce-tabs .panel p{ margin:0 0 16px; }
.woocommerce table.shop_attributes{ width:100%; border:0; border-collapse:collapse; margin:0; }
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{ background:none; border:0; border-bottom:1px solid var(--line); padding:14px 0; font-style:normal; vertical-align:top; }
.woocommerce table.shop_attributes th{ width:34%; font-weight:400; color:var(--steel); text-align:left; font-size:14px; }
.woocommerce table.shop_attributes td{ font-family:var(--font-mono); font-size:13px; color:var(--ink); }
.woocommerce table.shop_attributes td p{ margin:0; padding:0; }
.woocommerce #reviews #comments h2{ font-size:18px; }
.woocommerce #review_form #respond textarea{ border:1px solid var(--line); border-radius:8px; padding:12px 14px; }

@media (max-width:860px){
  .woocommerce div.product div.images,.woocommerce div.product div.summary{ float:none; width:100%; }
  .woocommerce div.product .product_title{ font-size:26px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs{ gap:22px; overflow-x:auto; }
}

.mtr-spec-title{ font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--ink); margin:30px 0 8px; }

/* ---- 22.6 Woo buttons + cart layout (mockup: table left, summary right) ---- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{ background:var(--ink); color:#fff; border:0; border-radius:8px; padding:12px 20px; font-family:var(--font-body); font-size:13px; font-weight:700; line-height:1.2; transition:background .15s ease; }
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{ background:var(--red); color:#fff; }
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce a.checkout-button{ background:var(--red); color:#fff; }
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce a.checkout-button:hover{ background:var(--red-dark); color:#fff; }
.woocommerce button.button:disabled,.woocommerce button.button[disabled]{ background:var(--paper); color:var(--steel); border:1px solid var(--line); opacity:1; cursor:not-allowed; }

.woocommerce-cart .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:32px; align-items:start; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,.woocommerce-cart .woocommerce > .cart-empty,.woocommerce-cart .woocommerce > .return-to-shop{ grid-column:1 / -1; }
.woocommerce-cart .woocommerce-cart-form{ min-width:0; }
.woocommerce-cart .cart-collaterals{ width:100%; float:none; }
.woocommerce-cart .cart-collaterals .cart_totals{ width:100%; float:none; }
.woocommerce-cart .cart_totals h2{ font-family:var(--font-head); font-size:17px; font-weight:700; margin:0 0 16px; }
.woocommerce-cart .cart_totals table{ width:100%; border:0; border-collapse:collapse; margin:0 0 18px; }
.woocommerce-cart .cart_totals table th,.woocommerce-cart .cart_totals table td{ border:0; border-top:1px solid var(--line); background:none; padding:14px 0; font-size:14px; }
.woocommerce-cart .cart_totals table tr:first-child th,.woocommerce-cart .cart_totals table tr:first-child td{ border-top:0; }
.woocommerce-cart .cart_totals table th{ text-align:left; font-weight:700; color:var(--ink); }
.woocommerce-cart .cart_totals table td{ text-align:right; font-family:var(--font-mono); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ display:block; width:100%; padding:15px 18px; text-align:center; border-radius:8px; font-size:14px; }
.woocommerce-cart table.cart td.product-name a{ font-weight:700; color:var(--ink); }
.woocommerce-cart table.cart td.product-name a:hover{ color:var(--red); }
.woocommerce-cart dl.variation{ display:flex; flex-wrap:wrap; gap:2px 6px; margin:6px 0 0; font-size:12px; color:var(--steel); }
.woocommerce-cart dl.variation dt,.woocommerce-cart dl.variation dd{ margin:0; float:none; }
.woocommerce-cart dl.variation dd p{ margin:0; }
.woocommerce-cart table.cart td.actions{ padding:16px; background:#fff; }
.woocommerce-cart table.cart td.actions .coupon{ display:inline-flex; gap:8px; float:left; }
.woocommerce-cart table.cart td.actions .coupon .input-text{ width:180px; border:1px solid var(--line); border-radius:8px; padding:11px 14px; font:inherit; font-size:13px; }
.woocommerce-cart table.cart td.actions > button[name="update_cart"]{ float:right; }
.woocommerce-cart .quantity .qty{ width:64px; border:1px solid var(--line); border-radius:8px; padding:9px 8px; text-align:center; font:600 14px var(--font-body); }
@media (max-width:960px){ .woocommerce-cart .woocommerce{ grid-template-columns:1fr; } }
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image img{ border-radius:16px; }

/* =========================================================
   23. STICKY HEADER + MEGA MENU — v1.5.0
   ========================================================= */
header.site-header{ position:sticky; top:0; z-index:90; }
body:not(.mtr-sticky) header.site-header{ position:relative; }
.admin-bar header.site-header{ top:32px; }
@media (max-width:782px){ .admin-bar header.site-header{ top:46px; } }
@media (max-width:600px){ .admin-bar header.site-header{ top:0; } }
html{ scroll-padding-top:calc(var(--header-h,72px) + 16px); }
.mtr-shrink .site-header .nav-row{ transition:padding .2s ease; }
.mtr-shrink .site-header .logo--image img,.mtr-shrink .site-header .logo--image .custom-logo{ transition:height .2s ease; }
.mtr-shrink .site-header.is-scrolled{ box-shadow:0 8px 28px rgba(20,21,26,.08); }
@media (min-width:861px){
  .mtr-shrink .site-header.is-scrolled .nav-row{ padding-top:10px; padding-bottom:10px; }
  .mtr-shrink .site-header.is-scrolled .logo--image img,.mtr-shrink .site-header.is-scrolled .logo--image .custom-logo{ height:calc(var(--logo-h,40px) * .82); }
}

/* Toggle chevron (all items with a submenu / mega panel) */
.mega-toggle{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:32px; margin-left:-2px; padding:0; border:0; background:none; color:var(--steel); cursor:pointer; border-radius:6px; transition:color .15s ease; }
.mega-toggle svg{ width:14px; height:14px; transition:transform .2s ease; }
.has-toggle:is(:hover,:focus-within,.is-open) > .mega-toggle{ color:var(--red); }
.has-toggle:is(.is-open) > .mega-toggle svg,
.has-toggle:not(.is-dismissed):is(:hover,:focus-within) > .mega-toggle svg{ transform:rotate(180deg); }
.mega-toggle:focus-visible{ outline:2px solid var(--red); outline-offset:1px; }
.nav-links .has-toggle > a::after{ content:none; }
.nav-links li.current-menu-item.has-toggle > a::after,
.nav-links li.current_page_item.has-toggle > a::after,
.nav-links li.current-menu-parent.has-toggle > a::after,
.nav-links li.current-menu-ancestor.has-toggle > a::after,
.nav-links li.current_page_parent.has-toggle > a::after{ content:""; }

.mega-backdrop{ display:none; }

@media (min-width:861px){
  .nav-links{ align-items:center; }
  .nav-links > li{ display:flex; align-items:center; }
  .nav-links > li.has-mega{ position:static; }

  .mega-panel,
  .nav-links .mega-links > .sub-menu{
    position:absolute; left:0; right:0; top:100%; margin-top:-1px; min-width:0;
    background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px;
    box-shadow:0 34px 60px -24px rgba(20,21,26,.30); z-index:5;
    max-height:calc(100vh - var(--header-h,72px) - 28px); overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s ease .1s, transform .18s ease .1s, visibility 0s linear .28s;
  }
  .mega-panel::before,
  .nav-links .mega-links > .sub-menu::before{ content:""; position:absolute; left:0; right:0; top:-28px; height:28px; }
  .has-mega:is(:hover,:focus-within,.is-open):not(.is-dismissed) > .mega-panel,
  .has-mega.mega-links:is(:hover,:focus-within,.is-open):not(.is-dismissed) > .sub-menu{
    opacity:1; visibility:visible; transform:none; transition-delay:.06s,.06s,0s;
  }
  .has-mega.is-dismissed > .mega-panel,
  .has-mega.is-dismissed > .sub-menu{ opacity:0 !important; visibility:hidden !important; }

  .mega-backdrop{
    display:block; position:fixed; inset:0; background:rgba(20,21,26,.38); z-index:80;
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s linear .2s;
  }
  .site-header:has(.has-mega:is(:hover,:focus-within,.is-open):not(.is-dismissed) > :is(.mega-panel,.sub-menu)) + .mega-backdrop{
    opacity:1; visibility:visible; transition:opacity .2s ease .06s;
  }

  /* plain dropdown card */
  .nav-links > li:not(.has-mega) > .sub-menu{ min-width:250px; padding:10px; border-radius:14px; box-shadow:0 24px 48px -20px rgba(20,21,26,.30); top:100%; }
  .nav-links > li:not(.has-mega) > .sub-menu::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
  .nav-links > li.has-toggle:not(.has-mega):is(:hover,:focus-within,.is-open) > .sub-menu{ opacity:1; visibility:visible; transform:none; }
  .nav-links .sub-menu a{ white-space:normal; padding:10px 12px; line-height:1.35; }
  .menu-desc{ display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--steel); line-height:1.4; }

  /* mega-links: children become columns */
  .nav-links .mega-links > .sub-menu{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px 28px; padding:28px 32px 30px; list-style:none; margin-left:0; }
  .nav-links .mega-links > .sub-menu > li > a{ font-weight:700; font-size:14px; padding:10px 12px; }
  .nav-links .mega-links .sub-menu .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; border:0; box-shadow:none; padding:0 0 0 12px; min-width:0; background:none; display:block; }

  /* panel body */
  .mega-inner{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:0 36px; padding:28px 32px 26px; }
  .mega-panel--blog .mega-inner{ grid-template-columns:220px minmax(0,1fr); }
  .mega-side{ border-right:1px solid var(--line); padding-right:28px; min-width:0; }
  .mega-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:26px -32px -26px; padding:16px 32px; background:var(--paper); border-top:1px solid var(--line); border-radius:0 0 18px 18px; }
}

.mega-title{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin:0 0 12px; }
.mega-title--sp{ margin-top:22px; }
.mega-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.mega-list a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; }
.mega-list a:hover,.mega-list a:focus-visible{ background:var(--paper); color:var(--red); }
.mega-list__icon{ width:30px; height:30px; border-radius:9px; background:var(--red-tint); color:var(--red); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.mega-list__icon svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mega-list__label{ flex:1; min-width:0; }
.mega-list small{ font-size:11px; font-weight:500; color:var(--steel); font-family:var(--font-mono); }
.mega-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mega-chip{ font-size:12px; font-weight:600; padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink); line-height:1.2; transition:all .15s ease; }
.mega-chip:hover,.mega-chip:focus-visible{ border-color:var(--red); color:var(--red); background:var(--red-tint); }
.mega-main{ min-width:0; }
.mega-main__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; }
.mega-main__head .mega-title{ margin:0; }
.mega-all{ font-size:13px; font-weight:700; color:var(--red); white-space:nowrap; }
.mega-all:hover{ color:var(--red-dark); }
.mega-grid{ display:grid; gap:20px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.mega-grid--1{ grid-template-columns:minmax(0,280px); }
.mega-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mega-card{ display:flex; flex-direction:column; gap:3px; color:var(--ink); min-width:0; }
.mega-card__img{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:12px; border:1px solid var(--line); background:var(--paper); margin-bottom:8px; transition:border-color .15s ease, box-shadow .15s ease; }
.mega-card__img img,
.mega-card__img .mtr-ph-img,
.mega-card__img .post-card__thumb-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; aspect-ratio:auto; display:block; margin:0; }
.mega-card__img .ph-label{ display:none; }
.mega-card__img .conn-badge,.mega-card__img .badge-pill{ top:8px; font-size:9px; padding:4px 8px; }
.mega-card__img .conn-badge{ right:8px; }
.mega-card__img .badge-pill{ left:8px; }
.mega-card__img .conn-badge svg{ width:10px; height:10px; }
.mega-card:hover .mega-card__img,.mega-card:focus-visible .mega-card__img{ border-color:var(--red); box-shadow:0 10px 24px -12px rgba(20,21,26,.35); }
.mega-card__cat{ font-size:11px; font-weight:600; color:var(--steel); }
.mega-card__name{ font-family:var(--font-head); font-size:14px; font-weight:700; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mega-card:hover .mega-card__name,.mega-card:focus-visible .mega-card__name{ color:var(--red); }
.mega-card__price{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--red); }
.mega-card__price del{ color:var(--steel); font-weight:400; font-size:11px; margin-right:4px; opacity:.8; }
.mega-card__price ins{ background:none; text-decoration:none; }
.mega-card__meta{ font-size:11px; color:var(--steel); }
.mega-empty{ font-size:13px; color:var(--steel); margin:0; }
.mega-foot__text{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--steel); }
.mega-foot__text strong{ font-size:14px; color:var(--ink); }
.mega-foot .btn-wa{ padding:10px 18px; font-size:13px; white-space:nowrap; }
.mega-foot .btn-wa svg{ width:17px; height:17px; }

/* ---- Mobile drawer: accordion ---- */
@media (max-width:860px){
  .nav-drawer .nav-links > li.has-toggle{ display:flex; flex-wrap:wrap; align-items:stretch; }
  .nav-drawer .nav-links > li.has-toggle > a{ flex:1 1 0; min-width:0; }
  .mega-toggle{ width:52px; height:auto; min-height:48px; margin:0; border-left:1px solid var(--line); border-radius:0; color:var(--ink); }
  .mega-toggle svg{ width:18px; height:18px; }
  .has-toggle.is-open > .mega-toggle{ color:var(--red); }
  .has-toggle.is-open > .mega-toggle svg{ transform:rotate(180deg); }
  .nav-drawer .nav-links > li.has-toggle > .mega-panel,
  .nav-drawer .nav-links > li.has-toggle > .sub-menu{
    flex:0 0 100%; display:none; position:static; opacity:1; visibility:visible; transform:none; width:auto; max-height:none;
    margin:0; border:0; border-radius:0; box-shadow:none; background:none; padding:0 0 12px;
  }
  .nav-drawer .nav-links > li.has-toggle.is-open > .mega-panel,
  .nav-drawer .nav-links > li.has-toggle.is-open > .sub-menu{ display:block; }
  .nav-drawer .nav-links .sub-menu a{ padding:12px 0 12px 12px; font-size:14px; white-space:normal; }
  .mega-inner{ display:block; padding:4px 0 6px; }
  .mega-side{ padding:0 0 14px; }
  .mega-list a{ padding:11px 8px; min-height:44px; }
  .mega-main__head{ margin:6px 0 12px; flex-wrap:wrap; }
  .mega-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .mega-grid--1{ grid-template-columns:minmax(0,1fr); }
  .mega-card__name{ font-size:13px; }
  .mega-foot{ margin:18px 0 0; padding:14px; border-radius:12px; background:var(--paper); display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .mega-foot .btn-wa{ justify-content:center; }
  .nav-links .has-toggle > a::after{ content:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .mega-panel,.mega-backdrop,.mega-toggle svg,.nav-links .sub-menu{ transition:none !important; }
}

/* Mega panel links live inside .nav-links — beat the generic ".nav-links a" rule */
.mega-panel a.mega-chip{ padding:7px 12px; font-size:12px; font-weight:600; color:var(--ink); }
.mega-panel a.mega-chip:hover,.mega-panel a.mega-chip:focus-visible{ color:var(--red); }
.mega-panel a.mega-all{ padding:0; font-size:13px; font-weight:700; color:var(--red); }
.mega-panel a.mega-all:hover{ color:var(--red-dark); }
.mega-panel a.mega-card{ padding:0; font-weight:400; color:var(--ink); }
.mega-panel a.mega-list__link,.mega-panel .mega-list a{ font-weight:600; }
.mega-panel .mega-foot a.btn-wa{ display:inline-flex; width:auto; flex:0 0 auto; padding:10px 18px; font-size:13px; color:#fff; }
.mega-panel .mega-foot a.btn-wa:hover{ color:#fff; }

@media (max-width:860px){
  .mega-panel--blog .mega-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .mega-card--post{ display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:12px; align-content:start; }
  .mega-card--post .mega-card__img{ grid-row:1 / span 3; grid-column:1; margin:0; aspect-ratio:1/1; }
  .mega-card--post > :not(.mega-card__img){ grid-column:2; }
}

/* =========================================================
   24. RESPONSIVE + USABILITY PASS — v1.5.0
   ========================================================= */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:1100; background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px; font-weight:700; font-size:14px; transition:top .15s ease; }
.skip-link:focus{ top:12px; }
.admin-bar .skip-link:focus{ top:44px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
:focus:not(:focus-visible){ outline:none; }
.cart-count,.post-card__cat{ font-size:11px; }
.badge-pill,.woocommerce span.onsale,.woocommerce ul.products li.product .onsale{ font-size:11px; }
img{ max-width:100%; height:auto; }
iframe,video{ max-width:100%; }
table{ max-width:100%; }

/* Header between tablet and small desktop (861–1120px): tighter so nothing overflows */
@media (min-width:861px) and (max-width:1120px){
  .nav-row{ padding-left:20px; padding-right:20px; gap:14px; }
  .nav-links{ gap:18px; font-size:13.5px; }
  .header-actions{ gap:12px; }
  .header-cta{ padding:10px 14px; font-size:13px; }
  .logo{ font-size:17px; }
  .mega-inner{ grid-template-columns:220px minmax(0,1fr); gap:0 24px; padding:24px 24px 22px; }
  .mega-grid{ gap:14px; }
  .mega-foot{ margin:22px -24px -22px; padding:14px 24px; }
}
@media (min-width:861px) and (max-width:980px){
  .header-cta svg{ display:none; }
  .nav-links{ gap:14px; }
}

/* Touch + mobile ergonomics */
@media (max-width:860px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=hidden]),
  select,textarea,.woocommerce .quantity .qty{ font-size:16px !important; }
  .logo{ min-height:44px; }
  .post-card__more{ display:inline-flex; align-items:center; min-height:44px; }
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.btn,.pf-submit{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .woocommerce ul.products li.product .button{ min-height:44px; }
  .pagination-wrap .page-numbers,.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{ min-width:44px; min-height:44px; }
  .mtr-sp-cat,.woocommerce-review-link{ display:inline-block; padding:8px 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{ padding:14px 0; }
  .footer-grid a{ display:inline-block; padding:4px 0; }
  .woocommerce-cart a.remove{ width:40px !important; height:40px !important; font-size:20px !important; display:inline-flex !important; align-items:center; justify-content:center; }
  .shop-sidebar{ width:100%; }
  .shop-layout{ flex-direction:column; }
}

/* Cart as stacked cards on phones / small tablets */
@media (max-width:768px){
  .woocommerce-cart table.cart,.woocommerce-cart table.cart tbody,.woocommerce-cart table.cart tr,.woocommerce-cart table.cart td{ display:block; width:100%; box-sizing:border-box; }
  .woocommerce-cart table.cart{ border:0; border-radius:0; overflow:visible; background:none; }
  .woocommerce-cart table.cart thead{ display:none; }
  .woocommerce-cart table.cart tr.cart_item{ position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:0 14px; padding:16px 14px 6px; margin:0 0 14px; background:#fff; border:1px solid var(--line); border-radius:14px; }
  .woocommerce-cart table.cart tr.cart_item td{ border:0; padding:0; text-align:right; }
  .woocommerce-cart table.cart tr.cart_item td::before{ float:none !important; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--steel); }
  .woocommerce-cart table.cart td.product-remove{ position:absolute; top:6px; right:6px; width:auto; z-index:2; }
  .woocommerce-cart table.cart td.product-remove::before{ display:none; }
  .woocommerce-cart table.cart td.product-thumbnail{ display:block !important; grid-column:1; grid-row:1; margin-bottom:12px; }
  .woocommerce-cart table.cart td.product-thumbnail::before,.woocommerce-cart table.cart td.product-name::before{ display:none !important; }
  .woocommerce-cart table.cart td.product-thumbnail img,.woocommerce-cart td.product-thumbnail .mtr-ph-img{ width:72px; height:72px; border-radius:10px; object-fit:cover; }
  .woocommerce-cart table.cart td.product-name{ grid-column:2; grid-row:1; text-align:left; padding-right:34px; margin-bottom:12px; }
  .woocommerce-cart table.cart td.product-price,.woocommerce-cart table.cart td.product-quantity,.woocommerce-cart table.cart td.product-subtotal{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px dashed var(--line); }
  .woocommerce-cart table.cart td.actions{ padding:0; border:0; background:none; }
  .woocommerce-cart table.cart td.actions .coupon{ float:none; display:flex; gap:8px; width:100%; margin:0 0 10px; }
  .woocommerce-cart table.cart td.actions .coupon .input-text{ flex:1; min-width:0; width:auto; }
  .woocommerce-cart table.cart td.actions > button[name="update_cart"]{ float:none; width:100%; }
  .woocommerce-cart table.cart td.actions::before{ display:none; }
}

/* Tablet-landscape header: never wrap menu labels; CTA lives in the menu (Kontak) when very tight */
.nav-links > li > a{ white-space:nowrap; }
@media (min-width:861px) and (max-width:980px){ .header-cta{ display:none; } }
.header-cart .cart-count{ font-size:11px; }
.woocommerce div.product span.onsale,.badge-pill.is-best,.badge-pill{ font-size:11px; }

/* Bigger tap areas for list links (shop filters, footer, category lists) */
@media (max-width:860px){
  .shop-widget ul li a,.shop-widget--conn a,.widget_product_categories a{ display:flex; align-items:center; min-height:44px; padding:6px 0; }
  .post-card__title a{ display:inline-block; padding:4px 0; }
  .pf-reset{ display:inline-block; padding:12px 4px; }
  .mtr-sp-cat{ min-height:36px; }
}
@media (max-width:860px){
  .footer-grid ul{ gap:0; }
  .footer-grid li a{ display:inline-block; padding:9px 0; }
}

@media (max-width:768px){
  .woocommerce-cart table.cart tr.cart_item td.product-name,
  .woocommerce-cart table.cart tr.cart_item td.product-name *{ text-align:left !important; }
  .woocommerce-cart table.cart td.product-name{ min-width:0; overflow-wrap:anywhere; }
  .woocommerce-cart table.cart td.product-name a{ display:block; font-size:15px; line-height:1.35; }
}
/* The cart + checkout already have their own WhatsApp CTA — don't let the floating bubble cover totals */
body.woocommerce-cart .wa-float,
body.woocommerce-checkout .wa-float{ display:none; }


/* =========================================================
   25. HEADER OVERFLOW GUARD — v1.5.2
   ========================================================= */
header.site-header{ overflow-x:clip; }
@media (min-width:861px){
  .site-header .nav-row{ max-width:min(1180px,100%); }
  .site-header .nav-links{ min-width:0; }
  .nav-links > li.mtr-more{ position:relative; }
  .nav-links > li.mtr-more > .sub-menu{ right:0; left:auto; min-width:240px; max-height:70vh; overflow-y:auto; }
  .nav-links > li.mtr-more:is(:hover,:focus-within,.is-open) > .sub-menu{ opacity:1; visibility:visible; transform:none; }
  /* items moved into "Lainnya" become plain links */
  .mtr-more .sub-menu > li{ display:block; }
  .mtr-more .sub-menu > li > a{ display:block; padding:10px 12px; white-space:normal; }
  .mtr-more .sub-menu .mega-panel,.mtr-more .sub-menu .sub-menu,.mtr-more .sub-menu .mega-toggle{ display:none !important; }
  .mtr-more.has-current > a{ color:var(--red); }
}


/* =========================================================
   26. TATA LETAK OTOMATIS (smart layout) — v1.6.0
   ========================================================= */
.mtr-smart{ overflow-wrap:anywhere; }
.mtr-smart .eyebrow{ margin:0 0 10px; }
.mtr-smart-crumbs{ display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--steel); margin:0 0 22px; }
.mtr-smart-crumbs a{ color:var(--steel); }
.mtr-smart-crumbs a:hover{ color:var(--red); }
.mtr-smart-crumbs span[aria-current]{ color:var(--ink); font-weight:600; }

.mtr-smart-hero{ background:var(--paper); padding:36px 0 64px; border-bottom:1px solid var(--line); }
.mtr-smart-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:center; }
.mtr-smart-hero__grid:not(.has-media){ max-width:820px; }
.mtr-smart-hero__grid.has-media{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
.mtr-smart-hero__title{ font-family:var(--font-head); font-size:clamp(32px,4.2vw,52px); font-weight:800; line-height:1.08; letter-spacing:-.02em; color:var(--ink); margin:0 0 14px; }
.mtr-smart-hero__sub{ font-family:var(--font-head); font-size:clamp(17px,1.7vw,21px); font-weight:700; line-height:1.4; color:var(--red); margin:0 0 16px; }
.mtr-smart-hero__lead{ font-size:16.5px; line-height:1.75; color:#3d4049; margin:0 0 12px; }
.mtr-smart-hero__figure{ margin:0; }
.mtr-smart-hero__figure img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 30px 60px -30px rgba(20,21,26,.35); }

.mtr-smart-sec{ padding:72px 0; }
.mtr-smart-sec.is-alt{ background:var(--paper); }
.mtr-smart-after-hero{ padding:44px 0 8px; }
.mtr-smart-sec__head{ max-width:760px; margin:0 0 26px; }
.mtr-smart-sec__title{ font-family:var(--font-head); font-size:clamp(25px,3vw,36px); font-weight:800; line-height:1.18; letter-spacing:-.015em; color:var(--ink); margin:0; }
.mtr-smart-sec__body{ max-width:820px; }
.mtr-smart-sec__body.has-media{ max-width:none; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:center; }
.mtr-smart-sec__media{ margin:0; }
.mtr-smart-sec__media img{ width:100%; height:auto; border-radius:16px; }
.mtr-smart-p{ font-size:16px; line-height:1.8; color:#3a3d45; margin:0 0 14px; }
.mtr-smart-p a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.mtr-smart-quote{ margin:20px 0; padding:4px 0 4px 18px; border-left:3px solid var(--red); font-size:17px; line-height:1.7; color:var(--ink); font-style:italic; }
.mtr-smart-h4{ font-size:16px; font-weight:700; margin:22px 0 8px; color:var(--ink); }
.mtr-smart-label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin:16px 0 6px; }
.mtr-smart-caption{ font-size:13px; color:var(--steel); margin:-4px 0 16px; }

.mtr-smart-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.mtr-smart-chip{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; line-height:1.2; padding:7px 12px; border-radius:999px; background:var(--red-tint); color:var(--red); }
.mtr-smart-hero .mtr-smart-chip{ background:#fff; border:1px solid var(--line); color:var(--ink); }

.mtr-smart-checks{ list-style:none; margin:16px 0 18px; padding:0; display:grid; gap:10px 26px; }
.mtr-smart-checks.is-2col{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mtr-smart-checks li{ position:relative; padding-left:30px; font-size:15px; line-height:1.6; color:#3a3d45; }
.mtr-smart-checks li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:var(--red-tint); }
.mtr-smart-checks li::after{ content:""; position:absolute; left:7px; top:7px; width:6px; height:9px; border:solid var(--red); border-width:0 2px 2px 0; transform:rotate(45deg); }

.mtr-smart-features{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 20px; }
.mtr-smart-feature{ display:flex; flex-direction:column; gap:4px; padding:16px 18px 16px 50px; position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; }
.mtr-smart-feature::before{ content:""; position:absolute; left:16px; top:17px; width:22px; height:22px; border-radius:7px; background:var(--red-tint); }
.mtr-smart-feature::after{ content:""; position:absolute; left:24px; top:22px; width:6px; height:10px; border:solid var(--red); border-width:0 2px 2px 0; transform:rotate(45deg); }
.mtr-smart-feature strong{ font-size:15px; color:var(--ink); }
.mtr-smart-feature span{ font-size:13.5px; line-height:1.6; color:var(--steel); }

.mtr-smart-btns{ display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 8px; }
.mtr-smart-btn-outline{ border:1.5px solid var(--red); color:var(--red); background:transparent; }
.mtr-smart-btn-outline:hover{ background:var(--red); color:#fff; }
.mtr-smart-btn-line{ border:1.5px solid rgba(255,255,255,.7); color:#fff; background:transparent; }
.mtr-smart-btn-line:hover{ background:#fff; color:var(--red); }

.mtr-smart-cards{ display:grid; gap:20px; margin:10px 0 6px; }
.mtr-smart-cards.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mtr-smart-cards.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mtr-smart-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; transition:border-color .15s ease, box-shadow .15s ease; }
.mtr-smart-card:hover{ border-color:#e7c3c3; box-shadow:0 16px 34px -22px rgba(20,21,26,.3); }
.mtr-smart-card__title{ font-family:var(--font-head); font-size:18px; font-weight:700; line-height:1.3; color:var(--ink); margin:0 0 10px; }
.mtr-smart-card .mtr-smart-p{ font-size:14.5px; line-height:1.7; }
.mtr-smart-card .mtr-smart-chip{ font-size:12px; padding:6px 10px; }
.mtr-smart-card__link{ margin-top:auto; padding-top:12px; font-size:13.5px; font-weight:700; color:var(--red); }
.mtr-smart-cards.is-jobs .mtr-smart-card{ padding:20px 22px; }
.mtr-smart-cards.is-jobs .mtr-smart-chips{ margin:4px 0 4px; }
.mtr-smart-tagline{ margin:30px 0 0; padding-left:16px; border-left:4px solid var(--red); font-family:var(--font-head); font-size:clamp(18px,2vw,22px); font-weight:700; line-height:1.4; color:var(--ink); }

.mtr-smart-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.mtr-smart-gallery.is-single{ grid-template-columns:minmax(0,1fr); max-width:980px; margin:0 auto; }
.mtr-smart-figure{ margin:18px 0; }
.mtr-smart-gallery .mtr-smart-figure{ margin:0; }
.mtr-smart-figure img{ display:block; width:100%; height:auto; border-radius:14px; }
.mtr-smart-figure figcaption{ font-size:13px; color:var(--steel); margin-top:8px; text-align:center; }
.mtr-smart-table{ overflow-x:auto; margin:16px 0; }
.mtr-smart-table table{ width:100%; border-collapse:collapse; }
.mtr-smart-table th,.mtr-smart-table td{ border:1px solid var(--line); padding:10px 12px; font-size:14px; text-align:left; }

.mtr-smart-form{ max-width:680px; margin:18px 0 6px; padding:24px 26px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 40px -30px rgba(20,21,26,.35); }
.mtr-smart-form__title{ font-family:var(--font-head); font-size:18px; font-weight:700; margin:0 0 4px; color:var(--ink); }

.mtr-smart-cta{ padding:24px 0 88px; }
.mtr-smart-cta__box{ position:relative; overflow:hidden; border-radius:24px; padding:52px 48px; background:linear-gradient(120deg,var(--red) 0%,#b31d23 55%,#2a0f12 100%); color:#fff; text-align:center; }
.mtr-smart-cta__kicker{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); margin:0 0 10px; }
.mtr-smart-cta__title{ font-family:var(--font-head); font-size:clamp(26px,3.4vw,40px); font-weight:800; line-height:1.15; color:#fff; margin:0 auto 14px; max-width:760px; }
.mtr-smart-cta__text{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.9); max-width:680px; margin:0 auto 6px; }
.mtr-smart-cta .mtr-smart-btns{ justify-content:center; }
.mtr-smart-cta__tagline{ margin:22px 0 0; font-size:13px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.75); }

/* flow chain, "A -> B" transforms, numbered cards, step cards */
.mtr-smart-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:6px 0 18px; }
.mtr-smart-flow .mtr-smart-chip{ background:var(--paper); border:1px solid var(--line); color:var(--ink); font-weight:700; }
.mtr-smart-flow__arrow{ color:var(--red); font-weight:700; }
.mtr-smart-trans{ list-style:none; margin:6px 0 18px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mtr-smart-trans li{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:14.5px; }
.mtr-smart-trans__from{ color:var(--steel); text-decoration:line-through; text-decoration-color:rgba(220,38,38,.45); }
.mtr-smart-trans__arrow{ color:var(--red); font-weight:700; }
.mtr-smart-trans strong{ color:var(--ink); }
.mtr-smart-card__num{ display:inline-flex; align-self:flex-start; margin:0 0 12px; padding:3px 8px; border-radius:6px; background:var(--red-tint,#fdecec); color:var(--red); font:700 12px var(--font-mono,monospace); }
.mtr-smart-cards.is-steps{ counter-reset:none; }
.mtr-smart-cards.is-steps .mtr-smart-card{ position:relative; }
.mtr-smart-cards.is-steps .mtr-smart-card__num{ width:34px; height:34px; padding:0; justify-content:center; align-items:center; border-radius:50%; background:var(--red); color:#fff; }

@media (max-width:1024px){
  .mtr-smart-cards.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .mtr-smart-hero{ padding:24px 0 44px; }
  .mtr-smart-hero__grid.has-media,.mtr-smart-sec__body.has-media{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .mtr-smart-sec{ padding:52px 0; }
  .mtr-smart-features,.mtr-smart-checks.is-2col,.mtr-smart-gallery{ grid-template-columns:minmax(0,1fr); }
  .mtr-smart-cta__box{ padding:38px 22px; border-radius:18px; }
}
@media (max-width:600px){
  .mtr-smart-cards.cols-2,.mtr-smart-cards.cols-3{ grid-template-columns:minmax(0,1fr); }
  .mtr-smart-trans{ grid-template-columns:minmax(0,1fr); }
  .mtr-smart-btns .btn{ flex:1 1 100%; justify-content:center; }
}
.mtr-smart-btns .btn-wa{ width:auto; flex:0 0 auto; }
@media (max-width:600px){ .mtr-smart-btns .btn-wa{ flex:1 1 100%; } }

/* smart layout: image groups */
.mtr-smart-logos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin:18px 0 22px; }
.mtr-smart-logo{ margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px; min-height:120px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.mtr-smart-logo img{ display:block; max-width:100%; max-height:150px; width:auto; height:auto; object-fit:contain; }
.mtr-smart-logo figcaption{ font-size:12px; color:var(--steel); text-align:center; }
.mtr-smart-sec__text .mtr-smart-gallery{ margin:18px 0; }
@media (max-width:600px){ .mtr-smart-logos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ==========================================================================
   27. Mega menu kolom (v1.7.0) — any top item with sub-items, configured per
   item in Appearance > Menus (inc/menu-fields.php)
   ========================================================================== */
.menu-ic{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:10px; background:var(--red-tint); color:var(--red); }
.menu-ic svg{ width:18px; height:18px; }
.menu-badge{ display:inline-block; margin-left:8px; padding:2px 7px; border-radius:999px; background:var(--red); color:#fff; font-size:10px; font-weight:700; letter-spacing:.04em; line-height:1.5; text-transform:uppercase; vertical-align:middle; }
.nav-links > li > a .menu-ic{ width:auto; height:auto; background:none; margin-right:6px; }
.nav-links > li > a .menu-ic svg{ width:16px; height:16px; }
.nav-links > li > a{ align-items:center; }
.mega-intro{ display:none; }

@media (min-width:861px){
  .nav-links .mega-links > .sub-menu.mega-cols{ grid-template-columns:repeat(var(--mega-cols,3),minmax(0,1fr)); grid-auto-rows:min-content; align-items:start; gap:4px 24px; padding:26px 32px 28px; }
  .nav-links .mega-links > .sub-menu.mega-cols.has-intro{ padding-left:calc(32px + 270px + 28px); min-height:300px; }
  .nav-links .mega-cols > li{ min-width:0; }
  .nav-links .mega-cols > li > a{ display:grid; grid-template-columns:minmax(0,1fr); align-items:start; column-gap:12px; padding:12px; border-radius:12px; font-weight:700; font-size:14px; line-height:1.35; color:var(--ink); }
  .nav-links .mega-cols > li > a:has(.menu-ic){ grid-template-columns:34px minmax(0,1fr); }
  .nav-links .mega-cols > li > a .menu-ic{ grid-row:span 2; }
  .nav-links .mega-cols > li > a .menu-tx{ align-self:center; min-height:20px; }
  .nav-links .mega-cols > li > a:hover{ background:var(--paper); color:var(--red); }
  .nav-links .mega-cols .menu-desc{ grid-column:-2 / -1; margin-top:3px; font-weight:400; }
  .nav-links .mega-cols > li > .sub-menu{ padding:0 0 6px 12px; }
  .nav-links .mega-cols > li > .sub-menu a{ font-size:13px; font-weight:500; padding:7px 12px; color:var(--steel); }
  .nav-links .mega-cols > li > .sub-menu a:hover{ color:var(--red); background:none; }
  .nav-links .mega-cols > li > .mega-toggle{ display:none; }
  .nav-links .mega-cols .menu-item-has-children > a::after{ content:none; }

  .nav-links .mega-cols > li.mega-intro{ position:absolute; left:32px; top:26px; bottom:28px; width:270px; overflow:hidden; }
  .mega-intro{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:22px; border-radius:16px; background:linear-gradient(160deg,var(--paper) 0%,#fff 100%); border:1px solid var(--line); }
  .mega-intro__ic{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:var(--red); color:#fff; margin-bottom:4px; }
  .mega-intro__ic svg{ width:22px; height:22px; }
  .mega-intro__title{ font-family:var(--font-head); font-size:18px; font-weight:800; line-height:1.25; color:var(--ink); }
  .mega-intro__text{ font-size:13px; line-height:1.6; color:var(--steel); }
  .nav-links .mega-intro .mega-intro__btn{ flex-shrink:0; margin-top:auto; padding:9px 14px; border-radius:10px; background:var(--red); color:#fff; font-size:13px; font-weight:700; line-height:1.2; }
  .nav-links .mega-intro .mega-intro__btn:hover{ background:#b31d23; color:#fff; }
}
@media (max-width:860px){
  .nav-drawer .nav-links .sub-menu a{ display:flex; align-items:center; gap:10px; }
  .nav-drawer .menu-ic{ width:28px; height:28px; border-radius:8px; }
  .nav-drawer .menu-ic svg{ width:15px; height:15px; }
  .nav-drawer .sub-menu .menu-desc{ display:none; }
}

/* ==========================================================================
   28. Header hover fix (v1.8.0): no dead gap between a menu item and its panel
   ========================================================================== */
@media (min-width:861px){
  /* The hover area of each top item reaches down to the bottom of the header
     (panels start there), so the pointer never leaves the item on its way down. */
  .site-header .nav-links > li{ padding-bottom:26px; margin-bottom:-26px; }
  .mtr-shrink .site-header.is-scrolled .nav-links > li{ padding-bottom:20px; margin-bottom:-20px; }
  /* With the script running, panels open from .is-open (hover intent) instead of bare :hover. */
  .nav-links.mtr-hoverjs > li.has-toggle:not(.mtr-more):not(.is-open):not(:focus-within) > .mega-panel,
  .nav-links.mtr-hoverjs > li.has-toggle:not(.mtr-more):not(.is-open):not(:focus-within) > .sub-menu{ opacity:0; visibility:hidden; transform:translateY(8px); }
  .site-header:has(.mtr-hoverjs) + .mega-backdrop{ opacity:0 !important; visibility:hidden !important; }
  .site-header:has(.mtr-hoverjs > .has-mega:is(.is-open,:focus-within):not(.is-dismissed)) + .mega-backdrop{ opacity:1 !important; visibility:visible !important; }
  .nav-links.mtr-hoverjs > li.has-toggle:not(.is-open):not(:focus-within) > .mega-toggle svg{ transform:none; }
  .nav-links.mtr-hoverjs > li.has-toggle.is-open:not(.is-dismissed) > .mega-toggle svg{ transform:rotate(180deg); }
}

/* v1.7.3 — mega menu: label kecil stays next to the title; active sub-item = red text, no underline */
.nav-links .sub-menu .menu-tx{ display:inline; }
.nav-links .sub-menu .menu-badge{ margin-left:6px; padding:1px 6px; font-size:9.5px; position:relative; top:-1px; }
.nav-links .sub-menu li > a::after{ content:none !important; }
.nav-links .sub-menu li:is(.current-menu-item,.current_page_item) > a{ color:var(--red); }
@media (min-width:861px){
  .nav-links .mega-cols > li:is(.current-menu-item,.current_page_item) > a{ background:var(--paper); }
}

/* =========================================================
   28. TATA LETAK OTOMATIS v2 — widget "Konten Halaman" (v1.7.4)
   Halaman Solusi / Industri: satu teks, dipecah jadi section rapi.
   ========================================================= */
.mtr-sx .mtr-smart-sec{ padding:clamp(52px,7vw,88px) 0; }
.mtr-sx .mtr-smart-sec.is-alt{ background:var(--paper); }
.mtr-sx .mtr-smart-sec__head{ max-width:720px; margin:0 0 clamp(22px,3vw,34px); }
.mtr-sx .mtr-smart-sec__title{ font-size:clamp(26px,3.1vw,38px); letter-spacing:-.02em; text-wrap:balance; }
.mtr-sx .mtr-smart-p{ font-size:16px; line-height:1.75; color:#4a4d55; }
.mtr-sx-text{ max-width:720px; }
.mtr-sx-text > :last-child{ margin-bottom:0; }

/* intro */
.mtr-sx .mtr-sx-intro{ padding:clamp(20px,3vw,32px) 0 clamp(48px,6vw,72px); }
.mtr-sx-intro__text{ max-width:820px; }
.mtr-sx-intro .mtr-smart-p{ font-size:16.5px; line-height:1.75; color:#3d4049; }
.mtr-sx-intro h1.mtr-smart-sec__title{ font-size:clamp(32px,4.4vw,52px); line-height:1.08; }
.mtr-sx-banner{ max-width:1000px; margin:clamp(28px,4vw,44px) auto 0; }
.mtr-sx-banner.is-multi{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.mtr-sx-banner__fig{ margin:0; }
.mtr-sx-banner__fig img{ display:block; width:100%; height:auto; border-radius:clamp(14px,2vw,24px); }

/* flow chain */
.mtr-sx .mtr-smart-flow{ gap:10px 8px; margin:18px 0 6px; }
.mtr-sx .mtr-smart-flow .mtr-smart-chip{ padding:9px 14px; font-size:13.5px; font-weight:600; background:#fff; border:1px solid var(--line); border-radius:10px; color:var(--ink); }
.mtr-sx .is-alt .mtr-smart-flow .mtr-smart-chip{ background:#fff; }
.mtr-sx .mtr-smart-flow__arrow{ color:#c4c6cc; font-weight:400; }
.mtr-sx .mtr-smart-chips .mtr-smart-chip{ background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:600; }

/* split: head left (sticky), content right */
.mtr-sx-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start; }
.mtr-sx-split__aside{ position:sticky; top:110px; }
.mtr-sx-split .mtr-smart-sec__head{ margin-bottom:16px; }
.mtr-sx-split .mtr-smart-sec__title{ font-size:clamp(24px,2.6vw,34px); }
.mtr-sx-sec.is-stack .mtr-sx-text + .mtr-sx-grid,
.mtr-sx-sec.is-stack .mtr-sx-text + .mtr-sx-rows{ margin-top:clamp(24px,3vw,36px); }
.mtr-sx-sec.is-closing .mtr-sx-tagline{ margin-top:22px; font-family:inherit; font-size:14px; font-weight:500; color:var(--steel); }
.mtr-sx-split .mtr-smart-btns{ margin-top:22px; }

/* grids */
.mtr-sx-grid{ display:grid; gap:16px; }
.mtr-sx-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mtr-sx-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mtr-sx-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mtr-sx-card{ display:flex; flex-direction:column; padding:26px 24px 24px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.mtr-sx .is-alt .mtr-sx-card{ border-color:transparent; }
.mtr-sx-card__title{ font-family:var(--font-head); font-size:17px; font-weight:700; line-height:1.35; color:var(--ink); margin:0 0 8px; }
.mtr-sx-card .mtr-smart-p{ font-size:14.5px; line-height:1.65; color:var(--steel); margin:0 0 8px; }
.mtr-sx-card > :last-child{ margin-bottom:0; }
.mtr-sx-num{ display:block; margin:0 0 22px; font:600 13px/1 var(--font-mono,ui-monospace,monospace); color:var(--red); letter-spacing:.02em; }
.mtr-sx-grid.is-tiles{ gap:12px; }
.mtr-sx-grid.is-tiles .mtr-sx-card{ padding:22px 20px; border-radius:16px; }
.mtr-sx-grid.is-tiles .mtr-sx-card__title{ font-size:16px; }
.mtr-sx-grid.is-tiles .mtr-sx-card .mtr-smart-p{ font-size:14px; }

/* rows (odd counts) */
.mtr-sx-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.mtr-sx-rows li{ margin:0; padding:22px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:8px 32px; align-items:baseline; }
.mtr-sx-rows__title{ font-family:var(--font-head); font-size:17px; font-weight:700; line-height:1.4; color:var(--ink); margin:0; }
.mtr-sx-rows li > :not(.mtr-sx-rows__title){ grid-column:2; }
.mtr-sx-rows .mtr-smart-p{ font-size:15px; line-height:1.7; color:var(--steel); margin:0; }
.mtr-sx-rows .mtr-smart-flow{ margin:0; }
.mtr-sx-rows .mtr-smart-flow .mtr-smart-chip{ padding:5px 10px; font-size:12.5px; }

/* steps (↓) */
.mtr-sx-steps{ list-style:none; margin:0; padding:0; counter-reset:none; }
.mtr-sx-steps li{ position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; margin:0; padding:0 0 30px; }
.mtr-sx-steps li:last-child{ padding-bottom:0; }
.mtr-sx-steps li:not(:last-child)::before{ content:""; position:absolute; left:19.5px; top:44px; bottom:4px; width:1px; background:var(--line); }
.mtr-sx-steps__dot{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); font:600 14px/1 var(--font-head); color:var(--red); }
.mtr-sx .is-alt .mtr-sx-steps__dot{ border-color:#e3e4e8; }
.mtr-sx-steps li:last-child .mtr-sx-steps__dot{ background:var(--red); border-color:var(--red); color:#fff; }
.mtr-sx-steps__body{ padding-top:8px; }
.mtr-sx-steps__title{ font-family:var(--font-head); font-size:18px; font-weight:700; line-height:1.3; color:var(--ink); margin:0 0 6px; }
.mtr-sx-steps .mtr-smart-p{ font-size:15px; line-height:1.7; color:var(--steel); margin:0 0 8px; }
.mtr-sx-steps .mtr-smart-label{ margin:6px 0 4px; }
.mtr-sx-steps .mtr-smart-chips{ margin:4px 0 10px; }

/* from -> to */
.mtr-sx-trans__label{ margin:0 0 12px; font-size:13px; font-weight:600; color:var(--steel); }
.mtr-sx-trans{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mtr-sx-trans li{ display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); align-items:center; gap:14px; margin:0; padding:18px 22px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.mtr-sx .is-alt .mtr-sx-trans li{ border-color:transparent; }
.mtr-sx-trans__from{ font-size:15px; color:var(--steel); }
.mtr-sx-trans__arrow{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--red-tint); color:var(--red); }
.mtr-sx-trans__arrow svg{ width:16px; height:16px; }
.mtr-sx-trans__to{ font-size:15px; font-weight:700; color:var(--ink); }

/* centred statement (text + chain) and closing block */
.mtr-sx-sec.is-center .mtr-smart-sec__head,
.mtr-sx-sec.is-center .mtr-sx-text{ margin-left:auto; margin-right:auto; text-align:center; }
.mtr-sx-sec.is-center .mtr-smart-flow,
.mtr-sx-sec.is-center .mtr-smart-btns{ justify-content:center; }
.mtr-sx-sec.is-closing{ padding-bottom:clamp(40px,5vw,64px); }

.mtr-sx-tagline{ margin:clamp(28px,4vw,40px) 0 0; font-family:var(--font-head); font-size:clamp(17px,1.8vw,20px); font-weight:700; line-height:1.4; color:var(--ink); }
.mtr-sx-sec.is-center .mtr-sx-tagline{ text-align:center; }

@media (max-width:1024px){
  .mtr-sx-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mtr-sx-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .mtr-sx-split{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .mtr-sx-split__aside{ position:static; }
  .mtr-sx-rows li{ grid-template-columns:minmax(0,1fr); gap:6px; padding:18px 0; }
  .mtr-sx-rows li > :not(.mtr-sx-rows__title){ grid-column:1; }
  .mtr-sx-banner.is-multi{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  .mtr-sx-grid.cols-2,.mtr-sx-grid.cols-3{ grid-template-columns:minmax(0,1fr); }
  .mtr-sx-grid.cols-4{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .mtr-sx-grid.is-tiles .mtr-sx-card{ padding:18px 18px; }
  .mtr-sx-card{ padding:22px 20px; }
  .mtr-sx-num{ margin-bottom:14px; }
  .mtr-sx-trans li{ grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:10px; padding:14px 16px; }
  .mtr-sx-trans__arrow{ width:28px; height:28px; }
  .mtr-sx-trans__from,.mtr-sx-trans__to{ font-size:14px; }
}
/* page already has its own H1 (Judul Section): the text's own title reads as a sub-heading */
.mtr-sx-intro.has-page-head{ padding-top:clamp(28px,3.5vw,44px); }
.mtr-sx-intro.has-page-head .mtr-smart-sec__head{ margin-bottom:14px; }
.mtr-sx-intro.has-page-head .mtr-smart-sec__title{ font-size:clamp(21px,2.1vw,26px); line-height:1.3; letter-spacing:-.01em; }
/* short lists inside cards (kWh, Tegangan, ...) as compact chips */
.mtr-sx-card .mtr-smart-chips{ gap:6px; margin:4px 0 12px; }
.mtr-sx-card .mtr-smart-chips .mtr-smart-chip{ padding:5px 10px; font-size:12.5px; font-weight:600; background:var(--paper); border-color:transparent; color:#3d4049; }
.mtr-sx-card .mtr-smart-p + .mtr-smart-chips{ margin-top:-2px; }

/* v1.7.7 — numbered points without boxes */
.mtr-sx-feats{ list-style:none; margin:0; padding:0; display:grid; gap:0 clamp(28px,4vw,56px); counter-reset:none; }
.mtr-sx-feats.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mtr-sx-feats.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mtr-sx-feats li{ margin:0; padding:26px 0 34px; border-top:1px solid #dcdcde; }
.mtr-sx-feats__num{ display:block; margin:0 0 14px; font:600 13px/1 var(--font-mono,ui-monospace,monospace); color:var(--red); letter-spacing:.02em; }
.mtr-sx-feats__title{ font-family:var(--font-head); font-size:18px; font-weight:700; line-height:1.35; color:var(--ink); margin:0 0 8px; }
.mtr-sx-feats .mtr-smart-p{ font-size:15px; line-height:1.7; color:var(--steel); margin:0 0 10px; }
.mtr-sx-feats li > :last-child{ margin-bottom:0; }
.mtr-sx-feats .mtr-smart-chips{ gap:6px; margin:2px 0 12px; }
.mtr-sx-feats .mtr-smart-chips .mtr-smart-chip{ padding:5px 10px; font-size:12.5px; font-weight:600; background:#fff; border:1px solid var(--line); color:#3d4049; }
.mtr-sx .is-alt .mtr-sx-feats .mtr-smart-chips .mtr-smart-chip{ border-color:#e6e6e9; }
.mtr-sx-feats .mtr-smart-checks{ margin:4px 0 12px; }

/* intro: text left, picture right */
.mtr-sx-intro__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:center; }
.mtr-sx-intro.has-side .mtr-sx-intro__text{ max-width:none; }
.mtr-sx-intro__fig{ margin:0; }
.mtr-sx-intro__fig img{ display:block; width:100%; height:auto; border-radius:clamp(14px,1.6vw,22px); box-shadow:0 1px 0 rgba(20,21,26,.04), 0 24px 48px -28px rgba(20,21,26,.28); }

@media (max-width:1024px){
  .mtr-sx-feats.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .mtr-sx-intro__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (max-width:600px){
  .mtr-sx-feats.cols-2,.mtr-sx-feats.cols-3{ grid-template-columns:minmax(0,1fr); }
  .mtr-sx-feats li{ padding:22px 0 26px; }
  .mtr-sx-feats__num{ margin-bottom:10px; }
}