/* ============================================
   MR Studio IDE & MR PLC - Main Stylesheet
   Industrial Blue Theme | Boxed Layout 1100px
   ============================================ */

:root {
  /* Light Mode - Industrial Blue */
  --mr-primary: #0a4d8c;
  --mr-primary-dark: #073866;
  --mr-primary-light: #1e6fc4;
  --mr-accent: #00b4d8;
  --mr-accent-dark: #0096b7;
  --mr-bg: #f4f7fb;
  --mr-bg-alt: #ffffff;
  --mr-bg-card: #ffffff;
  --mr-text: #1a2733;
  --mr-text-muted: #5a6b7b;
  --mr-border: #dbe4ee;
  --mr-header-bg: #ffffff;
  --mr-header-border: #e2e8f0;
  --mr-shadow: 0 4px 20px rgba(10, 77, 140, 0.08);
  --mr-shadow-lg: 0 10px 40px rgba(10, 77, 140, 0.12);
  --mr-gradient: linear-gradient(135deg, #0a4d8c 0%, #00b4d8 100%);
  --mr-gradient-soft: linear-gradient(135deg, rgba(10,77,140,0.05) 0%, rgba(0,180,216,0.05) 100%);
}

[data-theme="dark"] {
  --mr-primary: #2196f3;
  --mr-primary-dark: #1976d2;
  --mr-primary-light: #64b5f6;
  --mr-accent: #00d4ff;
  --mr-accent-dark: #00b8e6;
  --mr-bg: #0d1620;
  --mr-bg-alt: #131e2b;
  --mr-bg-card: #16223150;
  --mr-text: #e6edf3;
  --mr-text-muted: #94a3b8;
  --mr-border: #2a3a4d;
  --mr-header-bg: #0f1923;
  --mr-header-border: #1e2d3d;
  --mr-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --mr-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
  --mr-gradient: linear-gradient(135deg, #08233d 0%, #0a3a5c 60%, #0b4f6c 100%);
  --mr-gradient-soft: linear-gradient(135deg, rgba(33,150,243,0.08) 0%, rgba(0,212,255,0.08) 100%);
}

/* Dark mode: hero & breadcrumb lebih gelap dengan overlay */
[data-theme="dark"] .mr-hero,
[data-theme="dark"] .mr-page-hero {
  background: linear-gradient(135deg, #061a2e 0%, #0a2c47 55%, #0b3a52 100%);
}
[data-theme="dark"] .mr-hero::before,
[data-theme="dark"] .mr-page-hero::before {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0,180,216,0.10) 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(33,150,243,0.08) 0%, transparent 40%);
}
[data-theme="dark"] .mr-hero::after,
[data-theme="dark"] .mr-page-hero::after {
  opacity: 0.25;
}
[data-theme="dark"] .mr-crumb-bar {
  background: #0a1420;
  border-bottom-color: #1c2a3a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--mr-bg);
  color: var(--mr-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.6;
}

/* Boxed Layout 1100px */
.mr-boxed {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Boxed layout with visible container */
.mr-page-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  background-color: var(--mr-bg-alt);
  box-shadow: 0 0 50px rgba(10, 77, 140, 0.06);
  min-height: 100vh;
  transition: background-color 0.3s ease;
}

[data-theme="dark"] .mr-page-wrapper {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}
img.logo-ndas.logo-light {
	max-width : 220px;
}
img.logo-ndas.logo-dark {
	max-width : 220px;
}
/* ============================================
   HEADER
   ============================================ */
.mr-header {
  background: var(--mr-header-bg);
  border-bottom: 1px solid var(--mr-header-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mr-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.mr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 22px;
  color: var(--mr-primary);
  letter-spacing: -0.5px;
	max-width:220px;
}

.mr-logo-icon {
  width: 38px;
  height: 38px;
  background: var(--mr-gradient);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 3px 10px rgba(10, 77, 140, 0.25);
}

.mr-logo-text span {
  color: var(--mr-accent);
}

.mr-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mr-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--mr-border);
  background: var(--mr-bg-alt);
  color: var(--mr-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  position: relative;
}

.mr-icon-btn:hover {
  background: var(--mr-primary);
  color: white;
  border-color: var(--mr-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 77, 140, 0.25);
}

.mr-icon-btn svg {
  width: 20px;
  height: 20px;
}

.mr-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e63946;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Login Dropdown */
.mr-login-wrap {
  position: relative;
}

.mr-login-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 260px;
  background: var(--mr-bg-alt);
  border: 1px solid var(--mr-border);
  border-radius: 14px;
  box-shadow: var(--mr-shadow-lg);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  z-index: 1100;
}

.mr-login-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mr-login-dropdown h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--mr-text);
}

.mr-login-dropdown p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--mr-text-muted);
}

.mr-login-dropdown input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--mr-border);
  border-radius: 8px;
  background: var(--mr-bg);
  color: var(--mr-text);
  font-size: 14px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.mr-login-dropdown input:focus {
  outline: none;
  border-color: var(--mr-primary);
}

.mr-login-dropdown .mr-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mr-text-muted);
  margin-bottom: 14px;
}

.mr-login-dropdown .mr-check-row a {
  color: var(--mr-primary);
  text-decoration: none;
}

/* Menu bar */
.mr-header-nav {
  border-top: 1px solid var(--mr-header-border);
  background: var(--mr-header-bg);
}

.mr-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.mr-nav-list a {
  display: block;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--mr-text-muted);
  font-size: 14px;
  font-weight: 600;
  position: relative;
  transition: color 0.2s;
}

.mr-nav-list a:hover,
.mr-nav-list a.active {
  color: var(--mr-primary);
}

.mr-nav-list a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  background: var(--mr-gradient);
  border-radius: 3px 3px 0 0;
}

.mr-mobile-toggle {
  display: none;
}

.mr-nav-theme-item {
  display: none;
}

.mr-nav-link-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--mr-border);
  color: var(--mr-text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* ============================================
   BUTTONS
   ============================================ */
.mr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
  font-family: inherit;
}

.mr-btn-primary {
  background: var(--mr-gradient);
  color: white;
  box-shadow: 0 4px 14px rgba(10, 77, 140, 0.3);
}

.mr-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 77, 140, 0.4);
}

.mr-btn-outline {
  background: transparent;
  color: var(--mr-primary);
  border: 2px solid var(--mr-primary);
}

.mr-btn-outline:hover {
  background: var(--mr-primary);
  color: white;
}

.mr-btn-ghost {
  background: var(--mr-bg);
  color: var(--mr-text);
  border: 1px solid var(--mr-border);
}

.mr-btn-ghost:hover {
  border-color: var(--mr-primary);
  color: var(--mr-primary);
}

.mr-btn-block {
  width: 100%;
}

.mr-btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

.mr-btn-lg {
  padding: 15px 34px;
  font-size: 16px;
}

/* ============================================
   HERO SECTION
   ============================================ */
.mr-hero {
  position: relative;
  background: var(--mr-gradient);
  color: white;
  padding: 80px 0;
  overflow: hidden;
}
 .hero-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 16px 0;
}
.mr-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.08) 0%, transparent 35%);
}

.mr-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
}

.mr-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.mr-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}

.mr-hero h1 {
  font-size: 35px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -1px;
}

.mr-hero p {
  font-size: 17px;
  opacity: 0.92;
  margin: 0 0 28px;
  max-width: 480px;
}

.mr-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.mr-hero .mr-btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: white;
}

.mr-hero .mr-btn-outline:hover {
  background: white;
  color: var(--mr-primary);
  border-color: white;
}

.mr-hero-visual {
  position: relative;
  z-index: 2;
}

.mr-hero-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.mr-hero-placeholder {
  width: 100%;
  height: 260px;
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  gap: 8px;
}

.mr-hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 20px;
}

.mr-hero-stat {
  flex: 1;
}

.mr-hero-stat .num {
  font-size: 24px;
  font-weight: 800;
  display: block;
}

.mr-hero-stat .label {
  font-size: 12px;
  opacity: 0.8;
}

/* ============================================
   SECTIONS
   ============================================ */
.mr-section {
  padding: 70px 0;
}

.mr-section-alt {
  background: var(--mr-bg);
}

.mr-section-title {
  text-align: center;
  margin-bottom: 50px;
}

.mr-section-title .eyebrow {
  display: inline-block;
  color: var(--mr-accent);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.mr-section-title h2 {
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--mr-text);
  letter-spacing: -0.5px;
}

.mr-section-title p {
  font-size: 16px;
  color: var(--mr-text-muted);
  max-width: 580px;
  margin: 0 auto;
}

/* ============================================
   CARDS
   ============================================ */
.mr-card {
  background: var(--mr-bg-card);
  border: 1px solid var(--mr-border);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s ease;

}

.mr-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mr-shadow-lg);
  border-color: var(--mr-primary-light);
}

.mr-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--mr-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--mr-primary);
}

.mr-card-icon svg {
  width: 28px;
  height: 28px;
}

.mr-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--mr-text);
}

.mr-card p {
  font-size: 14px;
  color: var(--mr-text-muted);
  margin: 0;
}

/* Feature grid */
.mr-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mr-feature-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Why us */
.mr-why-item {
  display: flex;
  gap: 18px;
  padding: 24px;
  background: var(--mr-bg-card);
  border: 1px solid var(--mr-border);
  border-radius: 14px;
  transition: all 0.3s;
}

.mr-why-item:hover {
  border-color: var(--mr-primary-light);
  transform: translateX(4px);
}

.mr-why-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--mr-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.mr-why-icon svg {
  width: 24px;
  height: 24px;
}

.mr-why-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--mr-text);
}

.mr-why-item p {
  margin: 0;
  font-size: 14px;
  color: var(--mr-text-muted);
}

/* Product showcase */
.mr-product-card {
  background: var(--mr-bg-card);
  border: 1px solid var(--mr-border);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s;
}

.mr-product-card:hover {
  box-shadow: var(--mr-shadow-lg);
  transform: translateY(-4px);
}

.mr-product-img {
  height: 200px;
  background: var(--mr-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--mr-border);
  color: var(--mr-primary);
  font-size: 60px;
}

.mr-product-body {
  padding: 24px;
}

.mr-product-body h3 {
  font-size: 21px;
  margin: 0 0 8px;
  color: var(--mr-text);
}

.mr-product-body p {
  font-size: 14px;
  color: var(--mr-text-muted);
  margin: 0 0 16px;
}

.mr-product-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--mr-gradient-soft);
  color: var(--mr-primary);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.mr-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--mr-border);
}

.mr-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--mr-primary);
}

.mr-price small {
  font-size: 13px;
  font-weight: 500;
  color: var(--mr-text-muted);
}

/* CTA Section */
.mr-cta {
  background: var(--mr-gradient);
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.mr-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.mr-cta > * {
  position: relative;
  z-index: 1;
}

.mr-cta h2 {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 12px;
}

.mr-cta p {
  font-size: 16px;
  opacity: 0.9;
  margin: 0 0 26px;
}

.mr-cta .mr-btn-outline {
  border-color: rgba(255,255,255,0.6);
  color: white;
}

.mr-cta .mr-btn-outline:hover {
  background: white;
  color: var(--mr-primary);
}

/* ============================================
   FOOTER
   ============================================ */
.mr-footer {
  background: var(--mr-header-bg);
  border-top: 1px solid var(--mr-header-border);
  padding: 50px 0 0;
  margin-top: 60px;
}

.mr-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 40px;
}

.mr-footer-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--mr-text);
  margin: 0 0 16px;
}

.mr-footer-col p {
  font-size: 14px;
  color: var(--mr-text-muted);
  margin: 0 0 16px;
}

.mr-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mr-footer-col ul li {
  margin-bottom: 10px;
}

.mr-footer-col ul a {
  color: var(--mr-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.mr-footer-col ul a:hover {
  color: var(--mr-primary);
}

.mr-footer-bottom {
  border-top: 1px solid var(--mr-border);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--mr-text-muted);
}

.mr-social {
  display: flex;
  gap: 10px;
}

.mr-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--mr-bg);
  border: 1px solid var(--mr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mr-text-muted);
  transition: all 0.2s;
}

.mr-social a:hover {
  background: var(--mr-primary);
  color: white;
  border-color: var(--mr-primary);
}

.mr-social a svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.mr-page-hero {
  background: var(--mr-gradient);
  color: white;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.mr-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 35px 35px;
}

.mr-page-hero > .mr-boxed {
  position: relative;
  z-index: 1;
}

.mr-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 16px;
  opacity: 0.85;
}

.mr-breadcrumb a {
  color: white;
  text-decoration: none;
}

.mr-breadcrumb a:hover {
  text-decoration: underline;
}

.mr-page-hero h1 {
  font-size: 38px;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}

.mr-page-hero p {
  font-size: 17px;
  opacity: 0.92;
  max-width: 600px;
  margin: 0;
}

/* ============================================
   CART PAGE
   ============================================ */
.mr-cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.mr-cart-item {
  display: flex;
  gap: 18px;
  padding: 20px;
  background: var(--mr-bg-card);
  border: 1px solid var(--mr-border);
  border-radius: 14px;
  margin-bottom: 16px;
  align-items: center;
}

.mr-cart-item-img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  background: var(--mr-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mr-primary);
  font-size: 34px;
}

.mr-cart-item-info {
  flex: 1;
}

.mr-cart-item-info h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--mr-text);
}

.mr-cart-item-info p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--mr-text-muted);
}

.mr-cart-item-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--mr-primary);
}

.mr-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--mr-border);
  border-radius: 8px;
  overflow: hidden;
}

.mr-qty button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--mr-bg);
  color: var(--mr-text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.2s;
}

.mr-qty button:hover {
  background: var(--mr-primary);
  color: white;
}

.mr-qty span {
  width: 38px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

.mr-cart-remove {
  background: none;
  border: none;
  color: #e63946;
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
}

.mr-cart-summary {
  background: var(--mr-bg-card);
  border: 1px solid var(--mr-border);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 120px;
}

.mr-cart-summary h3 {
  margin: 0 0 20px;
  font-size: 19px;
  color: var(--mr-text);
}

.mr-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--mr-text-muted);
}

.mr-summary-row.total {
  padding-top: 16px;
  border-top: 1px solid var(--mr-border);
  margin-top: 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--mr-text);
}

.mr-summary-row.total span:last-child {
  color: var(--mr-primary);
}

.mr-coupon {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.mr-coupon input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--mr-border);
  border-radius: 8px;
  background: var(--mr-bg);
  color: var(--mr-text);
  font-size: 13px;
}

.mr-coupon input:focus {
  outline: none;
  border-color: var(--mr-primary);
}

.mr-cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--mr-text-muted);
}

.mr-cart-empty .icon {
  font-size: 60px;
  margin-bottom: 16px;
  opacity: 0.4;
}

/* ============================================
   CLIENT AREA
   ============================================ */
.mr-client-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}

.mr-client-sidebar {
  background: var(--mr-bg-card);
  border: 1px solid var(--mr-border);
  border-radius: 16px;
  padding: 20px;
  position: sticky;
  top: 120px;
}

.mr-client-profile {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mr-border);
  margin-bottom: 16px;
}

.mr-client-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--mr-gradient);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  font-weight: 700;
}

.mr-client-profile h4 {
  margin: 0 0 2px;
  font-size: 16px;
  color: var(--mr-text);
}

.mr-client-profile span {
  font-size: 12px;
  color: var(--mr-text-muted);
}

.mr-client-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mr-client-menu li {
  margin-bottom: 4px;
}

.mr-client-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--mr-text-muted);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.mr-client-menu a:hover,
.mr-client-menu a.active {
  background: var(--mr-gradient-soft);
  color: var(--mr-primary);
}

.mr-client-menu a svg {
  width: 18px;
  height: 18px;
}

.mr-client-content {
  background: var(--mr-bg-card);
  border: 1px solid var(--mr-border);
  border-radius: 16px;
  padding: 28px;
}

.mr-client-section h3 {
  margin: 0 0 20px;
  font-size: 21px;
  color: var(--mr-text);
}

.mr-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.mr-stat-box {
  background: var(--mr-bg);
  border: 1px solid var(--mr-border);
  border-radius: 12px;
  padding: 18px;
}

.mr-stat-box .label {
  font-size: 12px;
  color: var(--mr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.mr-stat-box .value {
  font-size: 24px;
  font-weight: 800;
  color: var(--mr-primary);
}

.mr-table {
  width: 100%;
  border-collapse: collapse;
}

.mr-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mr-text-muted);
  border-bottom: 2px solid var(--mr-border);
}

.mr-table td {
  padding: 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--mr-border);
  color: var(--mr-text);
}

.mr-table tr:last-child td {
  border-bottom: none;
}

.mr-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

.mr-badge-success {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.mr-badge-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.mr-badge-info {
  background: rgba(10, 77, 140, 0.12);
  color: var(--mr-primary);
}

[data-theme="dark"] .mr-badge-success {
  color: #4ade80;
}

[data-theme="dark"] .mr-badge-pending {
  color: #fbbf24;
}

/* License card */
.mr-license-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  background: var(--mr-bg);
  border: 1px solid var(--mr-border);
  border-radius: 12px;
  margin-bottom: 12px;
}

.mr-license-card .info h5 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--mr-text);
}

.mr-license-card .info p {
  margin: 0;
  font-size: 13px;
  color: var(--mr-text-muted);
}

/* ============================================
   DETAIL PAGE (software/hardware)
   ============================================ */
.mr-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.mr-detail-img-box {
  border-radius: 18px;
  overflow: hidden;
  background: var(--mr-gradient-soft);
  border: 1px solid var(--mr-border);
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mr-primary);
  font-size: 90px;
}

.mr-detail-content h2 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--mr-text);
}

.mr-detail-content p {
  font-size: 15px;
  color: var(--mr-text-muted);
  margin: 0 0 20px;
}

.mr-spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.mr-spec-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mr-border);
  font-size: 14px;
  color: var(--mr-text);
}

.mr-spec-list li:last-child {
  border-bottom: none;
}

.mr-spec-list .check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mr-gradient-soft);
  color: var(--mr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.mr-spec-list .check svg {
  width: 14px;
  height: 14px;
}

.mr-spec-list strong {
  display: block;
  font-size: 14px;
}

.mr-spec-list small {
  color: var(--mr-text-muted);
  font-size: 13px;
}

.mr-price-box {
  background: var(--mr-bg);
  border: 1px solid var(--mr-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.mr-price-box .price {
  font-size: 32px;
  font-weight: 800;
  color: var(--mr-primary);
}

.mr-price-box .price small {
  font-size: 15px;
  color: var(--mr-text-muted);
  font-weight: 500;
}

.mr-price-box .note {
  font-size: 13px;
  color: var(--mr-text-muted);
  margin-top: 4px;
}

.mr-detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Tab system */
.mr-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--mr-border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.mr-tab {
  padding: 12px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--mr-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  font-family: inherit;
}

.mr-tab:hover {
  color: var(--mr-primary);
}

.mr-tab.active {
  color: var(--mr-primary);
  border-bottom-color: var(--mr-primary);
}

.mr-tab-content {
  display: none;
}

.mr-tab-content.active {
  display: block;
  animation: mr-fade 0.3s ease;
}

@keyframes mr-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   PLACEHOLDER
   ============================================ */
.mr-placeholder {
  background: var(--mr-gradient-soft);
  border: 2px dashed var(--mr-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--mr-primary);
  gap: 6px;
}

.mr-placeholder .ph-icon {
  font-size: 40px;
  opacity: 0.5;
}

.mr-placeholder .ph-text {
  font-size: 13px;
  color: var(--mr-text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .mr-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .mr-header-top {
    padding: 10px 16px;
  }

  .mr-logo {
    font-size: 19px;
    gap: 8px;
  }

  .mr-logo-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .mr-header-actions {
    gap: 6px;
  }

  .mr-header-actions .mr-btn-sm {
    padding: 8px 12px;
    font-size: 13px;
  }

  .mr-header-actions .mr-theme-header-btn {
    display: none;
  }

  .mr-nav-theme-item {
    display: block;
  }

  .mr-hero-content,
  .mr-detail-grid {
    grid-template-columns: 1fr;
  }

  .mr-hero-visual {
    order: -1;
  }

  .mr-hero h1 {
    font-size: 36px;
  }

  .mr-cart-layout {
    grid-template-columns: 1fr;
  }

  .mr-cart-summary {
    position: static;
  }

  .mr-client-layout {
    grid-template-columns: 1fr;
  }

  .mr-client-sidebar {
    position: static;
  }

  .mr-nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mr-header-bg);
    flex-direction: column;
    padding: 10px 20px;
    box-shadow: var(--mr-shadow-lg);
    border-top: 1px solid var(--mr-header-border);
  }

  .mr-nav-list.open {
    display: flex;
  }

  .mr-nav-list a {
    padding: 14px 0;
    border-bottom: 1px solid var(--mr-border);
  }

  .mr-nav-list a.active::after {
    display: none;
  }

  .mr-mobile-toggle {
    display: flex;
  }

  .mr-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mr-boxed {
    padding: 0 16px;
  }

  .mr-header-top {
    padding: 12px 16px;
  }

  .mr-nav-list {
    padding: 10px 16px;
  }

  .mr-hero {
    padding: 50px 0;
  }

  .mr-hero h1 {
    font-size: 28px;
  }

  .mr-hero p {
    font-size: 15px;
  }

  .mr-section {
    padding: 50px 0;
  }

  .mr-section-title h2 {
    font-size: 26px;
  }

  .mr-feature-grid,
  .mr-feature-grid-2 {
    grid-template-columns: 1fr;
  }

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

  .mr-footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .mr-page-hero h1 {
    font-size: 28px;
  }

  .mr-cta {
    padding: 32px 20px;
  }

  .mr-cta h2 {
    font-size: 24px;
  }

  .mr-stat-grid {
    grid-template-columns: 1fr;
  }

  .mr-cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mr-cart-item-img {
    width: 100%;
    height: 120px;
  }

  .mr-login-dropdown {
    width: 280px;
    right: -50px;
  }

  .mr-detail-img-box {
    height: 260px;
  }

  .mr-product-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .mr-header-top {
    padding: 10px 12px;
  }

  .mr-logo {
    font-size: 17px;
  }

  .mr-header-actions .mr-btn-sm {
    padding: 7px 10px;
    font-size: 12.5px;
  }

  .mr-hero h1 {
    font-size: 24px;
  }

  .mr-hero-buttons {
    flex-direction: column;
  }

  .mr-hero-buttons .mr-btn {
    width: 100%;
  }

  .mr-login-dropdown {
    width: 260px;
    right: -60px;
  }
}

/* ============================================
   WOW.js animation helpers
   ============================================ */
.wow {
  visibility: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--mr-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--mr-primary-light);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mr-primary);
}

/* ============================================================
   PHASE 2 — New pages: blog, docs, checkout, login, about, faq, tickets, 404
   ============================================================ */

/* ---- Page hero (reuse) ---- */
.mr-page-hero {
  background: linear-gradient(135deg, var(--mr-primary) 0%, var(--mr-accent) 100%);
  color: #fff;
  padding: 60px 0 50px;
}
.mr-page-hero .mr-boxed { max-width: 1100px; }
.mr-breadcrumb { font-size: 13px; opacity: .85; margin-bottom: 14px; }
.mr-breadcrumb a { color: #fff; text-decoration: underline; }
.mr-breadcrumb span { margin: 0 8px; opacity: .6; }
.mr-page-hero h1 { font-size: 38px; font-weight: 800; line-height: 1.15; margin: 0 0 12px; }
.mr-page-hero p { font-size: 16px; opacity: .92; max-width: 640px; margin: 0; }
.mr-page-hero .mr-hero-badge { display:inline-block; background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 16px; backdrop-filter: blur(6px); }

/* ---- Generic section spacing ---- */
.mr-section-pad { padding: 60px 0; }
.mr-section-title { font-size: 30px; font-weight: 800; color: var(--mr-text); margin: 0 0 8px; }
.mr-section-sub { color: var(--mr-text-muted); margin: 0 0 36px; font-size: 15px; }

/* ---- Two column layout with right sidebar ---- */
.mr-layout-2col { display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; }
.mr-layout-2col .mr-main-col { min-width: 0; }
.mr-layout-2col .mr-sidebar { position: sticky; top: 90px; }

/* ---- Blog list ---- */
.mr-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.mr-blog-card { background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: 14px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; display:flex; flex-direction:column; }
.mr-blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(10,77,140,.14); border-color: var(--mr-accent); }
.mr-blog-thumb { height: 180px; background: linear-gradient(135deg, var(--mr-primary-light), var(--mr-accent)); position: relative; display:flex; align-items:center; justify-content:center; font-size: 52px; color: #fff; opacity:.9; }
.mr-blog-thumb .mr-blog-cat { position:absolute; top:14px; left:14px; background: rgba(10,77,140,.9); color:#fff; font-size:11px; font-weight:700; padding:5px 11px; border-radius:6px; text-transform:uppercase; letter-spacing:.4px; }
.mr-blog-body { padding: 20px; display:flex; flex-direction:column; flex:1; }
.mr-blog-meta { font-size: 12px; color: var(--mr-text-muted); margin: 0 0 10px; display:flex; gap:12px; flex-wrap:wrap; }
.mr-blog-meta span { display:flex; align-items:center; gap:5px; }
.mr-blog-card h3 { font-size: 18px; font-weight: 700; color: var(--mr-text); margin: 0 0 8px; line-height: 1.35; }
.mr-blog-card p { font-size: 14px; color: var(--mr-text-muted); margin: 0 0 16px; flex:1; line-height:1.6; }
.mr-blog-card .mr-blog-read { font-size: 13px; font-weight: 600; color: var(--mr-primary); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.mr-blog-card .mr-blog-read:hover { color: var(--mr-accent); }

/* ---- Sidebar widgets ---- */
.mr-widget { background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: 14px; padding: 22px; margin-bottom: 24px; }
.mr-widget h3 { font-size: 16px; font-weight: 700; color: var(--mr-text); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--mr-border); }
.mr-widget-search { display:flex; gap:8px; }
.mr-widget-search input { flex:1; padding:10px 12px; border:1px solid var(--mr-border); border-radius:8px; background: var(--mr-input-bg); color: var(--mr-text); font-size:14px; }
.mr-widget-search button { padding: 0 14px; background: var(--mr-primary); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; }
.mr-cat-list { list-style:none; padding:0; margin:0; }
.mr-cat-list li { margin-bottom: 10px; }
.mr-cat-list a { display:flex; justify-content:space-between; align-items:center; color: var(--mr-text-muted); text-decoration:none; font-size:14px; padding:7px 0; transition: color .2s; }
.mr-cat-list a:hover { color: var(--mr-primary); }
.mr-cat-list .count { background: var(--mr-bg-alt); color: var(--mr-text-muted); font-size:12px; padding:2px 9px; border-radius:999px; font-weight:600; }
.mr-post-list { list-style:none; padding:0; margin:0; }
.mr-post-list li { display:flex; gap:12px; padding: 10px 0; border-bottom:1px solid var(--mr-border); }
.mr-post-list li:last-child { border-bottom:none; }
.mr-post-list .mr-pl-thumb { width:62px; height:62px; border-radius:10px; background: linear-gradient(135deg, var(--mr-primary-light), var(--mr-accent)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; }
.mr-post-list .mr-pl-info h4 { font-size:13px; font-weight:600; color:var(--mr-text); margin:0 0 4px; line-height:1.35; }
.mr-post-list .mr-pl-info span { font-size:11px; color: var(--mr-text-muted); }
.mr-tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.mr-tag-cloud a { background: var(--mr-bg-alt); color: var(--mr-text-muted); padding: 6px 13px; border-radius: 999px; font-size: 12px; text-decoration:none; transition: all .2s; }
.mr-tag-cloud a:hover { background: var(--mr-primary); color:#fff; }

/* ---- Blog detail ---- */
.mr-article { background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: 14px; padding: 38px; }
.mr-article .mr-art-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color: var(--mr-text-muted); margin-bottom:18px; align-items:center; }
.mr-article .mr-art-meta .author { display:flex; align-items:center; gap:9px; }
.mr-article .mr-art-meta .avatar { width:36px; height:36px; border-radius:50%; background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.mr-article h1 { font-size: 32px; font-weight: 800; color: var(--mr-text); margin: 0 0 18px; line-height:1.25; }
.mr-article .mr-art-cover { height: 340px; border-radius: 12px; background: linear-gradient(135deg, var(--mr-primary), var(--mr-accent)); margin: 0 0 28px; display:flex; align-items:center; justify-content:center; font-size: 80px; color: rgba(255,255,255,.85); }
.mr-article p { font-size: 16px; line-height: 1.85; color: var(--mr-text); margin: 0 0 18px; }
.mr-article h2 { font-size: 24px; font-weight:700; color: var(--mr-text); margin: 34px 0 14px; }
.mr-article h3 { font-size: 19px; font-weight:600; color: var(--mr-text); margin: 26px 0 12px; }
.mr-article blockquote { border-left: 4px solid var(--mr-accent); padding: 14px 20px; background: var(--mr-bg-alt); border-radius: 0 10px 10px 0; margin: 22px 0; font-style:italic; color: var(--mr-text); font-size:15px; }
.mr-article ul, .mr-article ol { padding-left: 24px; margin: 0 0 18px; color: var(--mr-text); }
.mr-article li { margin-bottom: 9px; line-height: 1.7; font-size:15px; }
.mr-article code { background: var(--mr-bg-alt); padding: 3px 8px; border-radius:5px; font-family: 'Courier New', monospace; font-size: 13.5px; color: var(--mr-accent); }
.mr-article .mr-art-tags { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--mr-border); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mr-article .mr-art-tags span { font-size:13px; color: var(--mr-text-muted); margin-right:4px; }
.mr-share-row { display:flex; gap:10px; margin-top: 26px; }
.mr-share-row a { width:38px; height:38px; border-radius:10px; background: var(--mr-bg-alt); display:flex; align-items:center; justify-content:center; color: var(--mr-text-muted); transition: all .2s; }
.mr-share-row a:hover { background: var(--mr-primary); color:#fff; }
.mr-author-box { display:flex; gap:18px; align-items:center; background: var(--mr-bg-alt); border-radius:14px; padding: 22px; margin-top: 30px; border: 1px solid var(--mr-border); }
.mr-author-box .ab-avatar { width:64px; height:64px; border-radius:50%; background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; flex-shrink:0; }
.mr-author-box h4 { font-size:16px; font-weight:700; margin:0 0 4px; color:var(--mr-text); }
.mr-author-box span { font-size:13px; color: var(--mr-text-muted); display:block; margin-bottom:8px; }
.mr-author-box p { font-size:14px; color: var(--mr-text-muted); margin:0; line-height:1.55; }

/* ---- Related posts ---- */
.mr-related-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:40px; }
.mr-related-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:12px; overflow:hidden; transition: transform .25s, box-shadow .25s; text-decoration:none; }
.mr-related-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(10,77,140,.12); }
.mr-related-card .rc-thumb { height:120px; background: linear-gradient(135deg,var(--mr-primary-light),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:38px; color:#fff; }
.mr-related-card .rc-body { padding:16px; }
.mr-related-card h4 { font-size:14px; font-weight:600; color:var(--mr-text); margin:0 0 6px; line-height:1.4; }
.mr-related-card span { font-size:12px; color:var(--mr-text-muted); }

/* ---- Pagination ---- */
.mr-pagination { display:flex; gap:8px; justify-content:center; margin-top:40px; }
.mr-pagination a, .mr-pagination span { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--mr-border); background: var(--mr-card); color: var(--mr-text); text-decoration:none; font-weight:600; font-size:14px; transition: all .2s; }
.mr-pagination a:hover { border-color: var(--mr-accent); color: var(--mr-accent); }
.mr-pagination .active { background: var(--mr-primary); color:#fff; border-color: var(--mr-primary); }

/* ---- Checkout ---- */
.mr-checkout-grid { display:grid; grid-template-columns: 1fr 360px; gap:30px; align-items:start; }
.mr-checkout-step { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.mr-checkout-step .step-num { width:34px; height:34px; border-radius:50%; background: var(--mr-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.mr-checkout-step .step-num.done { background: #16a34a; }
.mr-checkout-step h3 { font-size:18px; font-weight:700; color:var(--mr-text); margin:0; }
.mr-form-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:26px; margin-bottom:24px; }
.mr-form-row { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; }
.mr-form-row.single { grid-template-columns: 1fr; }
.mr-field label { display:block; font-size:13px; font-weight:600; color: var(--mr-text); margin-bottom:6px; }
.mr-field label .req { color: #e11d48; }
.mr-field input, .mr-field select, .mr-field textarea { width:100%; padding:11px 14px; border:1px solid var(--mr-border); border-radius:9px; background: var(--mr-input-bg); color: var(--mr-text); font-size:14px; font-family: inherit; transition: border-color .2s; }
.mr-field input:focus, .mr-field select:focus, .mr-field textarea:focus { outline:none; border-color: var(--mr-accent); box-shadow: 0 0 0 3px rgba(0,180,216,.15); }
.mr-field textarea { resize:vertical; min-height:80px; }
.mr-pay-method { display:flex; gap:14px; flex-wrap:wrap; }
.mr-pay-opt { flex:1; min-width:150px; border:2px solid var(--mr-border); border-radius:12px; padding:16px; cursor:pointer; transition: all .2s; text-align:center; background: var(--mr-card); }
.mr-pay-opt:hover { border-color: var(--mr-accent); }
.mr-pay-opt.selected { border-color: var(--mr-primary); background: rgba(10,77,140,.06); }
.mr-pay-opt .po-icon { font-size:30px; margin-bottom:8px; }
.mr-pay-opt .po-name { font-size:14px; font-weight:600; color: var(--mr-text); }
.mr-pay-opt .po-desc { font-size:11px; color: var(--mr-text-muted); margin-top:4px; }
.mr-order-summary { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; position:sticky; top:90px; }
.mr-order-summary h3 { font-size:17px; font-weight:700; color:var(--mr-text); margin:0 0 18px; padding-bottom:14px; border-bottom:2px solid var(--mr-border); }
.mr-os-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--mr-border); }
.mr-os-item .osi-thumb { width:48px; height:48px; border-radius:9px; background: linear-gradient(135deg,var(--mr-primary-light),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.mr-os-item .osi-info { flex:1; }
.mr-os-item .osi-info h4 { font-size:13px; font-weight:600; margin:0 0 3px; color:var(--mr-text); }
.mr-os-item .osi-info span { font-size:12px; color: var(--mr-text-muted); }
.mr-os-item .osi-price { font-size:14px; font-weight:700; color: var(--mr-text); white-space:nowrap; }
.mr-os-line { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color: var(--mr-text-muted); }
.mr-os-line.total { font-size:18px; font-weight:800; color: var(--mr-text); border-top:2px solid var(--mr-border); margin-top:8px; padding-top:14px; }
.mr-os-line.total .val { color: var(--mr-primary); }

/* ---- Login / Register ---- */
.mr-auth-wrap { display:flex; align-items:center; justify-content:center; padding: 60px 0; }
.mr-auth-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:18px; box-shadow: 0 20px 60px rgba(10,77,140,.1); width:100%; max-width: 460px; overflow:hidden; }
.mr-auth-tabs { display:flex; border-bottom:1px solid var(--mr-border); }
.mr-auth-tabs button { flex:1; padding:16px; background:none; border:none; font-size:15px; font-weight:600; color: var(--mr-text-muted); cursor:pointer; border-bottom:3px solid transparent; transition: all .2s; }
.mr-auth-tabs button.active { color: var(--mr-primary); border-bottom-color: var(--mr-primary); }
.mr-auth-body { padding: 32px; }
.mr-auth-body h2 { font-size: 24px; font-weight:800; color: var(--mr-text); margin:0 0 6px; }
.mr-auth-body > p { font-size:14px; color: var(--mr-text-muted); margin:0 0 24px; }
.mr-auth-social { display:flex; gap:12px; margin-bottom:22px; }
.mr-auth-social a { flex:1; padding:11px; border:1px solid var(--mr-border); border-radius:10px; text-align:center; font-size:13px; font-weight:600; color: var(--mr-text); text-decoration:none; transition: all .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.mr-auth-social a:hover { border-color: var(--mr-accent); background: var(--mr-bg-alt); }
.mr-auth-divider { text-align:center; position:relative; margin: 22px 0; }
.mr-auth-divider span { background: var(--mr-card); padding: 0 14px; color: var(--mr-text-muted); font-size:13px; position:relative; z-index:1; }
.mr-auth-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background: var(--mr-border); }
.mr-auth-body .mr-field { margin-bottom:16px; }
.mr-auth-foot { text-align:center; margin-top:20px; font-size:13px; color: var(--mr-text-muted); }
.mr-auth-foot a { color: var(--mr-primary); font-weight:600; text-decoration:none; }

/* ---- About ---- */
.mr-about-hero-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:center; padding: 50px 0; }
.mr-about-hero-grid h2 { font-size: 32px; font-weight:800; color: var(--mr-text); margin:0 0 16px; line-height:1.25; }
.mr-about-hero-grid p { font-size:15px; color: var(--mr-text-muted); line-height:1.8; margin:0 0 16px; }
.mr-about-visual { height: 340px; border-radius:18px; background: linear-gradient(135deg, var(--mr-primary), var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size: 100px; color: rgba(255,255,255,.85); }
.mr-stats-row { display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin: 40px 0; }
.mr-stats-row-4 { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin: 40px 0; }
.mr-stat-box { text-align:center; background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding: 26px 18px; }
.mr-stat-box .num { font-size: 38px; font-weight:800; color: var(--mr-primary); line-height:1; }
.mr-stat-box .lbl { font-size:13px; color: var(--mr-text-muted); margin-top:8px; }
.mr-vm-grid { display:grid; grid-template-columns: 1fr 1fr; gap:26px; }
.mr-vm-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:30px; }
.mr-vm-card .icon { width:52px; height:52px; border-radius:13px; background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin-bottom:16px; }
.mr-vm-card h3 { font-size:20px; font-weight:700; color:var(--mr-text); margin:0 0 10px; }
.mr-vm-card p { font-size:14px; color:var(--mr-text-muted); line-height:1.7; margin:0 0 12px; }
.mr-vm-card ul { padding-left:18px; margin:0; }
.mr-vm-card li { font-size:14px; color: var(--mr-text-muted); margin-bottom:7px; }
.mr-team-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.mr-team-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:26px; text-align:center; transition: transform .25s, box-shadow .25s; }
.mr-team-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(10,77,140,.12); }
.mr-team-card .avatar { width:84px; height:84px; border-radius:50%; background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:700; margin:0 auto 16px; }
.mr-team-card h4 { font-size:17px; font-weight:700; color:var(--mr-text); margin:0 0 4px; }
.mr-team-card .role { font-size:13px; color: var(--mr-primary); font-weight:600; margin-bottom:8px; }
.mr-team-card p { font-size:13px; color: var(--mr-text-muted); margin:0 0 14px; line-height:1.55; }
.mr-team-social { display:flex; gap:8px; justify-content:center; }
.mr-team-social a { width:32px; height:32px; border-radius:8px; background: var(--mr-bg-alt); display:flex; align-items:center; justify-content:center; color: var(--mr-text-muted); font-size:13px; transition: all .2s; }
.mr-team-social a:hover { background: var(--mr-primary); color:#fff; }
.mr-timeline { position:relative; padding-left: 32px; }
.mr-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background: var(--mr-border); }
.mr-timeline-item { position:relative; padding-bottom:32px; }
.mr-timeline-item:last-child { padding-bottom:0; }
.mr-timeline-item::before { content:''; position:absolute; left:-28px; top:4px; width:14px; height:14px; border-radius:50%; background: var(--mr-primary); border:3px solid var(--mr-card); }
.mr-timeline-item .year { font-size:14px; font-weight:700; color: var(--mr-primary); margin-bottom:4px; }
.mr-timeline-item h4 { font-size:16px; font-weight:600; color: var(--mr-text); margin:0 0 6px; }
.mr-timeline-item p { font-size:14px; color: var(--mr-text-muted); margin:0; line-height:1.6; }
.mr-value-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.mr-value-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:26px; }
.mr-value-card .icon { font-size:32px; margin-bottom:12px; }
.mr-value-card h4 { font-size:17px; font-weight:700; color:var(--mr-text); margin:0 0 8px; }
.mr-value-card p { font-size:14px; color: var(--mr-text-muted); line-height:1.65; margin:0; }

/* ---- FAQ ---- */
.mr-faq-cats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.mr-faq-cat { padding: 9px 18px; border-radius:999px; background: var(--mr-card); border:1px solid var(--mr-border); color: var(--mr-text-muted); font-size:13px; font-weight:600; cursor:pointer; transition: all .2s; }
.mr-faq-cat:hover { border-color: var(--mr-accent); color: var(--mr-accent); }
.mr-faq-cat.active { background: var(--mr-primary); color:#fff; border-color: var(--mr-primary); }
.mr-faq-wrap { max-width: 820px; margin: 0 auto; }
.mr-faq-item { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:12px; margin-bottom:14px; overflow:hidden; }
.mr-faq-q { width:100%; text-align:left; padding: 20px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:16px; font-weight:600; color: var(--mr-text); transition: background .2s; background:transparent; border:none; font-family:inherit; }
.mr-faq-q:hover { background: var(--mr-bg-alt); }
.mr-faq-q .icon { width:30px; height:30px; border-radius:50%; background: var(--mr-bg-alt); display:flex; align-items:center; justify-content:center; color: var(--mr-primary); font-size:20px; flex-shrink:0; transition: transform .3s; font-weight:400; }
.mr-faq-item.open .mr-faq-q .icon { transform: rotate(45deg); background: var(--mr-primary); color:#fff; }
.mr-faq-a { max-height:0; overflow:hidden; transition: max-height .3s ease; }
.mr-faq-item.open .mr-faq-a { max-height: 400px; }
.mr-faq-a-inner { padding: 0 24px 22px; font-size:14px; color: var(--mr-text-muted); line-height:1.8; }
.mr-faq-cta { text-align:center; background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); border-radius:16px; padding: 40px; color:#fff; margin-top: 50px; }
.mr-faq-cta h3 { font-size:24px; font-weight:800; margin:0 0 10px; }
.mr-faq-cta p { font-size:15px; opacity:.92; margin:0 0 22px; }

/* ---- Docs ---- */
.mr-docs-layout { display:grid; grid-template-columns: 240px 1fr 280px; gap:30px; align-items:start; }
.mr-docs-sidebar { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:20px; position:sticky; top:90px; }
.mr-docs-sidebar h3 { font-size:13px; text-transform:uppercase; letter-spacing:.5px; color: var(--mr-text-muted); margin:0 0 12px; font-weight:700; }
.mr-docs-nav { list-style:none; padding:0; margin:0 0 22px; }
.mr-docs-nav li { margin-bottom:3px; }
.mr-docs-nav a { display:block; padding:9px 12px; border-radius:8px; color: var(--mr-text-muted); text-decoration:none; font-size:14px; transition: all .2s; }
.mr-docs-nav a:hover { background: var(--mr-bg-alt); color: var(--mr-primary); }
.mr-docs-nav a.active { background: var(--mr-primary); color:#fff; font-weight:600; }
.mr-docs-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; margin-bottom:20px; transition: border-color .2s; }
.mr-docs-card:hover { border-color: var(--mr-accent); }
.mr-docs-card .cat { font-size:12px; font-weight:700; color: var(--mr-accent); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.mr-docs-card h3 { font-size:18px; font-weight:700; color: var(--mr-text); margin:0 0 8px; }
.mr-docs-card p { font-size:14px; color: var(--mr-text-muted); margin:0 0 14px; line-height:1.6; }
.mr-docs-card .meta { display:flex; gap:14px; font-size:12px; color: var(--mr-text-muted); align-items:center; }
.mr-docs-toc { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:20px; position:sticky; top:90px; }
.mr-docs-toc h3 { font-size:13px; text-transform:uppercase; letter-spacing:.5px; color: var(--mr-text-muted); margin:0 0 14px; font-weight:700; }
.mr-docs-toc ul { list-style:none; padding:0; margin:0; }
.mr-docs-toc li { margin-bottom:8px; }
.mr-docs-toc a { color: var(--mr-text-muted); text-decoration:none; font-size:13px; display:block; padding:5px 10px; border-left:2px solid var(--mr-border); transition: all .2s; }
.mr-docs-toc a:hover { color: var(--mr-primary); border-left-color: var(--mr-primary); }
.mr-docs-toc a.lvl2 { padding-left:22px; font-size:12px; }
.mr-doc-content { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:38px; }
.mr-doc-content h1 { font-size:30px; font-weight:800; color:var(--mr-text); margin:0 0 10px; }
.mr-doc-content .updated { font-size:13px; color: var(--mr-text-muted); margin-bottom:24px; }
.mr-doc-content h2 { font-size:22px; font-weight:700; color:var(--mr-text); margin:30px 0 12px; padding-top:10px; border-top:1px solid var(--mr-border); }
.mr-doc-content h3 { font-size:18px; font-weight:600; color:var(--mr-text); margin:24px 0 10px; }
.mr-doc-content p { font-size:15px; line-height:1.8; color:var(--mr-text); margin:0 0 16px; }
.mr-doc-content ul, .mr-doc-content ol { padding-left:22px; margin:0 0 16px; color:var(--mr-text); }
.mr-doc-content li { margin-bottom:8px; line-height:1.7; font-size:14px; }
.mr-doc-content code { background: var(--mr-bg-alt); padding:3px 8px; border-radius:5px; font-family:'Courier New',monospace; font-size:13.5px; color: var(--mr-accent); }
.mr-doc-content pre { background: #0d1620; color:#e2e8f0; padding:18px; border-radius:10px; overflow-x:auto; margin:0 0 18px; font-size:13px; line-height:1.6; }
.mr-doc-content pre code { background:none; padding:0; color:inherit; }
.mr-doc-nav-bottom { display:flex; justify-content:space-between; margin-top:34px; padding-top:22px; border-top:1px solid var(--mr-border); gap:14px; }
.mr-doc-nav-bottom a { color: var(--mr-primary); text-decoration:none; font-weight:600; font-size:14px; }
.mr-doc-nav-bottom .prev::before { content:'← '; }
.mr-doc-nav-bottom .next::after { content:' →'; }

/* ---- Tickets ---- */
.mr-ticket-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:16px; flex-wrap:wrap; }
.mr-ticket-filter { display:flex; gap:10px; flex-wrap:wrap; }
.mr-ticket-tab { padding: 8px 16px; border-radius:8px; background: var(--mr-card); border:1px solid var(--mr-border); color: var(--mr-text-muted); font-size:13px; font-weight:600; cursor:pointer; transition: all .2s; }
.mr-ticket-tab.active { background: var(--mr-primary); color:#fff; border-color: var(--mr-primary); }
.mr-ticket-table { width:100%; border-collapse:collapse; background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; overflow:hidden; }
.mr-ticket-table th { background: var(--mr-bg-alt); padding:14px 16px; text-align:left; font-size:13px; font-weight:700; color: var(--mr-text-muted); text-transform:uppercase; letter-spacing:.4px; }
.mr-ticket-table td { padding:16px; border-top:1px solid var(--mr-border); font-size:14px; color: var(--mr-text); vertical-align:middle; }
.mr-ticket-table tr:hover td { background: var(--mr-bg-alt); }
.mr-ticket-id { font-family: monospace; font-weight:600; color: var(--mr-primary); }
.mr-ticket-subject { font-weight:600; }
.mr-status-badge { display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; }
.mr-status-open { background: #dbeafe; color:#1e40af; }
.mr-status-answered { background: #dcfce7; color:#15803d; }
.mr-status-pending { background: #fef3c7; color:#b45309; }
.mr-status-closed { background: #f1f5f9; color:#64748b; }
[data-theme="dark"] .mr-status-open { background: rgba(59,130,246,.18); color:#60a5fa; }
[data-theme="dark"] .mr-status-answered { background: rgba(34,197,94,.18); color:#4ade80; }
[data-theme="dark"] .mr-status-pending { background: rgba(245,158,11,.18); color:#fbbf24; }
[data-theme="dark"] .mr-status-closed { background: rgba(100,116,139,.18); color:#94a3b8; }
.mr-priority-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; }
.mr-priority-high { background:#ef4444; }
.mr-priority-med { background:#f59e0b; }
.mr-priority-low { background:#22c55e; }

/* ---- Ticket add form ---- */
.mr-ticket-form { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:30px; }
.mr-priority-opts { display:flex; gap:12px; flex-wrap:wrap; }
.mr-priority-opts label { flex:1; min-width:140px; border:2px solid var(--mr-border); border-radius:10px; padding:14px; cursor:pointer; transition: all .2s; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color: var(--mr-text); }
.mr-priority-opts label:hover { border-color: var(--mr-accent); }
.mr-priority-opts input { display:none; }
.mr-priority-opts input:checked + span { color: var(--mr-primary); }
.mr-priority-opts label:has(input:checked) { border-color: var(--mr-primary); background: rgba(10,77,140,.05); }
.mr-file-drop { border:2px dashed var(--mr-border); border-radius:12px; padding:30px; text-align:center; color: var(--mr-text-muted); transition: all .2s; cursor:pointer; }
.mr-file-drop:hover { border-color: var(--mr-accent); background: var(--mr-bg-alt); }
.mr-file-drop .icon { font-size:36px; margin-bottom:10px; }

/* ---- 404 ---- */
.mr-404 { text-align:center; padding: 80px 0; }
.mr-404 .code { font-size: 140px; font-weight:800; background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.mr-404 h1 { font-size:28px; font-weight:700; color: var(--mr-text); margin: 0 0 12px; }
.mr-404 p { font-size:16px; color: var(--mr-text-muted); margin: 0 0 28px; max-width:460px; margin-left:auto; margin-right:auto; }
.mr-404 .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- Breadcrumb page (non-hero pages) ---- */
.mr-crumb-bar { background: var(--mr-bg-alt); border-bottom:1px solid var(--mr-border); padding: 14px 0; }
.mr-crumb-bar .mr-boxed { display:flex; align-items:center; justify-content:space-between; }
.mr-crumb-bar nav { font-size:13px; color: var(--mr-text-muted); }
.mr-crumb-bar nav a { color: var(--mr-text-muted); text-decoration:none; }
.mr-crumb-bar nav a:hover { color: var(--mr-primary); }
.mr-crumb-bar nav span { margin: 0 8px; opacity:.5; }
.mr-crumb-bar nav b { color: var(--mr-text); }

/* ---- Responsive Phase 2 ---- */
@media (max-width: 1024px) {
  .mr-layout-2col { grid-template-columns: 1fr; }
  .mr-layout-2col .mr-sidebar { position: static; }
  .mr-checkout-grid { grid-template-columns: 1fr; }
  .mr-order-summary { position: static; }
  .mr-docs-layout { grid-template-columns: 1fr; }
  .mr-docs-sidebar, .mr-docs-toc { position: static; }
  .mr-about-hero-grid { grid-template-columns: 1fr; }
  .mr-about-visual { height: 240px; }
  .mr-team-grid { grid-template-columns: repeat(2,1fr); }
  .mr-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .mr-blog-grid { grid-template-columns: 1fr; }
  .mr-vm-grid { grid-template-columns: 1fr; }
  .mr-value-grid { grid-template-columns: 1fr; }
  .mr-stats-row { grid-template-columns: 1fr 1fr; }
  .mr-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mr-form-row { grid-template-columns: 1fr; }
  .mr-team-grid { grid-template-columns: 1fr; }
  .mr-stats-row { grid-template-columns: 1fr; }
  .mr-article { padding: 24px; }
  .mr-article h1 { font-size: 24px; }
  .mr-doc-content { padding: 24px; }
  .mr-ticket-table { font-size:13px; }
  .mr-ticket-table th, .mr-ticket-table td { padding: 11px 10px; }
  .mr-404 .code { font-size: 96px; }
  .mr-page-hero h1 { font-size: 28px; }
}

/* ============================================================
   PHASE 3 — produk, compare, kontak, legal, register, forgot, order-detail, ticket-detail
   ============================================================ */

/* ---- Produk katalog ---- */
.mr-cat-filter { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.mr-produk-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.mr-produk-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; overflow:hidden; transition: transform .25s, box-shadow .25s, border-color .25s; display:flex; flex-direction:column; }
.mr-produk-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(10,77,140,.14); border-color: var(--mr-accent); }
.mr-produk-thumb { height:170px; background: linear-gradient(135deg, var(--mr-primary-light), var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:52px; color:#fff; opacity:.9; position:relative; }
.mr-produk-thumb .tag { position:absolute; top:12px; right:12px; background: rgba(10,77,140,.92); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:6px; }
.mr-produk-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.mr-produk-body h3 { font-size:17px; font-weight:700; color:var(--mr-text); margin:0 0 6px; }
.mr-produk-body .ptype { font-size:12px; color: var(--mr-accent); font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.mr-produk-body p { font-size:13.5px; color: var(--mr-text-muted); margin:0 0 14px; flex:1; line-height:1.55; }
.mr-produk-body .pp { font-size:18px; font-weight:800; color: var(--mr-primary); margin-bottom:12px; }
.mr-produk-body .pp span { font-size:12px; font-weight:400; color: var(--mr-text-muted); display:block; }
.mr-produk-body .mr-btn { width:100%; }

/* ---- Compare table ---- */
.mr-compare-wrap { overflow-x:auto; }
.mr-compare-table { width:100%; border-collapse:separate; border-spacing:0; background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; overflow:hidden; min-width:680px; }
.mr-compare-table th, .mr-compare-table td { padding:16px 18px; text-align:center; border-bottom:1px solid var(--mr-border); font-size:14px; color: var(--mr-text); }
.mr-compare-table th { background: var(--mr-bg-alt); font-weight:700; font-size:15px; }
.mr-compare-table th.feature-col, .mr-compare-table td.feature-col { text-align:left; font-weight:600; color: var(--mr-text); background: var(--mr-bg-alt); width:30%; }
.mr-compare-table .col-pop { background: rgba(10,77,140,.06); position:relative; }
.mr-compare-table .badge-pop { display:inline-block; background: var(--mr-primary); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; margin-bottom:6px; text-transform:uppercase; }
.mr-compare-table .yes { color:#16a34a; font-weight:700; font-size:17px; }
.mr-compare-table .no { color:#94a3b8; }
.mr-compare-table tr:last-child td { border-bottom:none; }
.mr-compare-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-bottom:36px; }
.mr-compare-card { background: var(--mr-card); border:2px solid var(--mr-border); border-radius:16px; padding:28px; text-align:center; position:relative; }
.mr-compare-card.popular { border-color: var(--mr-primary); box-shadow: 0 14px 40px rgba(10,77,140,.15); transform: translateY(-6px); }
.mr-compare-card .pop-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background: var(--mr-primary); color:#fff; font-size:11px; font-weight:700; padding:5px 14px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; }
.mr-compare-card .icon { font-size:40px; margin-bottom:10px; }
.mr-compare-card h3 { font-size:19px; font-weight:700; color:var(--mr-text); margin:0 0 8px; }
.mr-compare-card .price { font-size:26px; font-weight:800; color: var(--mr-primary); margin-bottom:14px; }
.mr-compare-card .price span { font-size:12px; color: var(--mr-text-muted); font-weight:400; }
.mr-compare-card ul { list-style:none; padding:0; margin:0 0 18px; text-align:left; }
.mr-compare-card li { font-size:13.5px; color: var(--mr-text-muted); padding:6px 0; border-bottom:1px solid var(--mr-border); }
.mr-compare-card li:last-child { border-bottom:none; }
.mr-compare-card li::before { content:'✓ '; color:#16a34a; font-weight:700; }

/* ---- Kontak ---- */
.mr-kontak-grid { display:grid; grid-template-columns: 1fr 1fr; gap:30px; }
.mr-kontak-info { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:24px; }
.mr-kontak-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:12px; padding:22px; }
.mr-kontak-card .icon { width:46px; height:46px; border-radius:12px; background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin-bottom:12px; }
.mr-kontak-card h4 { font-size:15px; font-weight:700; color:var(--mr-text); margin:0 0 6px; }
.mr-kontak-card p { font-size:13px; color: var(--mr-text-muted); margin:0; line-height:1.6; }
.mr-kontak-card a { color: var(--mr-primary); text-decoration:none; font-weight:600; }
.mr-map { height:240px; border-radius:14px; background: linear-gradient(135deg, #0a4d8c, #00b4d8); display:flex; align-items:center; justify-content:center; color:#fff; font-size:40px; margin-bottom:0; overflow:hidden; position:relative; }
.mr-map::after { content:'📍 Bandung, Indonesia'; position:absolute; bottom:14px; left:14px; background: rgba(0,0,0,.4); padding:6px 12px; border-radius:8px; font-size:13px; }

/* ---- Legal article (privacy/terms) ---- */
.mr-legal-wrap { max-width: 820px; margin: 0 auto; }
.mr-legal-toc { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:22px 26px; margin-bottom:30px; }
.mr-legal-toc h3 { font-size:15px; font-weight:700; color:var(--mr-text); margin:0 0 12px; }
.mr-legal-toc ol { margin:0; padding-left:20px; columns:2; column-gap:30px; }
.mr-legal-toc li { margin-bottom:6px; font-size:14px; }
.mr-legal-toc a { color: var(--mr-text-muted); text-decoration:none; }
.mr-legal-toc a:hover { color: var(--mr-primary); }
.mr-legal-article { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:40px; }
.mr-legal-article .updated { font-size:13px; color: var(--mr-text-muted); margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--mr-border); }
.mr-legal-article h2 { font-size:22px; font-weight:700; color:var(--mr-text); margin:30px 0 12px; }
.mr-legal-article h2:first-of-type { margin-top:0; }
.mr-legal-article h3 { font-size:17px; font-weight:600; color:var(--mr-text); margin:22px 0 10px; }
.mr-legal-article p { font-size:15px; line-height:1.85; color:var(--mr-text); margin:0 0 16px; }
.mr-legal-article ul, .mr-legal-article ol { padding-left:22px; margin:0 0 16px; color:var(--mr-text); }
.mr-legal-article li { margin-bottom:8px; line-height:1.7; font-size:14px; }

/* ---- Order detail ---- */
.mr-order-detail-grid { display:grid; grid-template-columns: 1fr 340px; gap:26px; align-items:start; }
.mr-order-status-bar { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:22px 26px; margin-bottom:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.mr-order-status-bar .oid { font-family:monospace; font-size:18px; font-weight:700; color: var(--mr-primary); }
.mr-order-status-bar .odate { font-size:13px; color: var(--mr-text-muted); }
.mr-order-progress { display:flex; gap:6px; align-items:center; }
.mr-order-progress .step { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--mr-text-muted); }
.mr-order-progress .dot { width:14px; height:14px; border-radius:50%; background: var(--mr-border); }
.mr-order-progress .step.done .dot { background: #16a34a; }
.mr-order-progress .step.current .dot { background: var(--mr-primary); box-shadow:0 0 0 4px rgba(10,77,140,.15); }
.mr-order-progress .line { width:30px; height:2px; background: var(--mr-border); }
.mr-order-progress .line.done { background:#16a34a; }
.mr-addr-card { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:22px; margin-bottom:24px; }
.mr-addr-card h3 { font-size:15px; font-weight:700; color:var(--mr-text); margin:0 0 10px; }
.mr-addr-card p { font-size:14px; color: var(--mr-text-muted); margin:0; line-height:1.7; }
.mr-order-items-table { width:100%; border-collapse:collapse; background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; overflow:hidden; }
.mr-order-items-table th { background: var(--mr-bg-alt); padding:14px 16px; text-align:left; font-size:13px; font-weight:700; color: var(--mr-text-muted); }
.mr-order-items-table td { padding:16px; border-top:1px solid var(--mr-border); font-size:14px; color: var(--mr-text); }
.mr-order-items-table .prod { display:flex; align-items:center; gap:12px; }
.mr-order-items-table .prod .pt { width:44px; height:44px; border-radius:9px; background: linear-gradient(135deg,var(--mr-primary-light),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.mr-order-summary-side { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; position:sticky; top:90px; }
.mr-order-summary-side h3 { font-size:16px; font-weight:700; margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid var(--mr-border); }
.mr-timeline-track { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; margin-bottom:24px; }
.mr-timeline-track h3 { font-size:15px; font-weight:700; margin:0 0 16px; }
.mr-track-item { display:flex; gap:14px; padding:10px 0; }
.mr-track-item .tdot { width:12px; height:12px; border-radius:50%; background: var(--mr-border); margin-top:4px; flex-shrink:0; }
.mr-track-item.done .tdot { background: #16a34a; }
.mr-track-item.current .tdot { background: var(--mr-primary); box-shadow:0 0 0 4px rgba(10,77,140,.15); }
.mr-track-item .tinfo h4 { font-size:14px; font-weight:600; margin:0 0 2px; color: var(--mr-text); }
.mr-track-item .tinfo span { font-size:12px; color: var(--mr-text-muted); }

/* ---- Ticket detail ---- */
.mr-ticket-detail-head { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:26px; margin-bottom:24px; }
.mr-ticket-detail-head .tid { font-family:monospace; font-size:14px; color: var(--mr-primary); font-weight:600; margin-bottom:6px; }
.mr-ticket-detail-head h1 { font-size:24px; font-weight:700; color:var(--mr-text); margin:0 0 14px; }
.mr-ticket-meta-row { display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color: var(--mr-text-muted); }
.mr-ticket-meta-row span b { color: var(--mr-text); }
.mr-ticket-thread { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:26px; margin-bottom:24px; }
.mr-msg { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--mr-border); }
.mr-msg:last-child { border-bottom:none; }
.mr-msg .avatar { width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:16px; }
.mr-msg.user .avatar { background: linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); }
.mr-msg.staff .avatar { background: linear-gradient(135deg,#16a34a,#22c55e); }
.mr-msg .body { flex:1; }
.mr-msg .body .head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mr-msg .body .head h4 { font-size:14px; font-weight:700; margin:0; color: var(--mr-text); }
.mr-msg .body .head .role { font-size:11px; padding:2px 8px; border-radius:5px; font-weight:600; }
.mr-msg.user .role { background: rgba(10,77,140,.12); color: var(--mr-primary); }
.mr-msg.staff .role { background: rgba(22,163,74,.12); color:#16a34a; }
.mr-msg .body .time { font-size:12px; color: var(--mr-text-muted); }
.mr-msg .body p { font-size:14px; color: var(--mr-text); margin:0 0 10px; line-height:1.75; }
.mr-msg .body .attach { display:flex; gap:10px; flex-wrap:wrap; }
.mr-msg .body .attach a { background: var(--mr-bg-alt); border:1px solid var(--mr-border); border-radius:8px; padding:8px 14px; font-size:13px; color: var(--mr-text); text-decoration:none; display:flex; align-items:center; gap:8px; }
.mr-msg .body .attach a:hover { border-color: var(--mr-accent); }
.mr-reply-box { background: var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; }
.mr-reply-box h3 { font-size:16px; font-weight:700; margin:0 0 14px; }
.mr-reply-box textarea { width:100%; border:1px solid var(--mr-border); border-radius:10px; padding:14px; background: var(--mr-input-bg); color: var(--mr-text); font-size:14px; font-family:inherit; resize:vertical; min-height:120px; margin-bottom:14px; }
.mr-reply-box textarea:focus { outline:none; border-color: var(--mr-accent); }
.mr-reply-actions { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.mr-reply-actions .opts { display:flex; gap:14px; font-size:13px; color: var(--mr-text-muted); }
.mr-reply-actions .opts label { display:flex; align-items:center; gap:6px; cursor:pointer; }

/* ---- Responsive phase 3 ---- */
@media (max-width:1024px) {
  .mr-produk-grid { grid-template-columns: 1fr 1fr; }
  .mr-compare-cards { grid-template-columns: 1fr; }
  .mr-kontak-grid { grid-template-columns: 1fr; }
  .mr-order-detail-grid { grid-template-columns: 1fr; }
  .mr-order-summary-side { position:static; }
  .mr-compare-card.popular { transform:none; }
}
@media (max-width:900px) {
  .mr-produk-grid { grid-template-columns: 1fr; }
  .mr-kontak-info { grid-template-columns: 1fr; }
  .mr-legal-toc ol { columns:1; }
}
@media (max-width:640px) {
  .mr-legal-article { padding:24px; }
  .mr-ticket-meta-row { flex-direction:column; gap:8px; }
  .mr-order-progress { flex-wrap:wrap; }
  .mr-order-progress .line { display:none; }
}

/* ============================================================
   PHASE 3 SUPPLEMENTARY — class names matching generated HTML
   ============================================================ */

/* ---- Filter bar (produk) ---- */
.mr-filter-bar { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:20px 24px; margin-bottom:30px; }
.mr-filter-group { display:flex; flex-direction:column; gap:6px; }
.mr-filter-group label { font-size:12px; font-weight:600; color:var(--mr-text-muted); text-transform:uppercase; letter-spacing:.4px; }
.mr-filter-select { border:1px solid var(--mr-border); border-radius:8px; padding:9px 14px; background:var(--mr-input-bg); color:var(--mr-text); font-size:14px; font-family:inherit; cursor:pointer; min-width:160px; }
.mr-filter-select:focus { outline:none; border-color:var(--mr-accent); }
.mr-filter-search { flex:1; min-width:200px; }
.mr-filter-search input { width:100%; border:1px solid var(--mr-border); border-radius:8px; padding:9px 14px; background:var(--mr-input-bg); color:var(--mr-text); font-size:14px; font-family:inherit; }
.mr-filter-search input:focus { outline:none; border-color:var(--mr-accent); }

/* ---- Produk card (class names used in HTML) ---- */
.mr-product-card { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s; display:flex; flex-direction:column; }
.mr-product-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(10,77,140,.14); border-color:var(--mr-accent); }
.mr-prod-img { height:180px; overflow:hidden; background:linear-gradient(135deg,var(--mr-primary-light),var(--mr-accent)); position:relative; }
.mr-prod-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.mr-product-card:hover .mr-prod-img img { transform:scale(1.06); }
.mr-prod-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.mr-prod-tag { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--mr-accent); background:rgba(0,180,216,.12); padding:4px 10px; border-radius:6px; margin-bottom:10px; align-self:flex-start; }
.mr-prod-tag-hot { background:rgba(220,38,38,.12); color:#dc2626; }
.mr-prod-body h3 { font-size:17px; font-weight:700; color:var(--mr-text); margin:0 0 8px; }
.mr-prod-body p { font-size:13.5px; color:var(--mr-text-muted); margin:0 0 14px; flex:1; line-height:1.55; }
.mr-prod-price { font-size:20px; font-weight:800; color:var(--mr-primary); margin-bottom:14px; }
.mr-prod-actions { display:flex; gap:10px; }
.mr-prod-actions .mr-btn { flex:1; }

/* ---- Pagination ---- */
.mr-pagination { display:flex; gap:8px; justify-content:center; margin:36px 0; }
.mr-page-btn { padding:9px 16px; border:1px solid var(--mr-border); border-radius:8px; background:var(--mr-card); color:var(--mr-text); text-decoration:none; font-size:14px; font-weight:600; transition:all .2s; }
.mr-page-btn:hover:not(.disabled):not(.active) { border-color:var(--mr-accent); color:var(--mr-primary); }
.mr-page-btn.active { background:var(--mr-primary); color:#fff; border-color:var(--mr-primary); }
.mr-page-btn.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ---- CTA band ---- */
.mr-cta-band { background:linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); border-radius:16px; padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:40px; }
.mr-cta-band h3 { color:#fff; font-size:20px; font-weight:700; margin:0 0 6px; }
.mr-cta-band p { color:rgba(255,255,255,.85); font-size:14px; margin:0; }
.mr-btn-white { background:#fff !important; color:var(--mr-primary) !important; border:none !important; font-weight:700; }
.mr-btn-white:hover { background:rgba(255,255,255,.9) !important; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }

/* ---- Compare (class names used in HTML) ---- */
.mr-compare-table-wrap { overflow-x:auto; margin-top:40px; }
.mr-compare-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; overflow:hidden; min-width:680px; }
.mr-compare-table th, .mr-compare-table td { padding:14px 18px; text-align:center; border-bottom:1px solid var(--mr-border); font-size:14px; color:var(--mr-text); }
.mr-compare-table th { background:var(--mr-bg-alt); font-weight:700; font-size:15px; }
.mr-compare-table th:first-child, .mr-compare-table td:first-child { text-align:left; font-weight:600; }
.mr-compare-table tr:last-child td { border-bottom:none; }
.mr-compare-table tr:hover td { background:rgba(10,77,140,.03); }
.mr-compare-price { font-size:26px; font-weight:800; color:var(--mr-primary); margin:6px 0 10px; }
.mr-compare-desc { font-size:13.5px; color:var(--mr-text-muted); margin:0 0 18px; line-height:1.5; }
.mr-compare-feats { list-style:none; padding:0; margin:0 0 18px; text-align:left; }
.mr-compare-feats li { font-size:13.5px; color:var(--mr-text-muted); padding:6px 0; border-bottom:1px solid var(--mr-border); }
.mr-compare-feats li:last-child { border-bottom:none; }
.mr-compare-feats li::before { content:'✓ '; color:#16a34a; font-weight:700; }
.mr-popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--mr-primary); color:#fff; font-size:11px; font-weight:700; padding:5px 14px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }

/* ---- Kontak (class names used in HTML) ---- */
.mr-kontak-form { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:30px; }
.mr-kontak-form h2 { font-size:22px; font-weight:700; margin:0 0 6px; color:var(--mr-text); }
.mr-kontak-form form { display:flex; flex-direction:column; gap:18px; }
.mr-form-row { display:flex; gap:18px; }
.mr-form-row .mr-form-field { flex:1; }
.mr-form-field { display:flex; flex-direction:column; gap:6px; }
.mr-form-field label { font-size:13px; font-weight:600; color:var(--mr-text); }
.mr-form-field input, .mr-form-field select, .mr-form-field textarea { border:1px solid var(--mr-border); border-radius:8px; padding:11px 14px; background:var(--mr-input-bg); color:var(--mr-text); font-size:14px; font-family:inherit; }
.mr-form-field textarea { resize:vertical; min-height:120px; }
.mr-form-field input:focus, .mr-form-field select:focus, .mr-form-field textarea:focus { outline:none; border-color:var(--mr-accent); }
.mr-kontak-info-side { display:flex; flex-direction:column; }
.mr-kontak-info { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mr-kontak-card { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:12px; padding:22px; }
.mr-kontak-icon { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px; }
.mr-kontak-card h4 { font-size:15px; font-weight:700; color:var(--mr-text); margin:0 0 6px; }
.mr-kontak-card p { font-size:13px; color:var(--mr-text-muted); margin:0; line-height:1.6; }
.mr-kontak-map { margin-top:32px; border-radius:14px; overflow:hidden; border:1px solid var(--mr-border); }
.mr-kontak-map iframe { display:block; }

/* ---- Legal layout (class names used in HTML) ---- */
.mr-legal-layout { display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:start; }
.mr-legal-layout .mr-legal-toc { position:sticky; top:90px; }
.mr-legal-toc { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:22px 26px; }
.mr-legal-toc h3 { font-size:15px; font-weight:700; color:var(--mr-text); margin:0 0 12px; }
.mr-legal-toc ol { margin:0; padding-left:20px; }
.mr-legal-toc li { margin-bottom:6px; font-size:14px; }
.mr-legal-toc a { color:var(--mr-text-muted); text-decoration:none; }
.mr-legal-toc a:hover { color:var(--mr-primary); }
.mr-legal-article { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:40px; }
.mr-legal-article h2 { font-size:22px; font-weight:700; color:var(--mr-text); margin:30px 0 12px; scroll-margin-top:90px; }
.mr-legal-article h2:first-of-type { margin-top:0; }
.mr-legal-article h3 { font-size:17px; font-weight:600; color:var(--mr-text); margin:22px 0 10px; }
.mr-legal-article p { font-size:15px; line-height:1.85; color:var(--mr-text); margin:0 0 16px; }
.mr-legal-article ul, .mr-legal-article ol { padding-left:22px; margin:0 0 16px; color:var(--mr-text); }
.mr-legal-article li { margin-bottom:8px; line-height:1.7; font-size:14px; }
.mr-legal-article code { background:var(--mr-bg-alt); border:1px solid var(--mr-border); border-radius:5px; padding:2px 7px; font-size:13px; }
.mr-legal-article a { color:var(--mr-primary); text-decoration:none; }

/* ---- Order detail (class names used in HTML) ---- */
.mr-order-head { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:26px 30px; margin-bottom:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.mr-order-id { font-family:monospace; font-size:14px; font-weight:700; color:var(--mr-primary); margin-bottom:6px; }
.mr-order-head h1 { font-size:22px; font-weight:700; color:var(--mr-text); margin:0 0 6px; }
.mr-order-date { font-size:13px; color:var(--mr-text-muted); }
.mr-order-status-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.mr-order-status { padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700; }
.mr-status-shipping { background:rgba(0,180,216,.15); color:#0284c7; }
.mr-order-main { display:flex; flex-direction:column; gap:24px; }
.mr-order-progress { display:flex; align-items:center; gap:4px; background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:22px 26px; margin-bottom:24px; flex-wrap:wrap; }
.mr-progress-step { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:80px; }
.mr-progress-step span { font-size:12px; font-weight:600; color:var(--mr-text-muted); }
.mr-progress-step small { font-size:11px; color:var(--mr-text-muted); }
.mr-progress-step.done span { color:var(--mr-text); }
.mr-progress-step.current span { color:var(--mr-primary); font-weight:700; }
.mr-step-dot { width:34px; height:34px; border-radius:50%; background:var(--mr-border); display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; }
.mr-progress-step.done .mr-step-dot { background:#16a34a; }
.mr-progress-step.current .mr-step-dot { background:var(--mr-primary); box-shadow:0 0 0 5px rgba(10,77,140,.15); }
.mr-progress-line { flex:1; min-width:20px; height:3px; background:var(--mr-border); border-radius:3px; }
.mr-progress-line.done { background:#16a34a; }
.mr-progress-line.active { background:linear-gradient(90deg,#16a34a 50%,var(--mr-border) 50%); }
.mr-tracking-box { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; }
.mr-tracking-box h3 { font-size:16px; font-weight:700; margin:0 0 16px; }
.mr-tracking-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:14px; color:var(--mr-text); border-bottom:1px solid var(--mr-border); flex-wrap:wrap; gap:10px; }
.mr-tracking-row:last-of-type { border-bottom:none; margin-bottom:14px; }
.mr-tracking-row code { background:var(--mr-bg-alt); padding:3px 8px; border-radius:5px; font-size:13px; }
.mr-order-items-box { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; }
.mr-order-items-box h3 { font-size:16px; font-weight:700; margin:0 0 16px; }
.mr-order-items-table { width:100%; border-collapse:collapse; }
.mr-order-items-table th { background:var(--mr-bg-alt); padding:12px 14px; text-align:left; font-size:12px; font-weight:700; color:var(--mr-text-muted); text-transform:uppercase; letter-spacing:.3px; }
.mr-order-items-table th.num, .mr-order-items-table td.num { text-align:right; }
.mr-order-items-table td { padding:14px; border-top:1px solid var(--mr-border); font-size:14px; color:var(--mr-text); }
.mr-order-items-table small { color:var(--mr-text-muted); font-size:12px; }
.mr-order-license-box { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; }
.mr-order-license-box h3 { font-size:16px; font-weight:700; margin:0 0 16px; }
.mr-license-item { display:flex; justify-content:space-between; align-items:center; gap:14px; background:var(--mr-bg-alt); border:1px solid var(--mr-border); border-radius:10px; padding:16px; margin-bottom:12px; }
.mr-license-info { display:flex; flex-direction:column; gap:6px; }
.mr-license-name { font-size:14px; font-weight:600; color:var(--mr-text); }
.mr-license-key { font-family:monospace; font-size:14px; color:var(--mr-primary); background:var(--mr-card); padding:4px 10px; border-radius:6px; border:1px solid var(--mr-border); }
.mr-license-note { font-size:13px; color:var(--mr-text-muted); margin:0; }
.mr-order-summary-box { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:24px; margin-bottom:24px; }
.mr-order-summary-box h3 { font-size:16px; font-weight:700; margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid var(--mr-border); }
.mr-summary-row { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color:var(--mr-text-muted); }
.mr-summary-total { display:flex; justify-content:space-between; padding:14px 0 0; margin-top:8px; border-top:2px solid var(--mr-border); font-size:17px; font-weight:800; color:var(--mr-primary); }
.mr-summary-pay-method { margin-top:14px; padding-top:14px; border-top:1px solid var(--mr-border); display:flex; flex-direction:column; gap:4px; }
.mr-pay-label { font-size:12px; color:var(--mr-text-muted); text-transform:uppercase; letter-spacing:.3px; }
.mr-pay-value { font-size:14px; font-weight:600; color:var(--mr-text); }
.mr-pay-status { font-size:12px; }
.mr-pay-confirmed { color:#16a34a; font-weight:600; }
.mr-order-addr-box { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:22px; margin-bottom:20px; }
.mr-order-addr-box h3 { font-size:15px; font-weight:700; margin:0 0 10px; }
.mr-order-addr-box p { font-size:13.5px; color:var(--mr-text-muted); line-height:1.7; margin:0; }
.mr-order-actions-side { display:flex; flex-direction:column; gap:10px; }

/* ---- Auth pages (register/forgot) ---- */
.mr-auth-wrap { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.mr-auth-center { display:flex; justify-content:center; }
.mr-auth-narrow { max-width:480px; width:100%; }
.mr-auth-header { text-align:center; margin-bottom:26px; }
.mr-auth-header h1 { font-size:24px; font-weight:700; color:var(--mr-text); margin:0 0 8px; }
.mr-auth-header h2 { font-size:24px; font-weight:800; color:var(--mr-text); margin:0 0 6px; }
.mr-auth-header p { font-size:14px; color:var(--mr-text-muted); margin:0; line-height:1.6; }
.mr-auth-form { display:flex; flex-direction:column; gap:18px; }
.mr-auth-checks { display:flex; flex-direction:column; gap:12px; }
.mr-check-item { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--mr-text-muted); cursor:pointer; line-height:1.5; }
.mr-check-item input { margin-top:3px; width:auto; }
.mr-check-item a { color:var(--mr-primary); font-weight:600; text-decoration:none; }
.mr-pwd-strength { display:flex; flex-direction:column; gap:6px; }
.mr-pwd-bar { height:6px; background:var(--mr-border); border-radius:4px; overflow:hidden; }
.mr-pwd-bar span { display:block; height:100%; background:#dc2626; border-radius:4px; transition:width .3s, background .3s; }
.mr-pwd-label { font-size:12px; color:var(--mr-text-muted); }
.mr-auth-footer { text-align:center; font-size:14px; color:var(--mr-text-muted); margin:0; }
.mr-auth-footer a { color:var(--mr-primary); font-weight:600; text-decoration:none; }
/* Card padding for non-tabbed auth pages (register, forgot) */
.mr-auth-card.mr-auth-padded { padding:36px; }
/* Vertical social buttons (register page) */
.mr-auth-social.mr-auth-social-stack { display:flex; flex-direction:column; gap:10px; }
.mr-auth-side { background:linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); border-radius:16px; padding:36px; color:#fff; }
.mr-auth-side h2 { font-size:22px; font-weight:700; margin:0 0 22px; color:#fff; }
.mr-auth-benefits { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:22px; }
.mr-auth-benefits li { display:flex; gap:14px; align-items:flex-start; }
.mr-ben-icon { font-size:28px; flex-shrink:0; line-height:1; }
.mr-auth-benefits h4 { font-size:15px; font-weight:700; color:#fff; margin:0 0 4px; }
.mr-auth-benefits p { font-size:13px; color:rgba(255,255,255,.82); margin:0; line-height:1.55; }
.mr-fpwd-icon { font-size:48px; margin-bottom:12px; }
.mr-fpwd-info { background:var(--mr-bg-alt); border:1px solid var(--mr-border); border-radius:12px; padding:20px; margin-top:6px; }
.mr-fpwd-info h4 { font-size:14px; font-weight:700; margin:0 0 10px; color:var(--mr-text); }
.mr-fpwd-info ol { padding-left:20px; margin:0 0 12px; }
.mr-fpwd-info li { font-size:13px; color:var(--mr-text-muted); margin-bottom:6px; line-height:1.6; }
.mr-fpwd-note { font-size:12.5px; color:var(--mr-text-muted); margin:0; }
.mr-fpwd-note a { color:var(--mr-primary); font-weight:600; text-decoration:none; }

/* ---- Status badge (ticket) ---- */
.mr-status-badge { display:inline-block; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; }
.mr-status-open { background:rgba(234,179,8,.15); color:#ca8a04; }

/* ---- Responsive supplement ---- */
@media (max-width:1024px) {
  .mr-auth-wrap { grid-template-columns:1fr; }
  .mr-legal-layout { grid-template-columns:1fr; }
  .mr-legal-layout .mr-legal-toc { position:static; }
  .mr-form-row { flex-direction:column; }
}
@media (max-width:640px) {
  .mr-filter-bar { flex-direction:column; align-items:stretch; }
  .mr-auth-card { padding:24px; }
  .mr-order-head { flex-direction:column; align-items:flex-start; }
  .mr-order-status-wrap { align-items:flex-start; flex-direction:row; }
}

/* ============================================================
   INDEX PAGE — grid & component styles (class names matching HTML)
   ============================================================ */

/* ---- Products preview grid (2 cols) ---- */
.mr-products-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:28px; }
.mr-product-card { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:16px; padding:32px; transition:transform .3s, box-shadow .3s, border-color .3s; display:flex; flex-direction:column; }
.mr-product-card:hover { transform:translateY(-6px); box-shadow:0 16px 44px rgba(10,77,140,.14); border-color:var(--mr-accent); }
.mr-product-icon { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:18px; }
.mr-product-card h3 { font-size:20px; font-weight:700; color:var(--mr-text); margin:0 0 10px; }
.mr-product-card > p { font-size:14.5px; color:var(--mr-text-muted); margin:0 0 16px; line-height:1.65; }
.mr-product-features { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:8px; }
.mr-product-features li { font-size:14px; color:var(--mr-text); padding-left:26px; position:relative; }
.mr-product-features li::before { content:'✓'; position:absolute; left:0; top:0; color:#16a34a; font-weight:700; font-size:15px; }
.mr-product-price { font-size:22px; font-weight:800; color:var(--mr-primary); margin-bottom:18px; }
.mr-product-price span { display:block; font-size:12px; font-weight:500; color:var(--mr-text-muted); margin-top:2px; }

/* ---- Why us grid (4 cols) ---- */
.mr-why-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.mr-why-card { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:28px; text-align:center; transition:transform .3s, box-shadow .3s, border-color .3s; }
.mr-why-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(10,77,140,.12); border-color:var(--mr-accent); }
.mr-why-icon { width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 16px; }
.mr-why-card h3 { font-size:16px; font-weight:700; color:var(--mr-text); margin:0 0 8px; }
.mr-why-card p { font-size:13.5px; color:var(--mr-text-muted); margin:0; line-height:1.6; }

/* ---- Features grid (3 cols) ---- */
.mr-features-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.mr-feature-card { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:14px; padding:28px; transition:transform .3s, box-shadow .3s, border-color .3s; }
.mr-feature-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(10,77,140,.12); border-color:var(--mr-accent); }
.mr-feature-icon { width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }
.mr-feature-card h3 { font-size:17px; font-weight:700; color:var(--mr-text); margin:0 0 8px; }
.mr-feature-card p { font-size:14px; color:var(--mr-text-muted); margin:0; line-height:1.65; }

/* ---- Industries row ---- */
.mr-industries-row { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.mr-industry { background:var(--mr-card); border:1px solid var(--mr-border); border-radius:999px; padding:14px 28px; font-size:15px; font-weight:600; color:var(--mr-text); transition:all .25s; display:flex; align-items:center; gap:8px; }
.mr-industry:hover { background:var(--mr-primary); color:#fff; border-color:var(--mr-primary); transform:translateY(-3px); box-shadow:0 8px 24px rgba(10,77,140,.2); }

/* ---- CTA box ---- */
.mr-cta-box { background:linear-gradient(135deg,var(--mr-primary),var(--mr-accent)); border-radius:20px; padding:50px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.mr-cta-box::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size:30px 30px; }
.mr-cta-box > * { position:relative; z-index:1; }
.mr-cta-box h2 { font-size:28px; font-weight:800; margin:0 0 12px; color:#fff; }
.mr-cta-box p { font-size:16px; opacity:.9; margin:0 0 26px; }
.mr-cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.mr-cta-box .mr-btn-outline { border-color:rgba(255,255,255,0.6); color:#fff; }
.mr-cta-box .mr-btn-outline:hover { background:#fff; color:var(--mr-primary); }

/* ---- Section subtitle (used on index) ---- */
.mr-section-sub { font-size:16px; color:var(--mr-text-muted); margin:8px 0 0; }

/* ---- Responsive index ---- */
@media (max-width:1024px) {
  .mr-products-grid { grid-template-columns:1fr; }
  .mr-why-grid { grid-template-columns:repeat(2,1fr); }
  .mr-features-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .mr-why-grid { grid-template-columns:1fr; }
  .mr-features-grid { grid-template-columns:1fr; }
  .mr-product-card { padding:24px; }
  .mr-why-card { padding:22px; }
  .mr-feature-card { padding:22px; }
  .mr-cta-box { padding:32px 24px; }
  .mr-cta-box h2 { font-size:22px; }
  .mr-industries-row { gap:10px; }
  .mr-industry { padding:12px 20px; font-size:14px; }
}

/* ---- Anchor offset untuk sticky header (project addition) ---- */
.mr-doc-content h2,
.mr-doc-content h3,
.mr-article h2,
.mr-article h3 {
  scroll-margin-top: 110px;
}

/* ---- Kartu blog featured (horizontal) — project addition ---- */
.mr-blog-card.featured {
  flex-direction: row;
}
.mr-blog-card.featured .mr-blog-thumb {
  width: 40%;
  height: auto;
  min-height: 230px;
  flex-shrink: 0;
}
.mr-blog-card.featured .mr-blog-thumb img {
  position: absolute;
}
.mr-blog-card.featured .mr-blog-body {
  flex: 1;
}
@media (max-width: 640px) {
  .mr-blog-card.featured {
    flex-direction: column;
  }
  .mr-blog-card.featured .mr-blog-thumb {
    width: 100%;
    min-height: 170px;
  }
}

/* ============================================
   PROJECT ADDITIONS (integrasi halaman home)
   ============================================ */
.mr-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 900px) {
  .mr-split { grid-template-columns: 1fr; gap: 30px; }
}

.mr-compare-cards.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .mr-compare-cards.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mr-compare-cards.four { grid-template-columns: 1fr; }
}
.mr-compare-card li.no::before { content: '\2717\00a0 '; color: #ef4444; }
.mr-compare-card li.no { color: #94a3b8; }

.mr-faq-item.open .mr-faq-a { max-height: 900px; }

.mr-tick-list { list-style: none; padding: 0; margin: 0 0 20px; }
.mr-tick-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mr-text-muted); padding: 6px 0; }
.mr-tick-list li i { color: #16a34a; margin-top: 4px; width: 16px; text-align: center; }
.mr-tick-list li.no { color: #94a3b8; }
.mr-tick-list li.no i { color: #ef4444; }

.mr-trust-bar { padding: 34px 0; border-bottom: 1px solid var(--mr-border); }
.mr-trust-bar .lbl { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--mr-text-muted); font-weight: 700; margin-bottom: 18px; }
.mr-trust-bar .items { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; }
.mr-trust-bar .items span { font-weight: 800; font-size: 16px; color: var(--mr-text-muted); opacity: 0.75; }

.mr-hero-ladder { font-family: monospace; font-size: 13px; line-height: 2.1; user-select: none; color: rgba(255, 255, 255, 0.9); }
.mr-hero-ladder .ln { opacity: 0.55; }
.mr-hero-ladder .wire { opacity: 0.55; }
.mr-hero-ladder .chip { padding: 2px 8px; border-radius: 6px; }

.mr-testi-stars { color: #fbbf24; letter-spacing: 3px; margin-bottom: 12px; font-size: 15px; }
.mr-testi-quote { font-size: 14px; line-height: 1.7; color: var(--mr-text-muted); font-style: italic; margin: 0 0 16px; }
.mr-testi-person { display: flex; gap: 12px; align-items: center; }
.mr-testi-person .av { width: 42px; height: 42px; border-radius: 50%; background: var(--mr-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.mr-testi-person .nm { font-weight: 700; font-size: 14px; color: var(--mr-text); }
.mr-testi-person .rl { font-size: 12.5px; color: var(--mr-text-muted); }

.mr-why-icon i { font-size: 20px; }

.mr-eyebrow { display: inline-block; color: var(--mr-accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.mr-head-block h2 { font-size: 32px; font-weight: 800; color: var(--mr-text); margin: 10px 0 14px; letter-spacing: -0.5px; }
.mr-head-block p { color: var(--mr-text-muted); line-height: 1.75; margin: 0 0 26px; }

/* ---- Project addition: grid responsif ---- */
.mr-kontak-info.mr-channels-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .mr-kontak-info.mr-channels-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .mr-kontak-info.mr-channels-4 { grid-template-columns: 1fr; }
}
.mr-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
@media (max-width: 480px) {
  .mr-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Project addition: team grid 3 kolom ---- */
.mr-team-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .mr-team-grid.three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mr-team-grid.three { grid-template-columns: 1fr; }
}

/* ---- Project addition: anchor legal ---- */
.mr-legal-article h2 { scroll-margin-top: 110px; }

/* ---- Project addition: generic grids ---- */
.mr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mr-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 980px) {
  .mr-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .mr-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mr-grid-3 { grid-template-columns: 1fr; }
}