/* ============================================
   Modern CSS for SEO-Optimized Content Site
   Based on Google 2026 Best Practices
   ============================================ */

/* ============================================
   1. CSS RESET & BASE STYLES
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors */
  --color-primary: #0E7C66;
  --color-primary-dark: #0A5C4C;
  --color-primary-light: #3D9B86;
  --color-secondary: #424242;
  --color-accent: #C4783A;
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-danger: #f44336;
  
  /* Neutrals */
  --color-text: #212121;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  --color-border: #e0e0e0;
  --color-border-light: #f5f5f5;
  --color-bg: #ffffff;
  --color-bg-alt: #fafafa;
  --color-bg-section: #f8f9fa;
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Merriweather', Georgia, serif;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Do NOT set overflow-x here: combined with body's overflow-x: hidden
     it makes <html> its own scroll container and breaks the sticky header. */
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* ============================================
   2. SKIP LINK (Accessibility)
   ============================================ */
.soft_a977 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
}

.soft_a977:focus {
  top: 0;
}

/* ============================================
   3. CONTAINER & LAYOUT
   ============================================ */
.content_down_60c9 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .content_down_60c9 {
    padding: 0 var(--space-sm);
  }
}

@media (max-width: 480px) {
  .content_down_60c9 {
    padding: 0 12px;
  }
}

/* Prevent horizontal overflow on all elements EXCEPT header */
*:not(.breadcrumb_wood_1ffe):not(header) {
  max-width: 100%;
}

/* Allow specific elements to exceed container */
html,
body,
.breadcrumb_wood_1ffe,
header,
.green-ad68,
.solid_4900,
.wrapper-new-1b42,
.dim-22c0,
.logo-inner-35cf,
.stone-c196,
.background_hot_61fb {
  max-width: none;
}

/* Critical mobile fix: prevent any overflow */
section,
article,
div,
main {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Ensure images never cause overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure SVG icons don't cause issues */
svg {
  max-width: 100%;
  height: auto;
}

/* ============================================
   4. HEADER & NAVIGATION
   ============================================ */
.breadcrumb_wood_1ffe {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-base);
}

.tooltip_1ee8 {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Scrolled state */
.breadcrumb_wood_1ffe.aside_pressed_29f5 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 1);
}

.item-last-3aa1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  gap: var(--space-md);
}

.purple_a98b {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.accordion_61a7 img {
  height: 36px;
  width: auto;
  display: block;
}

.modal-hard-c52c {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: #e8f5e9;
  color: var(--color-success);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
}

.disabled_7d33 {
  flex: 1;
}

.label-3c6f {
  display: flex;
  list-style: none;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
}

.thumbnail-8bdf {
  display: block;
  padding: 8px 16px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.thumbnail-8bdf:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.thumbnail-8bdf.avatar_72cc {
  background: var(--color-primary);
  color: white;
}

/* Dropdown Navigation */
.modal-current-97f3 {
  position: relative;
}

.sort_820c {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.sort_820c svg {
  transition: transform 0.2s ease;
}

/* 鼠标悬停时箭头旋转（桌面）；点击展开时箭头旋转（移动端） */
.modal-current-97f3:hover .sort_820c svg,
.sort_820c[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.fresh-6419 {
  position: absolute;
  top: calc(100% + 8px); /* 距离父元素8px，更自然 */
  left: 0;
  min-width: 200px;
  width: max-content; /* 自动适应内容宽度 */
  max-width: 300px; /* 最大宽度限制 */
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
  /* 关键：确保没有overflow，内容完全可见 */
  overflow: visible;
  max-height: none;
  height: auto;
}

/* 鼠标悬停父元素时，立即显示下拉菜单 */
.modal-current-97f3:hover .fresh-6419 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 在下拉菜单上方添加一个不可见的桥接区域，防止鼠标移动时菜单消失 */
.fresh-6419::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}

.notification-4a03 {
  display: block;
  padding: 10px 20px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.notification-4a03:hover {
  background: var(--color-primary);
  color: white;
  padding-left: 24px; /* 悬停时轻微缩进 */
}

/* 当前页面在下拉菜单中的样式 */
.notification-4a03[aria-current="page"] {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.progress-red-bf47 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Header Login Button */
.element_f767 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.element_f767:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-text-light);
  transform: translateY(-1px);
}

.element_f767 svg {
  flex-shrink: 0;
}

/* Header Download Button */
.lite_4f64 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: 0 2px 8px rgba(14, 124, 102, 0.3);
  white-space: nowrap;
}

.lite_4f64:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #08483C 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.4);
}

.lite_4f64 svg {
  flex-shrink: 0;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.background_prev_d634 {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 1001;
}

.badge-6c3c {
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: var(--transition-base);
}

/* Hamburger animation when active */
.background_prev_d634[aria-expanded="true"] .badge-6c3c:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.background_prev_d634[aria-expanded="true"] .badge-6c3c:nth-child(2) {
  opacity: 0;
}

.background_prev_d634[aria-expanded="true"] .badge-6c3c:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Navigation Menu */
@media (max-width: 1100px) {
  .disabled_7d33 {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    padding: 80px 0 20px;
    transition: right 0.3s ease-out;
    z-index: 999;
    overflow-y: auto; /* 移动端菜单内容过多时可滚动 */
    overflow-x: visible; /* 水平方向不滚动，确保下拉菜单可见 */
    /* 隐藏滚动条外观，但保留可滚动能力，视觉上更自然 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .disabled_7d33::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge(Chromium) */
  }
  
  .disabled_7d33.dim-b4a9 {
    display: block;
    right: 0;
  }
  
  .label-3c6f {
    flex-direction: column;
    gap: 0;
  }
  
  .thumbnail-8bdf {
    display: block;
    padding: 16px 24px;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-light);
  }
  
  /* Mobile overlay */
  .disabled_7d33::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
  }
  
  .disabled_7d33.dim-b4a9::before {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 1100px) {
  .disabled_7d33 {
    display: none;
  }
  
  .background_prev_d634 {
    display: flex;
  }
  
  .modal-hard-c52c {
    display: none;
  }
  
  /* Adjust header buttons on tablet */
  .element_f767,
  .lite_4f64 {
    padding: 8px 16px;
    font-size: 0.875rem;
  }
  
  /* 移动端下拉菜单改为堆叠显示，不需要浮动 */
  .modal-current-97f3 {
    position: relative;
  }
  
  .fresh-6419 {
    position: static; /* 移动端不浮动，直接堆叠 */
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--color-primary);
    padding-left: 20px;
    margin-top: 0;
    /* 用 max-height 过渡实现自然展开/收起，而不是生硬的 display 切换 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }
  
  .sort_820c[aria-expanded="true"] + .fresh-6419 {
    max-height: 320px; /* 足够容纳所有子项，展开时自然撑开 */
    margin-top: 8px;
  }
  
  .notification-4a03 {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  /* Stack buttons vertically or hide login on small screens */
  .progress-red-bf47 {
    gap: 8px;
  }
  
  .element_f767 {
    display: none;
  }
  
  .lite_4f64 {
    padding: 8px 16px;
    font-size: 0.875rem;
  }
  
  .accordion_61a7 img {
    height: 32px;
    width: auto;
  }
}

@media (max-width: 480px) {
  .lite_4f64 {
    padding: 6px 12px;
    font-size: 0.8125rem;
  }
  
  .lite_4f64 svg {
    width: 14px;
    height: 14px;
  }
  
  .item-last-3aa1 {
    gap: var(--space-sm);
  }
}

/* ============================================
   5. ARTICLE META BANNER
   ============================================ */
.green-ad68 {
  background: var(--color-bg-section);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
}

.slow-a8bd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.status_e3ec {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status_e3ec svg {
  flex-shrink: 0;
}

.status_e3ec a {
  color: var(--color-primary);
  text-decoration: none;
}

.status_e3ec a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .slow-a8bd {
    font-size: 0.8125rem;
    gap: var(--space-sm);
  }
}

/* ============================================
   6. HERO SECTION
   ============================================ */
.solid_4900 {
  padding: var(--space-xl) 0;
  background: linear-gradient(135deg, #F3F6F5 0%, #ffffff 100%);
}

.right_f8ba {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-xl);
  align-items: center;
  width: 100%;
}

@media (max-width: 1024px) {
  .right_f8ba {
    grid-template-columns: 1fr 350px;
    gap: var(--space-lg);
  }
}

.green_8518 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.green_8518 a {
  color: var(--color-primary);
  text-decoration: none;
}

.green_8518 a:hover {
  text-decoration: underline;
}

.accordion-basic-6c09 {
  color: var(--color-text-lighter);
}

.column-35d9 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 1024px) {
  .column-35d9 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .column-35d9 {
    font-size: 1.5rem;
  }
}

.pressed_2c1b {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.pagination-lite-a221 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
  .pagination-lite-a221 {
    grid-template-columns: 1fr;
  }
}

.gradient-wide-1197 {
  display: flex;
  gap: var(--space-sm);
}

.solid-bb32 {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--color-primary-light);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.text-stale-cab3 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.text-stale-cab3 strong {
  font-weight: 600;
  color: var(--color-text);
}

.text-stale-cab3 span {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.wrapper_f8c8 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.surface_d830 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-5dae {
  position: relative;
  text-align: center;
}

.logo-5dae img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.inner-5525 {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.full-d427 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.link_a901 {
  color: #ffa000;
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.overlay_d343 {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
}

.dirty-ff3c {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.lower_810b {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

@media (max-width: 968px) {
  .right_f8ba {
    grid-template-columns: 1fr;
  }
  
  .column-35d9 {
    font-size: 1.75rem;
  }
  
  .surface_d830 {
    order: -1;
    max-width: 100%;
  }
  
  .logo-5dae {
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .column-35d9 {
    font-size: 1.5rem;
  }
  
  .pressed_2c1b {
    font-size: 1rem;
  }
  
  .green_8518 {
    font-size: 0.8125rem;
    flex-wrap: wrap;
  }
  
  .logo-5dae {
    max-width: 250px;
  }
}

/* ============================================
   7. BUTTONS
   ============================================ */
.cool-9abd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  font-size: 1rem;
  line-height: 1.5;
}

.filter-dirty-f4dc {
  background: var(--color-primary);
  color: white;
}

.filter-dirty-f4dc:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.highlight-next-db11 {
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.highlight-next-db11:hover {
  background: var(--color-primary);
  color: white;
}

.fresh-076c {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.fresh-076c:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-text-light);
}

.slider_1d11 {
  padding: 16px 32px;
  font-size: 1.125rem;
}

.slider_69b3 {
  padding: 20px 40px;
  font-size: 1.25rem;
}

/* ============================================
   8. STATS SECTION
   ============================================ */
.wrapper-new-1b42 {
  padding: var(--space-xl) 0;
  background: white;
}

.accordion_7439 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

.hover-blue-ae2b {
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-bg-section);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.hover-blue-ae2b:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.easy_c838 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.modal_action_d61b {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.cold_3f37 {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* ============================================
   9. TABLE OF CONTENTS
   ============================================ */
.dim-22c0 {
  padding: var(--space-xl) 0;
  background: var(--color-bg-section);
}

.popup_east_1696 {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.widget-7e3c {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

.overlay_bright_aade {
  list-style: none;
  counter-reset: toc-counter;
}

.overlay_bright_aade li {
  counter-increment: toc-counter;
  margin-bottom: var(--space-sm);
}

.overlay_bright_aade li a {
  display: flex;
  align-items: center;
  padding: var(--space-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.overlay_bright_aade li a:before {
  content: counter(toc-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary-light);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  margin-right: var(--space-sm);
  flex-shrink: 0;
}

.overlay_bright_aade li a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

/* ============================================
   10. CONTENT SECTIONS
   ============================================ */
.logo-inner-35cf {
  padding: var(--space-xxl) 0;
}

.list_2e94 {
  background: var(--color-bg-section);
}

.frame_8693 {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-xl);
}

.stone_0c99 {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-primary-light);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 20px;
  margin-bottom: var(--space-md);
}

.middle-d9ee {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.shade-332d {
  font-size: 1.125rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

.summary_6ec2 {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: var(--space-xl);
  width: 100%;
}

@media (max-width: 1200px) {
  .summary_6ec2 {
    grid-template-columns: 1fr 300px;
  }
}

.action_8f69 {
  max-width: 750px;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.action_8f69 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.action_8f69 pre,
.action_8f69 code {
  overflow-x: auto;
  max-width: 100%;
}

.action_8f69 h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--color-text);
}

.action_8f69 h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-sm);
  color: var(--color-text);
}

.action_8f69 h5 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--color-text);
}

.action_8f69 p {
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.action_8f69 ul,
.action_8f69 ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.action_8f69 li {
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.action_8f69 strong {
  font-weight: 600;
  color: var(--color-text);
}

.action_8f69 a {
  color: var(--color-primary);
  text-decoration: underline;
}

.action_8f69 a:hover {
  color: var(--color-primary-dark);
}

.narrow-58f4 {
  counter-reset: list-counter;
  list-style: none;
  padding-left: 0;
}

.narrow-58f4 li {
  counter-increment: list-counter;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--space-md);
}

.narrow-58f4 li:before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

@media (max-width: 968px) {
  .summary_6ec2 {
    grid-template-columns: 1fr;
  }
  
  .middle-d9ee {
    font-size: 1.75rem;
  }
  
  .action_8f69 {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .middle-d9ee {
    font-size: 1.5rem;
  }
  
  .action_8f69 h3 {
    font-size: 1.375rem;
  }
  
  .action_8f69 h4 {
    font-size: 1.125rem;
  }
}

/* ============================================
   11. INFO BOXES
   ============================================ */
.gradient_383f {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
  border-left: 4px solid;
}

.purple-233d {
  background: #fff3e0;
  border-color: var(--color-warning);
}

.info-first-73bd {
  background: #E5F3F0;
  border-color: var(--color-primary);
}

.accordion-2a58 {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.in-1ca2 strong {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

/* ============================================
   12. AUTHOR NOTE
   ============================================ */
.widget_hard_ffac {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: #f1f8ff;
  border: 2px solid #0366d6;
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
}

.glass-cd4a {
  flex-shrink: 0;
}

.hovered_b003 strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

/* ============================================
   13. TABLES
   ============================================ */
.sort-selected-3bdb {
  overflow-x: auto;
  margin: var(--space-lg) 0;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .sort-selected-3bdb {
    margin-left: calc(-1 * var(--space-sm));
    margin-right: calc(-1 * var(--space-sm));
    width: calc(100% + 2 * var(--space-sm));
    border-radius: 0;
  }
}

.box-ecf8,
.component_simple_d422,
.icon-fd92 {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.box-ecf8 thead,
.component_simple_d422 thead {
  background: var(--color-primary);
  color: white;
}

.box-ecf8 th,
.box-ecf8 td,
.component_simple_d422 th,
.component_simple_d422 td,
.icon-fd92 th,
.icon-fd92 td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .box-ecf8 th,
  .box-ecf8 td,
  .component_simple_d422 th,
  .component_simple_d422 td,
  .icon-fd92 th,
  .icon-fd92 td {
    padding: var(--space-sm);
    font-size: 0.875rem;
  }
  
  .box-ecf8,
  .component_simple_d422,
  .icon-fd92 {
    min-width: 600px;
  }
}

.box-ecf8 th,
.component_simple_d422 th,
.icon-fd92 th {
  font-weight: 600;
}

.box-ecf8 tbody tr:hover,
.component_simple_d422 tbody tr:hover,
.icon-fd92 tbody tr:hover {
  background: var(--color-bg-alt);
}

.carousel_eadd {
  font-size: 0.875rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: var(--space-sm);
}

/* ============================================
   14. SIDEBAR
   ============================================ */
.gas-fc97 {
  position: sticky;
  top: 80px;
  align-self: start;
}

.frame-up-bdd4 {
  background: white;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
}

.frame-up-bdd4 h4 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.preview_67ef {
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  color: white;
}

.preview_67ef h4 {
  color: white;
}

.media_last_5fbe {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pressed-eaa1 {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
}

.pressed-eaa1:last-child {
  border-bottom: none;
}

.pressed-eaa1 dt {
  font-weight: 600;
  color: var(--color-text-light);
}

.pressed-eaa1 dd {
  font-weight: 500;
  color: var(--color-text);
  text-align: right;
}

.white-7afa {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  word-break: break-all;
}

.silver-8edb {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-md);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.silver-8edb:hover {
  text-decoration: underline;
}

.status_motion_9c26 {
  text-align: center;
  margin-bottom: var(--space-md);
}

.container_d245 {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.container_d245 span {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.card_4836 {
  font-weight: 600;
  color: white;
}

.popup_50ee {
  list-style: none;
  padding: 0;
}

.popup_50ee li {
  padding: var(--space-xs) 0;
}

.plasma_5731 {
  color: #4caf50;
}

.wrapper_pressed_ae8f {
  color: #ff9800;
}

.old_865d {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.grid_hard_547e {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  gap: var(--space-sm);
}

.first_b0b5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.south-4c61 {
  height: 8px;
  background: var(--color-border-light);
  border-radius: 4px;
  overflow: hidden;
}

.background_slow_9c1f {
  height: 100%;
  background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
  transition: width var(--transition-slow);
}

.breadcrumb-708a {
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
}

/* ============================================
   15. FEATURE GRID
   ============================================ */
.narrow-d199 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

@media (max-width: 768px) {
  .narrow-d199 {
    grid-template-columns: 1fr;
  }
}

.block_5fff {
  padding: var(--space-xl);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  position: relative;
}

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

.media_dc68 {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 48px;
  height: 48px;
  background: var(--color-primary-light);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  opacity: 0.3;
}

.block_5fff h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.block_5fff p {
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.background_30d7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.card_4836 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.module_7103 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-primary);
}

.module-94af {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: #f1f8ff;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.module-94af h4 {
  margin-bottom: var(--space-sm);
  font-size: 1.125rem;
}

/* ============================================
   16. COMPARISON & DECISION HELPER
   ============================================ */
.lite-8cde {
  max-width: 900px;
  margin: 0 auto;
}

.container_6ef7 {
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: 1.125rem;
  color: var(--color-text-light);
}

.box-clean-389c {
  margin: var(--space-xl) 0;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .box-clean-389c {
    margin-left: calc(-1 * var(--space-sm));
    margin-right: calc(-1 * var(--space-sm));
    width: calc(100% + 2 * var(--space-sm));
  }
}

.detail_fast_cd25 {
  margin-top: var(--space-xxl);
}

.detail_fast_cd25 h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: var(--space-xl);
}

.slow-c870 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 768px) {
  .slow-c870 {
    grid-template-columns: 1fr;
  }
}

.sort_motion_4dda {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.outline_right_cee6 {
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  color: white;
}

.green-da76 {
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  color: white;
}

.sort_motion_4dda h4 {
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
  color: white;
}

.sort_motion_4dda ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-lg);
}

.sort_motion_4dda li {
  padding: var(--space-xs) 0;
  color: white;
}

.sort_motion_4dda .cool-9abd {
  width: 100%;
  background: white;
}

.outline_right_cee6 .cool-9abd {
  color: #0E7C66;
}

.green-da76 .cool-9abd {
  color: #f5576c;
}

/* ============================================
   17. TUTORIAL / STEPS
   ============================================ */
.badge-top-5743 {
  max-width: 900px;
  margin: 0 auto;
}

.banner_b0d4 {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
  overflow: hidden;
}

.aside_774e {
  padding: var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
}

.backdrop-cbbe {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.aside_774e h3 {
  margin: 0;
  font-size: 1.5rem;
  color: white;
}

.center-8b08 {
  padding: var(--space-xl);
}

@media (max-width: 768px) {
  .aside_774e {
    padding: var(--space-md);
  }
  
  .center-8b08 {
    padding: var(--space-md);
  }
  
  .outline_full_5c68 {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
  }
}

.description-small-b54c ol,
.description-small-b54c ul {
  margin: var(--space-md) 0;
  padding-left: var(--space-lg);
}

.description-small-b54c li {
  margin-bottom: var(--space-sm);
}

.description-small-b54c code {
  background: var(--color-bg-alt);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

.container_145d {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: #fff3e0;
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
}

.pattern_d8d9 {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: #ffebee;
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md);
}

.outline_full_5c68 {
  margin-top: var(--space-lg);
  text-align: center;
}

.outline_full_5c68 img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.list_2027,
.component_5c8f,
.feature_c958,
.tertiary_easy_d1ae {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-section);
  border-radius: var(--radius-md);
}

.video-ab20 {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--color-bg-section);
  border-radius: var(--radius-md);
}

.secondary_fe4a {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.notice_37cc {
  display: block;
  padding: var(--space-sm);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  word-break: break-all;
  overflow-wrap: break-word;
  margin: var(--space-sm) 0;
}

@media (max-width: 480px) {
  .notice_37cc {
    font-size: 0.625rem;
  }
}

.photo-3575 {
  padding: 8px 16px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
}

.photo-3575:hover {
  background: var(--color-primary-dark);
}

.item_warm_e450 {
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-bg-section);
  border-radius: var(--radius-lg);
  text-align: center;
}

.item_warm_e450 h4 {
  margin-bottom: var(--space-md);
}

.tag-821b {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ============================================
   18. SECURITY SECTION
   ============================================ */
.pink-abf7 {
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  font-size: 1.125rem;
  text-align: center;
  color: var(--color-text-light);
}

.header_orange_2d50 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

@media (max-width: 768px) {
  .header_orange_2d50 {
    grid-template-columns: 1fr;
  }
}

.icon-57ae {
  padding: var(--space-lg);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid;
}

.label-eb87 {
  border-color: var(--color-success);
}

.hard_8d8c {
  border-color: var(--color-warning);
}

.static-03a1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.label-eb87 .static-03a1 {
  background: #e8f5e9;
  color: var(--color-success);
}

.hard_8d8c .static-03a1 {
  background: #fff3e0;
  color: var(--color-warning);
}

.icon-57ae h4 {
  margin-bottom: var(--space-sm);
  font-size: 1.125rem;
}

.icon-57ae p {
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.bright_8d71 {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

.huge_1075 {
  margin: var(--space-xxl) 0;
}

.huge_1075 h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: var(--space-md);
}

.huge_1075 > p {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

.over_d46b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .over_d46b {
    grid-template-columns: 1fr;
  }
}

.title_west_ba45 {
  padding: var(--space-lg);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.title_west_ba45 h4 {
  margin-bottom: var(--space-md);
  font-size: 1.125rem;
  color: var(--color-primary);
}

.sort_f55b {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  cursor: pointer;
}

.sort_f55b input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 4px;
  cursor: pointer;
}

.hover_warm_7344 {
  margin-top: var(--space-xxl);
}

.frame-blue-9590 {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.highlight-b585 {
  text-align: center;
}

.photo-red-c7ca {
  width: 180px;
  height: 180px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.card-mini-6a87 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  color: white;
}

.photo-red-c7ca .card_4836 {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

.hero-ecc2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.border-a405 p {
  margin-bottom: var(--space-md);
}

.medium_05a2 {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

@media (max-width: 768px) {
  .frame-blue-9590 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   19. REVIEW SECTION
   ============================================ */
.east_167a {
  max-width: 600px;
  margin: 0 auto var(--space-xxl);
}

.motion_d992 {
  padding: var(--space-xl);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.east-7630 {
  margin-bottom: var(--space-xl);
}

.caption-721b {
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.message-1374 {
  font-size: 2rem;
  color: #ffa000;
  letter-spacing: 4px;
  margin: var(--space-sm) 0;
}

.dim_97ce {
  color: var(--color-text-light);
}

.slider_current_7606 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.notice-8aec {
  display: grid;
  grid-template-columns: 40px 1fr 50px;
  align-items: center;
  gap: var(--space-sm);
}

.breadcrumb_9c9e {
  font-weight: 600;
  color: var(--color-text);
}

.tooltip-5237 {
  height: 12px;
  background: var(--color-border-light);
  border-radius: 6px;
  overflow: hidden;
}

.disabled_3d3c {
  height: 100%;
  background: linear-gradient(90deg, #ffa000 0%, #ff6f00 100%);
  transition: width var(--transition-slow);
}

.south_58e2 {
  text-align: right;
  font-weight: 600;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.active-ad06 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.focus-c8c5 {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
}

.bright-e9bd {
  border: 2px solid #4caf50;
}

.pattern_wood_7e51 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}

.popup-orange-819e {
  display: flex;
  gap: var(--space-md);
  flex: 1;
}

.badge-upper-1277 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.tooltip-825d {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.highlight-acff {
  display: inline-block;
  padding: 2px 8px;
  background: #4caf50;
  color: white;
  font-size: 0.75rem;
  border-radius: 10px;
  margin-left: 8px;
}

.description-under-7897 {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.west-1d7b {
  text-align: right;
}

.west-1d7b .tiny_4feb {
  color: #ffa000;
  font-size: 1.125rem;
  margin-bottom: 4px;
}

.overlay_7a22 {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.text_aa75 h4 {
  margin-bottom: var(--space-sm);
  font-size: 1.125rem;
  color: var(--color-text);
}

.text_aa75 p {
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.sidebar-2c76 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0;
}

.clean_e725 {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
}

.widget-warm-32ed {
  background: #e8f5e9;
  color: #2e7d32;
}

.solid_1e24 {
  background: #E5F3F0;
  color: #0A5C4C;
}

.caption_clean_79b1 {
  background: #fff3e0;
  color: #e65100;
}

.mask_c016 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.mask_c016 span {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.dropdown-237f {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.dropdown-237f:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-text-light);
}

.gas_c4db {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: #f1f8ff;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.popup_24cf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.popup_24cf strong {
  color: var(--color-primary);
}

.breadcrumb-green-6262 {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.badge-8ad1 {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ============================================
   20. FAQ SECTION
   ============================================ */
.main-ee50 {
  max-width: 900px;
  margin: 0 auto;
}

.feature-8c49 {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.header-wide-e36a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: transparent;
  border: none;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-fast);
}

.header-wide-e36a:hover {
  background: var(--color-bg-alt);
}

.clean_e8da {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.header-wide-e36a[aria-expanded="true"] .clean_e8da {
  transform: rotate(180deg);
}

.article-50ac {
  display: none;
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-text-light);
  line-height: 1.7;
}

.article-50ac h5 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--color-text);
}

.article-50ac ul,
.article-50ac ol {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
}

.article-50ac li {
  margin-bottom: var(--space-xs);
}

.section_a866 {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.banner-1996 {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: #9cdcfe;
}

.section_a866 code {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================
   21. CONCLUSION SECTION
   ============================================ */
.mask-medium-a759 {
  max-width: 800px;
  margin: 0 auto var(--space-xxl);
  text-align: center;
}

.list-east-8dce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.chip_f6a7 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.section-d487 {
  padding: 12px 24px;
  background: #4caf50;
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 30px;
  box-shadow: var(--shadow-md);
}

.logo-2c55 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-xxl) 0;
}

@media (max-width: 768px) {
  .logo-2c55 {
    grid-template-columns: 1fr;
  }
}

.shadow_copper_1802,
.link_d8d5 {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.shadow_copper_1802 {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.link_d8d5 {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.shadow_copper_1802 h4,
.link_d8d5 h4 {
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
}

.shadow_copper_1802 ul,
.link_d8d5 ul {
  list-style: none;
  padding: 0;
}

.shadow_copper_1802 li,
.link_d8d5 li {
  padding: var(--space-sm) 0;
  line-height: 1.6;
}

.shade_46d7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-xxl) 0;
}

@media (max-width: 768px) {
  .shade_46d7 {
    grid-template-columns: 1fr;
  }
}

.footer-9cba {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.item_148f {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
}

.shade-liquid-4b44 {
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  color: white;
}

.footer-9cba h4 {
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
  color: white;
}

.footer-9cba ul {
  list-style: none;
  padding: 0;
}

.footer-9cba li {
  padding: var(--space-xs) 0;
  color: white;
}

.frame_gold_3b52 {
  max-width: 800px;
  margin: var(--space-xxl) auto;
}

.frame_gold_3b52 h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.frame_gold_3b52 p {
  margin-bottom: var(--space-md);
  color: var(--color-text-light);
  line-height: 1.8;
}

.north-6d16 {
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-bg-section);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.thumbnail_fluid_7a26 {
  font-style: italic;
}

.filter_2fdd {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.light_a592 {
  margin-top: var(--space-xxl);
  padding: var(--space-xxl);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-xl);
  text-align: center;
  color: white;
}

.light_a592 h3 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: var(--space-md);
  color: white;
}

.light_a592 p {
  font-size: 1.125rem;
  margin-bottom: var(--space-xl);
  color: rgba(255,255,255,0.9);
}

.south_4364 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* ============================================
   22. RELATED CONTENT
   ============================================ */
.stone-c196 {
  padding: var(--space-xxl) 0;
  background: var(--color-bg-section);
}

.focus-bf3b {
  font-family: var(--font-heading);
  font-size: 2rem;
  text-align: center;
  margin-bottom: var(--space-xl);
}

.dark_ad32 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .dark_ad32 {
    grid-template-columns: 1fr;
  }
}

.surface-908c {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: var(--transition-base);
}

.surface-908c:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.soft_f3bc {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.surface-908c h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.surface-908c p {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

/* ============================================
   23. FOOTER
   ============================================ */
.background_hot_61fb {
  background: #212121;
  color: #e0e0e0;
  padding: var(--space-xxl) 0 var(--space-lg);
}

.background_791d {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Footer variant: footer-content (subpages) */
.preview-in-bb44 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.focus_brown_ee67 h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-md);
}

.focus_brown_ee67 p {
  color: #b0b0b0;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.pagination-51a6 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination-51a6 li {
  margin-bottom: var(--space-xs);
}

.pagination-51a6 a {
  color: #b0b0b0;
  text-decoration: none;
  transition: var(--transition-fast);
}

.pagination-51a6 a:hover {
  color: white;
}

.overlay_7c26 {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.overlay_7c26 a {
  color: #b0b0b0;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid #424242;
  border-radius: 4px;
  transition: var(--transition-fast);
}

.overlay_7c26 a:hover {
  color: white;
  border-color: #666;
  background: #333;
}

.video_small_09bc {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.video_small_09bc a {
  color: #808080;
  text-decoration: none;
  font-size: 0.875rem;
  transition: var(--transition-fast);
}

.video_small_09bc a:hover {
  color: white;
}

.last-9fc9 > p {
  font-size: 0.875rem;
  color: #808080;
  margin: 0;
}

@media (max-width: 768px) {
  .background_791d,
  .preview-in-bb44 {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.red-b165 h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-md);
}

.component_6421 p {
  color: #b0b0b0;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.background_0f07 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.background_0f07 .gradient-wide-1197 {
  color: #4caf50;
  font-size: 0.875rem;
}

.video_31b4 {
  list-style: none;
  padding: 0;
}

.video_31b4 li {
  margin-bottom: var(--space-xs);
}

.video_31b4 a {
  color: #b0b0b0;
  text-decoration: none;
  transition: var(--transition-fast);
}

.video_31b4 a:hover {
  color: white;
}

.glass_c9ac {
  list-style: none;
  padding: 0;
}

.glass_c9ac li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  color: #b0b0b0;
}

.glass_c9ac a {
  color: #b0b0b0;
  text-decoration: none;
}

.glass_c9ac a:hover {
  color: white;
}

.last-9fc9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid #424242;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.main_d0f9 p {
  font-size: 0.875rem;
  color: #808080;
  margin-bottom: var(--space-xs);
}

.main_d0f9 a {
  color: #4caf50;
  text-decoration: none;
}

.module_56a3 {
  font-size: 0.75rem;
  color: #666666;
}

.surface-46e3 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.875rem;
  color: #808080;
}

.surface-46e3 a {
  color: #808080;
  text-decoration: none;
  transition: var(--transition-fast);
}

.surface-46e3 a:hover {
  color: white;
}

/* Element selectors: survive CMS class obfuscation on deploy */
footer > div > div:last-child > div:last-child a {
  color: #808080;
  text-decoration: none;
  transition: var(--transition-fast);
}

footer > div > div:last-child > div:last-child a:hover {
  color: white;
}

.section_dynamic_3911 {
  color: var(--color-primary-light);
  text-decoration: none;
  font-weight: 600;
}

.section_dynamic_3911:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .last-9fc9 {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   24. RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 1200px) {
  :root {
    font-size: 15px;
  }
}

@media (max-width: 968px) {
  :root {
    --space-xxl: 3rem;
  }
  
  .column-35d9 {
    font-size: 2rem;
  }
  
  .middle-d9ee {
    font-size: 1.75rem;
  }
  
  /* Ensure all grids are single column */
  .right_f8ba,
  .summary_6ec2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    font-size: 14px;
    --space-xl: 2rem;
    --space-xxl: 2.5rem;
  }
  
  .narrow-d199,
  .header_orange_2d50,
  .slow-c870,
  .over_d46b,
  .logo-2c55,
  .shade_46d7,
  .dark_ad32,
  .background_791d,
  .preview-in-bb44 {
    grid-template-columns: 1fr;
  }
  
  .accordion_7439 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Mobile-specific adjustments */
  .logo-inner-35cf {
    padding: var(--space-lg) 0;
  }
  
  .overlay_bright_aade li a {
    font-size: 0.875rem;
    padding: var(--space-xs);
  }
  
  .overlay_bright_aade li a:before {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
  }
  
  /* Improve mobile readability */
  p, li {
    font-size: 0.9375rem;
  }
  
  /* Better touch targets */
  .cool-9abd {
    min-height: 44px;
  }
  
  /* Optimize images for mobile */
  img {
    height: auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  :root {
    --space-lg: 1.5rem;
    --space-xl: 1.75rem;
    --space-xxl: 2rem;
  }
  
  .accordion_7439 {
    grid-template-columns: 1fr;
  }
  
  .wrapper_f8c8,
  .south_4364,
  .tag-821b {
    flex-direction: column;
    width: 100%;
  }
  
  .slider_1d11,
  .slider_69b3,
  .wrapper_f8c8 .cool-9abd,
  .south_4364 .cool-9abd {
    width: 100%;
  }
  
  /* Smaller font sizes for very small screens */
  .column-35d9 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  
  .middle-d9ee {
    font-size: 1.375rem;
  }
  
  .easy_c838 {
    font-size: 2rem;
  }
  
  /* Reduce padding on small screens */
  .hover-blue-ae2b,
  .block_5fff,
  .frame-up-bdd4,
  .focus-c8c5,
  .banner_b0d4 {
    padding: var(--space-md);
  }
  
  /* Improve code readability on mobile */
  code,
  .notice_37cc {
    font-size: 0.625rem;
    word-break: break-all;
  }
  
  /* Better meta display */
  .slow-a8bd {
    gap: var(--space-xs);
  }
  
  .status_e3ec {
    font-size: 0.75rem;
  }
  
  /* Optimize score circles */
  .container_d245 {
    width: 100px;
    height: 100px;
    font-size: 2.5rem;
  }
  
  .photo-red-c7ca {
    width: 150px;
    height: 150px;
  }
  
  .card-mini-6a87 {
    font-size: 3rem;
  }
}

/* ============================================
   25. PRINT STYLES
   ============================================ */
@media print {
  .breadcrumb_wood_1ffe,
  .green-ad68,
  .wrapper_f8c8,
  .light_a592,
  .stone-c196,
  .background_hot_61fb,
  .background_prev_d634 {
    display: none;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  .logo-inner-35cf {
    page-break-inside: avoid;
  }
}

/* css-noise: 94a5 */
.sort_03d6 {
  padding: 0.5rem;
  font-size: 11px;
  line-height: 1.0;
}

/* css-noise: 836c */
.promo-block-c6 {
  padding: 0.4rem;
  font-size: 14px;
  line-height: 1.0;
}

/* ============================================
   Indonesia-Specific Styles & Enhancements
   ============================================ */

/* Indonesia-specific typography adjustments */
body {
  text-rendering: optimizeLegibility;
  /* Critical: prevent horizontal overflow on all devices */
  overflow-x: hidden;
  width: 100%;
  /* DO NOT add position:relative to body - it breaks sticky header! */
}

/* Enhanced sticky header for better visibility */
.breadcrumb_wood_1ffe {
  will-change: transform, box-shadow;
}

/* Improve header button visibility on scroll */
.breadcrumb_wood_1ffe.aside_pressed_29f5 .lite_4f64 {
  box-shadow: 0 4px 16px rgba(14, 124, 102, 0.5);
}

/* Add subtle pulse effect to download button */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(14, 124, 102, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(14, 124, 102, 0.5);
  }
}

.lite_4f64 {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Ensure no element can cause horizontal scroll */
* {
  max-width: 100%;
}

/* Allow full-width sections */
section,
.solid_4900,
.wrapper-new-1b42,
.dim-22c0,
.logo-inner-35cf,
.stone-c196,
.background_hot_61fb {
  max-width: none;
  width: 100%;
}

/* Header MUST be separate to maintain sticky */
.breadcrumb_wood_1ffe {
  max-width: none !important;
  width: 100% !important;
}

/* Better readability for Indonesian text */
p, li, td {
  hyphens: auto;
  word-wrap: break-word;
}

/* Indonesia-specific color overrides for better cultural fit */
:root {
  --color-indonesian-red: #ce1126;
  --color-indonesian-white: #ffffff;
}

/* Additional animations for better UX */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.column_7503 {
  animation: fadeInUp 0.6s ease-out;
}

/* Mobile optimizations for Indonesia (often slower connections) */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  * {
    animation-duration: 0.3s !important;
  }
  
  /* Optimize images */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Ensure all containers fit */
  .content_down_60c9,
  .right_f8ba,
  .accordion_7439,
  .narrow-d199,
  .summary_6ec2 {
    width: 100%;
    max-width: 100%;
  }
  
  /* Better text wrapping */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Prevent code overflow */
  pre, code {
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

/* Extra small mobile (≤480px) */
@media (max-width: 480px) {
  /* More aggressive space reduction */
  .solid_4900,
  .wrapper-new-1b42,
  .logo-inner-35cf,
  .stone-c196 {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Full-width buttons */
  .cool-9abd,
  .slider_1d11,
  .slider_69b3 {
    width: 100%;
    justify-content: center;
  }
  
  /* Stack flex items */
  .progress-red-bf47,
  .wrapper_f8c8,
  .pagination-lite-a221,
  .slow-a8bd {
    flex-direction: column;
    width: 100%;
  }
  
  /* Smaller stat cards */
  .hover-blue-ae2b {
    padding: 1rem;
  }
  
  .easy_c838 {
    font-size: 1.75rem;
  }
}

/* Improve tap targets for mobile (common in Indonesia) */
@media (hover: none) and (pointer: coarse) {
  .cool-9abd,
  .thumbnail-8bdf,
  .header-wide-e36a {
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* Better contrast for outdoor viewing (common in tropical climate) */
@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-border: #999999;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-bg-alt: #2d2d2d;
    --color-bg-section: #242424;
    --color-text: #e0e0e0;
    --color-text-light: #b0b0b0;
    --color-border: #404040;
  }
  
  .breadcrumb_wood_1ffe {
    background: #2d2d2d;
  }
  
  .frame-up-bdd4,
  .block_5fff,
  .hover-blue-ae2b,
  .focus-c8c5,
  .feature-8c49 {
    background: #2d2d2d;
  }
}

/* Loading states for slow connections */
.caption_deef {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.caption_deef::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Optimize for Indonesian payment methods */
.component-0e29 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}

.box-dfac {
  width: 60px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.box-dfac:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Whatsapp link styling (popular in Indonesia) */
a[href*="whatsapp.wrapper-fast-663e"] {
  background: #25d366;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

a[href*="whatsapp.wrapper-fast-663e"]:hover {
  background: #1da851;
}

/* Indonesia-specific accessibility */
[lang="id"] {
  quotes: '"' '"' "'" "'";
}

/* Better number formatting for Indonesian locale */
.shadow-8d1f {
  font-variant-numeric: tabular-nums;
}

/* Rupiah currency formatting */
.preview-down-5735::before {
  content: "Rp ";
}

/* Performance optimizations */
.modal-bbdc {
  opacity: 0;
  transition: opacity 0.3s;
}

.modal-bbdc.short-4853 {
  opacity: 1;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* css-noise: 94a5 */
.gas-a8a2 {
  padding: 0.2rem;
  font-size: 14px;
  line-height: 1.2;
}

/* css-noise: 836c */
.promo-block-r2 {
  padding: 0.4rem;
  font-size: 13px;
  line-height: 1.3;
}

/* ============================================
   CRITICAL MOBILE FIXES
   Additional layer to ensure perfect mobile display
   ============================================ */

/* Prevent horizontal scroll at all costs */
html {
  width: 100%;
  scroll-behavior: smooth;
  /* NO position:relative - it breaks sticky! */
  /* NO overflow-x here either - mixed with body's overflow-x: hidden
     it makes <html> its own scroll container and breaks sticky too! */
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  /* NO position:relative - it breaks sticky! */
}

/* Ensure all major containers respect viewport */
/* NOTE: "nav" is intentionally excluded here. Giving a <nav> element
   overflow-x: hidden makes its overflow-y auto-compute to "auto" (per the
   CSS overflow spec), turning it into a clipping/scroll container. Since
   the header's dropdown submenu (.fresh-6419) is a descendant of
   .disabled_7d33 (a <nav>), it was getting clipped and forced into a tiny
   internal scrollbar instead of opening naturally below the nav link. */
main,
section,
article,
footer {
  max-width: 100%;
  overflow-x: hidden;
}

/* Header must NOT have max-width restriction for sticky to work.
   Two site templates coexist: legacy obfuscated-class (header.breadcrumb_wood_1ffe)
   and the redesigned template (header.solid_3841). Keep both selectors. */
header.breadcrumb_wood_1ffe,
header.solid_3841 {
  max-width: none !important;
}

/* Fix for any potential overflow elements */
/* NOTE: ".content_down_60c9" is intentionally excluded here for the same reason as
   "nav" above — the header's <div class="container"> wraps the nav and
   must not clip the dropdown submenu with an auto-computed overflow-y.
   It's already width-capped via max-width in style.hard-36ef so it can't cause
   horizontal overflow anyway. */
.pattern-34e1,
.summary_6ec2,
.right_f8ba,
.accordion_7439,
.narrow-d199,
.lite-8cde,
.badge-top-5743,
.shadow_4078,
.purple_14b4,
.medium-56f2,
.table-843c {
  max-width: 100%;
  overflow-x: hidden;
}

/* Header mobile optimizations */
@media (max-width: 768px) {
  .item-last-3aa1 {
    padding: 8px 0;
  }
  
  .accordion_61a7 img {
    height: 28px;
    width: auto;
  }
  
  .element_f767 {
    display: none !important;
  }
  
  .lite_4f64 {
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
    white-space: nowrap;
  }
  
  .lite_4f64 svg {
    width: 14px;
    height: 14px;
  }
  
  .background_prev_d634 {
    padding: 6px;
  }
  
  .badge-6c3c {
    width: 20px;
  }
}

/* Mobile-specific fixes (phones) */
@media (max-width: 768px) {
  /* Force single column layout */
  .right_f8ba,
  .summary_6ec2,
  .accordion_7439,
  .narrow-d199,
  .header_orange_2d50,
  .over_d46b,
  .slow-c870,
  .logo-2c55,
  .shade_46d7,
  .dark_ad32,
  .background_791d,
  .preview-in-bb44 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  
  /* Ensure tables are scrollable */
  .sort-selected-3bdb,
  .box-clean-389c {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix any fixed-width elements */
  .frame-up-bdd4,
  .block_5fff,
  .hover-blue-ae2b,
  .focus-c8c5,
  .icon-57ae,
  .banner_b0d4,
  .popup_east_1696 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  /* Ensure images are responsive */
  img,
  svg,
  picture {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Better padding for mobile */
  .solid_4900,
  .wrapper-new-1b42,
  .dim-22c0,
  .logo-inner-35cf,
  .stone-c196 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix text overflow */
  h1, h2, h3, h4, h5, h6,
  p, span, a, li, td, th,
  .column-35d9,
  .middle-d9ee,
  .easy_c838,
  .overlay_d343 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Fix code blocks */
  pre,
  code,
  .notice_37cc,
  .section_a866 {
    overflow-x: auto !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
  }
  
  /* Fix buttons */
  .cool-9abd,
  .filter-dirty-f4dc,
  .highlight-next-db11,
  .fresh-076c {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix flex containers */
  .wrapper_f8c8,
  .south_4364,
  .pagination-lite-a221,
  .slow-a8bd,
  .progress-red-bf47,
  .tag-821b {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
}

/* Extra small screens (≤480px) */
@media (max-width: 480px) {
  /* Even more aggressive fixes */
  * {
    max-width: 100vw !important;
  }
  
  section,
  .solid_4900,
  .wrapper-new-1b42,
  .logo-inner-35cf {
    max-width: none !important;
  }
  
  .content_down_60c9 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Reduce font sizes if needed */
  .column-35d9 {
    font-size: 1.5rem !important;
  }
  
  .middle-d9ee {
    font-size: 1.375rem !important;
  }
  
  /* Stack everything */
  .pattern_wood_7e51,
  .frame-blue-9590 {
    flex-direction: column !important;
  }
  
  /* Smaller stat values */
  .easy_c838 {
    font-size: 2rem !important;
  }
  
  /* Ensure score circles fit */
  .container_d245 {
    width: 100px !important;
    height: 100px !important;
    font-size: 2.5rem !important;
  }
  
  .photo-red-c7ca {
    width: 140px !important;
    height: 140px !important;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .solid_4900,
  .logo-inner-35cf {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* iPhone X and notch devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* css-noise: 94a5 */
.feature-motion-1e7f {
  padding: 0.1rem;
  font-size: 10px;
  line-height: 1.2;
}

/* css-noise: 836c */
.promo-block-w5 {
  padding: 0.5rem;
  font-size: 13px;
  line-height: 1.3;
}

/* ============================================
   FORCE STICKY HEADER - FINAL FIX
   This overrides any conflicting CSS
   ============================================ */

/* Critical: Remove position from html/body that breaks sticky */
/* Only body gets overflow-x: hidden. If <html> also gets it (or gets an
   explicit overflow-y), <html> becomes its own scroll container and
   position: sticky on the header stops working entirely. */
html {
  position: static !important;
}
body {
  position: static !important;
  overflow-x: hidden !important;
}

/* Force sticky on header with high specificity.
   Two site templates coexist: the legacy obfuscated-class template
   (header.breadcrumb_wood_1ffe, e.paper-7f40. apk.thumbnail_fffc, aplikasi.thumbnail_fffc, etc.) and the
   redesigned template (header.solid_3841, e.paper-7f40. index.thumbnail_fffc, apk-download.thumbnail_fffc).
   Both selectors must stay here or one template's sticky header breaks. */
header.breadcrumb_wood_1ffe,
header.solid_3841 {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  transform: translateZ(0) !important;
}

/* Ensure main wrapper allows sticky */
main {
  overflow: visible !important;
}

/* css-noise: 94a5 */
.heading-fluid-dbce {
  padding: 0.4rem;
  font-size: 14px;
  line-height: 1.1;
}

/* css-noise: 836c */
.widget-item-e0 {
  padding: 0.3rem;
  font-size: 14px;
  line-height: 1.2;
}

/* ===== index.html ===== */
/* MODERN CSS RESET & BASE */
html.page-index *, html.page-index *::before, html.page-index *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html.page-index {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  
  /* Typography Scale */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* Shadows - Elevated Design */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Container Width */
  --container-max: 1280px;
  --container-reading: 720px;
}
html.page-index {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
html.page-index body {
  font-family: var(--font-primary);
  color: var(--text-primary);
  background: var(--neutral-50);
  line-height: 1.6;
  overflow-x: hidden;
}
/* SKIP LINK - Accessibility */
html.page-index .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  z-index: 10000;
}
html.page-index .grid-94b1:focus {
  top: 0;
}
/* MODERN HEADER - Glass Morphism Effect */
html.page-index .solid_3841 {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--neutral-200);
  transition: all var(--transition-base);
}
html.page-index .solid_3841.card-medium-2236 {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
}
html.page-index .medium-63c7 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
html.page-index .feature-e465 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
}
html.page-index .shade-stale-75d4 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}
html.page-index .rough-782b {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--secondary);
  color: white;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
}
html.page-index .purple-92db {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
html.page-index .tag-5e1d {
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-index .tag-5e1d:hover {
  color: var(--primary);
  background: var(--neutral-100);
}
html.page-index .tag-5e1d.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
}
/* Dropdown Navigation */
html.page-index .column-9418 {
  position: relative;
}
html.page-index .badge_6ff5 {
  position: relative;
}
html.page-index .filter_cb4c {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
html.page-index .filter_cb4c:hover {
  color: var(--primary);
  background: var(--neutral-100);
}
html.page-index .module_steel_5d9b {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
html.page-index .badge_6ff5.fn-active-815d .module_steel_5d9b {
  transform: rotate(180deg);
}
html.page-index .bright_2644 {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--neutral-200);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: 1000;
}
html.page-index .badge_6ff5:hover .bright_2644, html.page-index .badge_6ff5.fn-active-815d .bright_2644 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.page-index .footer_10e5 {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-index .footer_10e5:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
html.page-index .form_bc76 {
  display: none;
  background: none;
  border: none;
  padding: 12px;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
html.page-index .form_bc76:hover {
  background: var(--neutral-100);
}
html.page-index .backdrop_soft_30f3 {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  display: block;
  position: relative;
  transition: all var(--transition-base);
  border-radius: 2px;
}
html.page-index .backdrop_soft_30f3::before, html.page-index .backdrop_soft_30f3::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  left: 0;
  transition: all var(--transition-base);
  border-radius: 2px;
}
html.page-index .backdrop_soft_30f3::before {
  top: -7px;
}
html.page-index .backdrop_soft_30f3::after {
  top: 7px;
}
html.page-index .form_bc76.fn-active-815d {
  background: var(--neutral-100);
}
html.page-index .form_bc76.fn-active-815d .backdrop_soft_30f3 {
  background: transparent;
}
html.page-index .form_bc76.fn-active-815d .backdrop_soft_30f3::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--primary);
}
html.page-index .form_bc76.fn-active-815d .backdrop_soft_30f3::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--primary);
}
html.page-index .modal-35b9 {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-left: auto;
}
html.page-index .selected_69d7 {
  padding: 8px 16px;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(14, 124, 102, 0.2);
  transition: all var(--transition-base);
}
html.page-index .selected_69d7:hover {
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.3);
  transform: translateY(-1px);
}
html.page-index .selected_69d7 svg {
  flex-shrink: 0;
}
html.page-index .outer-9b31 {
  display: none;
}
html.page-index .paragraph_ab28 {
  display: inline;
}
html.page-index .tertiary-671d {
  display: flex;
  gap: var(--space-sm);
}
html.page-index .texture-fff2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-base);
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
html.page-index .hard_40d0 {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-sm);
}
html.page-index .hard_40d0:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
html.page-index .aside_fluid_606d {
  background: white;
  color: var(--primary);
  border: 2px solid var(--primary);
}
html.page-index .aside_fluid_606d:hover {
  background: var(--primary);
  color: white;
}
/* HERO SECTION - Modern Grid Layout */
html.page-index .inner-e1e3 {
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  color: white;
  padding: var(--space-3xl) var(--space-lg);
  position: relative;
  overflow: hidden;
}
html.page-index .inner-e1e3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.video_21b3.alert-motion-12b3/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></svg>');
  opacity: 0.5;
}
html.page-index .breadcrumb_action_d9d8 {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  position: relative;
  z-index: 1;
}
html.page-index .form_6b52 {
  animation: fadeInUp-page-index 0.8s ease-out;
}
html.page-index .down_cf5e {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
}
html.page-index .aside-motion-96b4 {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
}
html.page-index .fresh-9595 {
  font-size: 1.125rem;
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: var(--space-xl);
}
html.page-index .yellow_01db {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
html.page-index .static-9650 {
  text-align: center;
}
html.page-index .lower_7898 {
  font-size: 2rem;
  font-weight: 800;
  display: block;
  margin-bottom: var(--space-xs);
}
html.page-index .solid-a4dc {
  font-size: 0.875rem;
  opacity: 0.9;
}
html.page-index .green_00f1 {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
html.page-index .tag-60ef {
  position: relative;
  animation: fadeInRight-page-index 0.8s ease-out 0.2s both;
}
html.page-index .element_d634 {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
html.page-index .south-ec3b {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-lg);
  display: block;
  box-shadow: var(--shadow-lg);
}
html.page-index .west_9a43 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
html.page-index .fixed_0239 {
  color: #fbbf24;
  font-size: 1.5rem;
  letter-spacing: 2px;
}
html.page-index .article-676c {
  font-size: 1.5rem;
  font-weight: 700;
}
html.page-index .nav_wide_50d6 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 0.875rem;
  text-align: center;
}
/* TRUST SIGNALS BAR */
html.page-index .search-b9e0 {
  background: white;
  border-bottom: 1px solid var(--neutral-200);
  padding: var(--space-lg);
}
html.page-index .component_cool_f36c {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}
html.page-index .gallery_d151 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
html.page-index .description_top_0f82 {
  width: 48px;
  height: 48px;
  background: var(--neutral-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
html.page-index .description_top_0f82.dynamic_f295 { background: rgba(52, 168, 83, 0.1); }
html.page-index .description_top_0f82.carousel-1c9a { background: rgba(251, 188, 4, 0.1); }
html.page-index .description_top_0f82.aside-left-7a25 { background: rgba(14, 124, 102, 0.1); }
html.page-index .description_top_0f82.image_93dc { background: rgba(234, 67, 53, 0.1); }
html.page-index .under_b5fe h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 2px;
}
html.page-index .under_b5fe p {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
/* MAIN CONTENT - Card-Based Layout */
html.page-index .button-1960 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}
html.page-index .breadcrumb-orange-3249 {
  margin-bottom: var(--space-3xl);
}
html.page-index .shadow_lite_ba68 {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
html.page-index .copper-d369 {
  display: inline-block;
  background: rgba(14, 124, 102, 0.1);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}
html.page-index .aside-8b9a {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: var(--space-md);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
html.page-index .green_8c9d {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}
html.page-index .tooltip_silver_603c {
  display: block;
  margin: var(--space-xl) auto 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
  background: white;
  padding: var(--space-md);
}
html.page-index .tooltip_silver_603c:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}
/* CARD GRID SYSTEM */
html.page-index .pressed-cb53 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}
html.page-index .heading-fa5c {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border: 1px solid var(--neutral-200);
}
html.page-index .heading-fa5c:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
html.page-index .secondary-fast-6d9c {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: var(--space-lg);
  color: white;
}
html.page-index .thick_f00b {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}
html.page-index .icon-710e {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}
html.page-index .orange-8d4d {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--neutral-200);
}
html.page-index .chip_ed72 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--text-tertiary);
}
html.page-index .lower_fa03 {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9375rem;
  transition: gap var(--transition-fast);
}
html.page-index .lower_fa03:hover {
  gap: var(--space-sm);
}
/* STATS SECTION - Bento Box Style */
html.page-index .media_8d9c {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
html.page-index .wrapper-b5e7 {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
  text-align: center;
  transition: all var(--transition-base);
}
html.page-index .wrapper-b5e7:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
html.page-index .menu_85e8 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  display: block;
  margin-bottom: var(--space-sm);
}
html.page-index .alert-f1b0 {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  font-weight: 600;
}
html.page-index .texture_dark_8a22 {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}
/* COMPARISON TABLE - Modern Design */
html.page-index .simple_3f27 {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-3xl);
}
html.page-index .simple_1539 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}
html.page-index .simple_1539 thead {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
}
html.page-index .simple_1539 th {
  padding: var(--space-lg);
  text-align: left;
  font-weight: 700;
  font-size: 0.9375rem;
}
html.page-index .simple_1539 td {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--neutral-200);
}
html.page-index .simple_1539 tbody tr:hover {
  background: var(--neutral-50);
}
html.page-index .simple_1539 tbody tr:last-child td {
  border-bottom: none;
}
/* FAQ ACCORDION - Enhanced */
html.page-index .row_iron_4b48 {
  max-width: var(--container-reading);
  margin: 0 auto;
}
html.page-index .top-7c43 {
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
  overflow: hidden;
}
html.page-index .photo_14b4 {
  width: 100%;
  padding: var(--space-lg);
  background: none;
  border: none;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  transition: all var(--transition-fast);
}
html.page-index .photo_14b4:hover {
  background: var(--neutral-50);
}
html.page-index .input_complex_d16c {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}
html.page-index .top-7c43.fn-active-815d .input_complex_d16c {
  transform: rotate(45deg);
}
html.page-index .text-glass-8d0a {
  padding: 0 var(--space-lg);
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-slow);
  color: var(--text-secondary);
  line-height: 1.7;
}
html.page-index .top-7c43.fn-active-815d .text-glass-8d0a {
  padding: 0 var(--space-lg) var(--space-lg);
  max-height: 1000px;
}
/* AUTHOR CARD - E-E-A-T Signal */
html.page-index .slider-narrow-5ac1 {
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  color: white;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  align-items: center;
  box-shadow: var(--shadow-xl);
  margin: var(--space-3xl) 0;
}
html.page-index .gradient-7d53 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-lg);
}
html.page-index .static_fbec h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
html.page-index .orange_b1d4 {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: var(--space-md);
}
html.page-index .feature-fast-33cc {
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: var(--space-lg);
}
html.page-index .message_28e1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
html.page-index .message-6c42 {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}
/* FOOTER - Comprehensive */
html.page-index .article_last_b8ed {
  background: var(--neutral-900);
  color: var(--neutral-300);
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  margin-top: var(--space-3xl);
}
html.page-index .tiny-92f4 {
  max-width: var(--container-max);
  margin: 0 auto;
}
html.page-index .panel_4d87 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--neutral-700);
}
html.page-index .overlay-2a56 h3 {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}
html.page-index .overlay-2a56 p {
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}
html.page-index .logo_soft_b26a h4 {
  color: white;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}
html.page-index .complex_2ad4 {
  list-style: none;
}
html.page-index .complex_2ad4 li {
  margin-bottom: var(--space-sm);
}
html.page-index .complex_2ad4 a {
  color: var(--neutral-300);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-index .complex_2ad4 a:hover {
  color: white;
}
html.page-index .static_c25f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.875rem;
}
html.page-index .detail_6c6b {
  color: var(--neutral-400);
}
html.page-index .primary_b5e4 {
  display: flex;
  gap: var(--space-lg);
}
html.page-index .primary_b5e4 a {
  color: var(--neutral-400);
  text-decoration: none;
  transition: color var(--transition-fast);
}
html.page-index .primary_b5e4 a:hover {
  color: white;
}
/* ANIMATIONS */
@keyframes fadeInUp-page-index {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRight-page-index {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* RESPONSIVE DESIGN */
@media (max-width: 360px) {
  html.page-index .feature-e465 strong {
    font-size: 0.9375rem;
  }
  
  html.page-index .selected_69d7 {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
  
  html.page-index .selected_69d7 svg {
    width: 14px;
    height: 14px;
  }
  
  html.page-index .form_bc76 {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
  
  html.page-index .backdrop_soft_30f3 {
    width: 20px;
  }
  
  html.page-index .backdrop_soft_30f3::before, html.page-index .backdrop_soft_30f3::after {
    width: 20px;
  }
  
  html.page-index .tooltip_silver_603c {
    width: 140px;
    height: 140px;
    margin-top: var(--space-md);
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  html.page-index .outer-9b31 {
    display: none;
  }
  
  html.page-index .paragraph_ab28 {
    display: inline;
  }
  
  html.page-index .selected_69d7 {
    padding: 8px 16px;
  }
}
@media (min-width: 769px) {
  html.page-index .form_bc76 {
    display: none !important;
  }
  
  html.page-index .purple-92db {
    display: flex !important;
  }
  
  html.page-index .outer-9b31 {
    display: none;
  }
  
  html.page-index .paragraph_ab28 {
    display: inline;
  }
  
  html.page-index .modal-35b9 {
    margin-left: var(--space-md);
    gap: var(--space-md);
  }
  
  html.page-index .selected_69d7 {
    padding: 10px 20px;
    font-size: 0.9375rem;
  }
  
  html.page-index .selected_69d7 svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 1024px) {
  html.page-index {
    --space-3xl: 3rem;
  }
  
  html.page-index .breadcrumb_action_d9d8 {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  html.page-index .aside-motion-96b4 {
    font-size: 2.5rem;
  }
  
  html.page-index .tag-60ef {
    max-width: 400px;
    margin: 0 auto;
  }
  
  html.page-index .panel_4d87 {
    grid-template-columns: 1fr 1fr;
  }
  
  html.page-index .media_8d9c {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  html.page-index {
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
  }
  
  html.page-index .medium-63c7 {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
  }
  
  html.page-index .feature-e465 {
    flex: 0 0 auto;
    order: 1;
  }
  
  html.page-index .shade-stale-75d4 {
    width: 40px;
    height: 40px;
  }
  
  html.page-index .feature-e465 strong {
    font-size: 1rem;
  }
  
  html.page-index .rough-782b {
    font-size: 0.625rem;
    padding: 3px 6px;
  }
  
  html.page-index .modal-35b9 {
    flex: 0 0 auto;
    order: 2;
    gap: var(--space-xs);
  }
  
  html.page-index .selected_69d7 {
    padding: 8px 12px;
    font-size: 0.8125rem;
    min-width: auto;
  }
  
  html.page-index .selected_69d7 svg {
    width: 16px;
    height: 16px;
  }
  
  /* Show short text on very small screens */
  html.page-index .paragraph_ab28 {
    display: none;
  }
  
  html.page-index .outer-9b31 {
    display: inline;
  }
  
  html.page-index .button-1960 {
    padding: var(--space-2xl) var(--space-md);
  }
  
  html.page-index .inner-e1e3 {
    padding: var(--space-2xl) var(--space-md);
  }
  
  html.page-index .purple-92db {
    width: 100%;
    order: 3;
    flex-direction: column;
    display: none;
    background: white;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--neutral-200);
    animation: slideDown-page-index var(--transition-base) ease-out;
  }
  
  html.page-index .purple-92db.over_d418 {
    display: flex;
  }
  
  @keyframes slideDown-page-index {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Hide desktop nav items on mobile */
  html.page-index .purple-92db .tag-5e1d, html.page-index .purple-92db .badge_6ff5 {
    width: 100%;
  }
  
  html.page-index .tag-5e1d, html.page-index .filter_cb4c {
    width: 100%;
    text-align: left;
    justify-content: space-between;
  }
  
  html.page-index .badge_6ff5 {
    width: 100%;
  }
  
  html.page-index .bright_2644 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
    background: var(--neutral-50);
    border-radius: var(--radius-sm);
    display: none;
  }
  
  html.page-index .badge_6ff5.fn-active-815d .bright_2644 {
    display: block;
  }
  
  html.page-index .form_bc76 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
  }
  
  html.page-index .form_bc76:hover {
    background: var(--neutral-100);
  }
  
  html.page-index .form_bc76:active {
    background: var(--neutral-200);
  }
  
  html.page-index .green_00f1 {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }
  
  html.page-index .green_00f1 .texture-fff2 {
    width: 100%;
    max-width: 300px;
  }
  
  html.page-index .breadcrumb_action_d9d8 {
    text-align: center;
  }
  
  html.page-index .aside-motion-96b4 {
    font-size: 2rem;
  }
  
  html.page-index .yellow_01db {
    grid-template-columns: 1fr;
  }
  
  html.page-index .green_00f1 {
    justify-content: center;
  }
  
  html.page-index .aside-8b9a {
    font-size: 2rem;
  }
  
  html.page-index .green_8c9d {
    text-align: center;
  }
  
  html.page-index .tooltip_silver_603c {
    width: 180px;
    height: 180px;
    margin-top: var(--space-lg);
  }
  
  html.page-index .pressed-cb53 {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
  
  html.page-index .media_8d9c {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  
  html.page-index .component_cool_f36c {
    grid-template-columns: 1fr;
  }
  
  html.page-index .gallery_d151 {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
  
  html.page-index .simple_3f27 {
    overflow-x: auto;
    padding: var(--space-lg) var(--space-sm);
    margin: 0 auto;
  }
  
  html.page-index .simple_1539 {
    min-width: 600px;
    margin: 0 auto;
  }
  
  html.page-index .simple_3f27 > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: 0 var(--space-md);
  }
  
  html.page-index .simple_3f27 .texture-fff2 {
    width: 100%;
    max-width: 280px;
  }
  
  html.page-index .slider-narrow-5ac1 {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  html.page-index .gradient-7d53 {
    margin: 0 auto;
  }
  
  html.page-index .message_28e1 {
    justify-content: center;
  }
  
  html.page-index .panel_4d87 {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  html.page-index .complex_2ad4 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  html.page-index .static_c25f {
    flex-direction: column;
    text-align: center;
  }
  
  html.page-index .primary_b5e4 {
    justify-content: center;
  }
  
  html.page-index .texture-fff2 {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  html.page-index .tertiary-671d {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  html.page-index .down_cf5e {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
  }
  
  html.page-index .heading-fa5c {
    margin: 0 auto;
    max-width: 500px;
  }
  
  html.page-index .wrapper-b5e7 {
    margin: 0 auto;
    max-width: 400px;
  }
  
  html.page-index .row_iron_4b48 {
    padding: 0 var(--space-md);
  }
  
  html.page-index .top-7c43 {
    margin: 0 auto var(--space-md);
    max-width: 100%;
  }
  
  html.page-index .breadcrumb-orange-3249 {
    padding: 0 var(--space-md);
  }
  
  html.page-index .shadow_lite_ba68 {
    padding: 0 var(--space-md);
  }
  
  /* Ensure all text content is centered on mobile */
  html.page-index p, html.page-index h1, html.page-index h2, html.page-index h3, html.page-index h4, html.page-index h5, html.page-index h6 {
    text-align: center;
  }
  
  /* But keep some elements left-aligned */
  html.page-index .icon-710e, html.page-index .text-glass-8d0a, html.page-index .photo_14b4, html.page-index .complex_2ad4, html.page-index .tag-5e1d, html.page-index .footer_10e5, html.page-index table, html.page-index .simple_1539, html.page-index ul, html.page-index ol {
    text-align: left;
  }
  
  html.page-index .photo_14b4 span {
    text-align: left;
  }
  
  html.page-index .orange-8d4d {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
  }
  
  html.page-index .chip_ed72 {
    width: 100%;
    justify-content: center;
  }
  
  html.page-index .lower_fa03 {
    width: 100%;
    justify-content: center;
  }
  
  /* Hero image adjustments */
  html.page-index .tag-60ef {
    max-width: 100%;
    padding: 0 var(--space-md);
  }
  
  html.page-index .element_d634 {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
  
  /* Trust bar mobile */
  html.page-index .search-b9e0 {
    padding: var(--space-lg) var(--space-md);
  }
  
  /* Author card mobile */
  html.page-index .slider-narrow-5ac1 {
    padding: var(--space-xl) var(--space-md);
    margin: var(--space-2xl) var(--space-md);
  }
  
  /* Fix min-width elements on mobile */
  html.page-index div[style*="min-width: 280px"] {
    min-width: 0 !important;
    flex: 1 1 100%;
  }
  
  /* Ensure all content containers are centered and contained */
  html.page-index body, html.page-index main, html.page-index section {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Center all main content */
  html.page-index .button-1960, html.page-index .inner-e1e3, html.page-index .breadcrumb-orange-3249 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  
  html.page-index .static_fbec {
    padding: 0 var(--space-md);
  }
  
  /* Footer brand mobile */
  html.page-index .overlay-2a56 {
    text-align: center;
  }
  
  html.page-index .overlay-2a56 p {
    text-align: center;
  }
  
  /* CTA section mobile */
  html.page-index .breadcrumb-orange-3249 > div {
    padding: var(--space-2xl) var(--space-md);
  }
  
  /* Ensure proper spacing */
  html.page-index .yellow_01db, html.page-index .media_8d9c, html.page-index .pressed-cb53 {
    width: 100%;
    padding: 0 var(--space-md);
  }
}
/* STICKY NAVIGATION SIDEBAR - E-E-A-T Best Practice for Long-Form Content */
html.page-index .tooltip_230e {
  position: fixed;
  top: 120px;
  right: 20px;
  width: 280px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-lg);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  z-index: 100;
  border: 2px solid var(--neutral-200);
  transition: all var(--transition-base);
}
html.page-index .tooltip_230e.fn-hidden-815d {
  transform: translateX(320px);
  opacity: 0;
}
html.page-index .border_simple_bceb {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--neutral-200);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
html.page-index .old-7f19 {
  margin-bottom: var(--space-lg);
}
html.page-index .dim-da24 {
  width: 100%;
  height: 6px;
  background: var(--neutral-200);
  border-radius: 999px;
  overflow: hidden;
  margin-top: var(--space-xs);
}
html.page-index .secondary_cb60 {
  height: 100%;
  background: linear-gradient(90deg, #0E7C66 0%, #0A5C4C 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
  width: 0%;
}
html.page-index .menu-b049 {
  list-style: none;
  padding: 0;
  margin: 0;
}
html.page-index .menu-b049 li {
  margin-bottom: var(--space-sm);
}
html.page-index .menu-b049 a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  color: var(--neutral-600);
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}
html.page-index .menu-b049 a:hover {
  background: var(--neutral-100);
  color: var(--primary);
  border-left-color: var(--primary);
  padding-left: var(--space-md);
}
html.page-index .menu-b049 a.fn-active-815d {
  background: rgba(14, 124, 102, 0.1);
  color: var(--primary);
  font-weight: 600;
  border-left-color: var(--primary);
}
html.page-index .button-6235 {
  position: fixed;
  top: 140px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 101;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
html.page-index .button-6235:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}
@media (max-width: 1400px) {
  html.page-index .tooltip_230e {
    display: none;
  }
  
  html.page-index .button-6235 {
    display: flex;
  }
  
  html.page-index .tooltip_230e.fn-visible-815d {
    display: block;
  }
}
@media (max-width: 768px) {
  html.page-index .tooltip_230e, html.page-index .button-6235 {
    display: none;
  }
}
/* PERFORMANCE OPTIMIZATIONS */
html.page-index img {
  max-width: 100%;
  height: auto;
  display: block;
}
html.page-index .texture-fff2, html.page-index .tag-5e1d, html.page-index .heading-fa5c, html.page-index .photo_14b4 {
  -webkit-tap-highlight-color: transparent;
}
/* PRINT STYLES */
@media print {
  html.page-index .solid_3841, html.page-index .article_last_b8ed, html.page-index .tertiary-671d, html.page-index .texture-fff2 {
    display: none;
  }
  
  html.page-index .inner-e1e3 {
    background: white;
    color: black;
  }
}


/* Article Byline Mobile Fix */
    html.page-index .dark-77de {
      max-width: 1200px;
      margin: var(--space-xl) auto var(--space-lg);
      padding: 0 var(--space-lg);
      border-bottom: 2px solid #e2e8f0;
      padding-bottom: var(--space-lg);
    }
    
    html.page-index .picture_649d {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      flex-wrap: wrap;
    }
    
    html.page-index .selected-355c {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      flex: 1;
      min-width: 280px;
    }
    
    html.page-index .label_bottom_c38a {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      font-size: 0.875rem;
      color: #4a5568;
    }
    
    @media (max-width: 768px) {
      html.page-index .dark-77de {
        padding: 0 var(--space-md);
        margin: var(--space-lg) auto var(--space-md);
      }
      
      html.page-index .picture_649d {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
      }
      
      html.page-index .selected-355c {
        width: 100%;
        min-width: unset;
        flex: none;
      }
      
      html.page-index .label_bottom_c38a {
        width: 100%;
        padding-left: 0;
      }
      
      html.page-index .accent-south-9d74 {
        width: 100%;
      }
    }
    
    @media (max-width: 480px) {
      html.page-index .selected-355c img {
        width: 48px !important;
        height: 48px !important;
      }
      
      html.page-index .selected-355c {
        gap: var(--space-sm);
      }
      
      html.page-index .label_bottom_c38a span {
        font-size: 0.8125rem;
        word-break: break-word;
      }
    }

/* ===== apk-download.html ===== */
/* MODERN CSS RESET & BASE */
html.page-apk-download *, html.page-apk-download *::before, html.page-apk-download *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html.page-apk-download {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #0A5C4C;
  --accent: #1F6B8A;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  
  /* Typography Scale */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Merriweather', Georgia, serif;
  
  /* Spacing Scale (8px base) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Container */
  --container-max: 1200px;
  --container-reading: 800px;
}
html.page-apk-download {
  position: static !important;
  scroll-behavior: smooth;
  width: 100%;
}
html.page-apk-download body {
  position: static !important;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--neutral-800);
  background: var(--neutral-50);
  width: 100%;
}
/* Prevent all elements from causing horizontal scroll */
html.page-apk-download * {
  max-width: 100%;
}
/* Allow specific containers to be wider (section/main/header/footer are
   full-bleed; .content_down_60c9 gets its own 1200px-capped rule further down
   and must NOT be forced to 100vw here, or it can never be centered) */
html.page-apk-download section, html.page-apk-download main, html.page-apk-download header, html.page-apk-download footer {
  width: 100%;
  box-sizing: border-box;
}
/* HEADER - Glassmorphism Sticky Navigation */
html.page-apk-download .solid_3841 {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-apk-download .solid_3841.card-medium-2236 {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 12px 40px rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
html.page-apk-download .medium-63c7 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
html.page-apk-download .feature-e465 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
}
html.page-apk-download .shade-stale-75d4 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}
html.page-apk-download .rough-782b {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--secondary);
  color: white;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
}
html.page-apk-download .purple-92db {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
html.page-apk-download .tag-5e1d {
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-apk-download .tag-5e1d:hover {
  color: var(--primary);
  background: var(--neutral-100);
}
html.page-apk-download .tag-5e1d.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
}
/* Dropdown Navigation */
html.page-apk-download .column-9418 {
  position: relative;
}
html.page-apk-download .badge_6ff5 {
  position: relative;
}
html.page-apk-download .filter_cb4c {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
html.page-apk-download .filter_cb4c:hover {
  color: var(--primary);
  background: var(--neutral-100);
}
html.page-apk-download .module_steel_5d9b {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
html.page-apk-download .badge_6ff5.fn-active-815d .module_steel_5d9b {
  transform: rotate(180deg);
}
html.page-apk-download .bright_2644 {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--neutral-200);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: 1000;
}
html.page-apk-download .badge_6ff5:hover .bright_2644, html.page-apk-download .badge_6ff5.fn-active-815d .bright_2644 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.page-apk-download .footer_10e5 {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-apk-download .footer_10e5:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
html.page-apk-download .form_bc76 {
  display: none;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
html.page-apk-download .form_bc76:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}
html.page-apk-download .backdrop_soft_30f3 {
  width: 24px;
  height: 2px;
  background: #000000;
  display: block;
  position: relative;
  transition: all var(--transition-base);
  border-radius: 2px;
}
html.page-apk-download .backdrop_soft_30f3::before, html.page-apk-download .backdrop_soft_30f3::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: #000000;
  left: 0;
  transition: all var(--transition-base);
  border-radius: 2px;
}
html.page-apk-download .backdrop_soft_30f3::before {
  top: -7px;
}
html.page-apk-download .backdrop_soft_30f3::after {
  top: 7px;
}
html.page-apk-download .form_bc76.fn-active-815d {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}
html.page-apk-download .form_bc76.fn-active-815d .backdrop_soft_30f3 {
  background: transparent;
}
html.page-apk-download .form_bc76.fn-active-815d .backdrop_soft_30f3::before {
  top: 0;
  transform: rotate(45deg);
  background: #000000;
}
html.page-apk-download .form_bc76.fn-active-815d .backdrop_soft_30f3::after {
  top: 0;
  transform: rotate(-45deg);
  background: #000000;
}
html.page-apk-download .modal-35b9 {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-left: auto;
}
html.page-apk-download .selected_69d7 {
  padding: 8px 16px;
  font-size: 0.875rem;
  white-space: nowrap;
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(14, 124, 102, 0.3);
  transition: all var(--transition-base);
}
html.page-apk-download .selected_69d7:hover {
  background: linear-gradient(135deg, #5568d3 0%, #653a91 100%);
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.4);
  transform: translateY(-2px);
}
html.page-apk-download .selected_69d7 svg {
  flex-shrink: 0;
  color: white;
  stroke: white;
}
html.page-apk-download .outer-9b31 {
  display: none;
}
html.page-apk-download .paragraph_ab28 {
  display: inline;
}
html.page-apk-download body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html.page-apk-download *, html.page-apk-download *::before, html.page-apk-download *::after {
  box-sizing: border-box;
}
html.page-apk-download main {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
/* Footer legal links */
html.page-apk-download footer > div > div:last-child > div:last-child a {
  color: #808080 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
}
html.page-apk-download footer > div > div:last-child > div:last-child a:hover {
  color: #ffffff !important;
}
/* ACCESSIBILITY - Skip to Content */
html.page-apk-download .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: var(--radius-md);
  z-index: 100;
  transition: top var(--transition-fast);
}
html.page-apk-download .grid-94b1:focus {
  top: var(--space-sm);
}
/* RESPONSIVE DESIGN - Mobile Optimization */
@media (max-width: 768px) {
  html.page-apk-download {
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
  }
  
  /* Enhanced floating header effect for mobile */
  html.page-apk-download .solid_3841 {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
  
  html.page-apk-download .solid_3841.card-medium-2236 {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
  
  html.page-apk-download .medium-63c7 {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
  }
  
  html.page-apk-download .feature-e465 {
    flex: 0 0 auto;
    order: 1;
  }
  
  html.page-apk-download .shade-stale-75d4 {
    width: 40px;
    height: 40px;
  }
  
  html.page-apk-download .feature-e465 strong {
    font-size: 1rem;
  }
  
  html.page-apk-download .rough-782b {
    font-size: 0.625rem;
    padding: 3px 6px;
  }
  
  html.page-apk-download .modal-35b9 {
    flex: 0 0 auto;
    order: 2;
    gap: var(--space-xs);
  }
  
  html.page-apk-download .selected_69d7 {
    padding: 8px 12px;
    font-size: 0.8125rem;
    min-width: auto;
  }
  
  html.page-apk-download .selected_69d7 svg {
    width: 16px;
    height: 16px;
  }
  
  /* Show short text on very small screens */
  html.page-apk-download .paragraph_ab28 {
    display: none;
  }
  
  html.page-apk-download .outer-9b31 {
    display: inline;
  }
  
  html.page-apk-download .purple-92db {
    width: 100%;
    order: 3;
    flex-direction: column;
    display: none;
    background: white;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--neutral-200);
    animation: slideDown-page-apk-download var(--transition-base) ease-out;
  }
  
  html.page-apk-download .purple-92db.over_d418 {
    display: flex;
  }
  
  @keyframes slideDown-page-apk-download {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Hide desktop nav items on mobile */
  html.page-apk-download .purple-92db .tag-5e1d, html.page-apk-download .purple-92db .badge_6ff5 {
    width: 100%;
  }
  
  html.page-apk-download .tag-5e1d, html.page-apk-download .filter_cb4c {
    width: 100%;
    text-align: left;
    justify-content: space-between;
  }
  
  html.page-apk-download .badge_6ff5 {
    width: 100%;
  }
  
  html.page-apk-download .bright_2644 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
    background: var(--neutral-50);
    border-radius: var(--radius-sm);
    display: none;
  }
  
  html.page-apk-download .badge_6ff5.fn-active-815d .bright_2644 {
    display: block;
  }
  
  html.page-apk-download .form_bc76 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
  }
  
  html.page-apk-download .form_bc76:hover {
    background: var(--neutral-100);
  }
  
  html.page-apk-download .form_bc76:active {
    background: var(--neutral-200);
  }
}
@media (min-width: 769px) {
  html.page-apk-download .form_bc76 {
    display: none !important;
  }
  
  html.page-apk-download .purple-92db {
    display: flex !important;
  }
  
  /* Enhanced desktop floating header */
  html.page-apk-download .solid_3841 {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08), 0 10px 40px rgba(0, 0, 0, 0.05);
  }
  
  html.page-apk-download .solid_3841.card-medium-2236 {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 14px 48px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
  }
  
  html.page-apk-download .medium-63c7 {
    padding: var(--space-md) var(--space-xl);
  }
}
/* ============================================
   GLOBAL CENTERING & CONTAINER FIX
   Single source of truth: only ONE element per
   nesting level gets padding, to avoid compounding
   insets that push content off balance.
   ============================================ */
html.page-apk-download body {
  width: 100%;
}
html.page-apk-download main {
  width: 100%;
}
/* Sections are always full width, never padded directly */
html.page-apk-download section {
  width: 100%;
  box-sizing: border-box;
}
/* .content_down_60c9 is the ONLY horizontal padding container inside a section */
html.page-apk-download .content_down_60c9 {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
/* Nested "reading width" wrappers (inline max-width: 700/800/900/1000px)
   simply center themselves; padding is already provided by .content_down_60c9,
   so we do NOT add extra padding here to avoid double-indenting content. */
html.page-apk-download .content_down_60c9 > div[style*="max-width"] {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* Prevent grid overflow */
html.page-apk-download div[style*="display: grid"] {
  max-width: 100%;
  box-sizing: border-box;
}
/* Responsive images and media */
html.page-apk-download img, html.page-apk-download video, html.page-apk-download iframe, html.page-apk-download svg {
  max-width: 100%;
  height: auto;
}
html.page-apk-download img {
  display: block;
}
/* Long unbreakable tokens (checksums, hashes, codes) must wrap instead
   of forcing horizontal overflow on narrow screens */
html.page-apk-download code, html.page-apk-download pre {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
/* MOBILE RESPONSIVENESS - Content Centering */
@media (max-width: 768px) {
  /* Ensure body and main are properly constrained */
  html.page-apk-download * {
    box-sizing: border-box !important;
  }
  
  html.page-apk-download body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  
  html.page-apk-download main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 0;
  }
  
  html.page-apk-download section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Ensure all containers respect viewport */
  html.page-apk-download .content_down_60c9, html.page-apk-download .solid_4900, html.page-apk-download div[class*="container"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  html.page-apk-download .content_down_60c9 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Force all direct children to respect container */
  html.page-apk-download .content_down_60c9 > * {
    max-width: 100% !important;
  }
  
  /* Fix any sections with background that might extend */
  html.page-apk-download section[style*="background"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure divs with padding inside sections don't overflow */
  html.page-apk-download section > div, html.page-apk-download section .content_down_60c9 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Ensure all content wrappers respect container width */
  html.page-apk-download .content_down_60c9 > * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Badges/pills using inline-block or inline-flex must never force a
     wider-than-container line; let them shrink and wrap their text. */
  html.page-apk-download .content_down_60c9 div[style*="display: inline-block"], html.page-apk-download .content_down_60c9 span[style*="display: inline-block"] {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
  }
  
  /* FAQ / info detail boxes: reduce oversized inline padding that eats
     into the already-narrow mobile content width */
  html.page-apk-download details[style*="padding: 1.5rem 2rem"] {
    padding: 1.25rem 1rem !important;
  }
  
  /* Grid columns reduction - collapse all inline grids to a single column */
  html.page-apk-download div[style*="grid-template-columns: repeat(3"], html.page-apk-download div[style*="grid-template-columns: 1fr 400px"], html.page-apk-download div[style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Info section stats - 2 columns balances better than 1 on mobile */
  html.page-apk-download div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Methodology cards - single column */
  html.page-apk-download div[style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Override all max-width containers to ensure proper centering */
  html.page-apk-download div[style*="max-width: 1200px"], html.page-apk-download div[style*="max-width: 900px"], html.page-apk-download div[style*="max-width: 800px"], html.page-apk-download div[style*="max-width: 700px"] {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Author card mobile - stack and center */
  html.page-apk-download article[style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
    text-align: center;
  }
  
  html.page-apk-download article[style*="grid-template-columns: auto 1fr"] img {
    margin: 0 auto 1rem auto !important;
    display: block !important;
  }
  
  /* Article byline - stack and center. The author-info child has a
     hardcoded min-width:280px inline style which is unsafe on narrow
     phones (< ~320px available width); relax it in a column layout. */
  html.page-apk-download div[style*="display: flex; align-items: center; gap: var(--space-lg"] {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  html.page-apk-download div[style*="display: flex; align-items: center; gap: var(--space-lg"] > div[style*="min-width: 280px"] {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }
  
  /* Breadcrumb centered */
  html.page-apk-download nav.green_8518 {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  /* Headings centered site-wide for visual balance, body text stays
     left-aligned for readability (except inside the hero, see below) */
  html.page-apk-download section h1, html.page-apk-download section h2, html.page-apk-download section h3, html.page-apk-download section h4 {
    text-align: center;
  }
  
  /* Hero content: center everything, including its own paragraphs/buttons */
  html.page-apk-download .logo_473d {
    text-align: center;
  }
  
  html.page-apk-download .logo_473d > div[style*="margin-bottom: 2rem"] {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* All CTA buttons (not just the hero one) must never force overflow:
     shrink-to-fit inline-flex + fixed horizontal padding is what pushes
     these wider than the viewport on narrow phones. */
  html.page-apk-download a.slider_1d11, html.page-apk-download a.cool-9abd {
    display: flex !important;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box;
  }
  
  /* "Verified Safe by VirusTotal" style badges: icon + text + link.
     Force them to stack/wrap instead of staying on one unbreakable row. */
  html.page-apk-download div[style*="display: inline-flex"] {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  
  /* Ensure all grid containers respect viewport */
  html.page-apk-download div[style*="display: grid"] {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Prevent any direct child from exceeding container width */
  html.page-apk-download .content_down_60c9 > div {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Reduce large left padding on small screens */
  html.page-apk-download div[style*="padding-left: 70px"] {
    padding-left: 40px !important;
  }
  
  /* Ensure all flex containers are properly centered */
  html.page-apk-download div[style*="display: flex"] {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Center all major content blocks */
  html.page-apk-download .solid_4900, html.page-apk-download article, html.page-apk-download div[class*="texture"] {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  
  /* Fix images with fixed widths */
  html.page-apk-download img[style*="width: 240px"], html.page-apk-download img[style*="width: 260px"] {
    width: 100% !important;
    height: auto !important;
    max-width: 240px !important;
  }
  
  /* Fix warning/info boxes with calc width */
  html.page-apk-download div[style*="width: calc(100% - 2rem)"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix step number circles */
  html.page-apk-download div[style*="width: 60px; height: 60px"] {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.5rem !important;
  }
  
  /* Fix grid with 80px columns */
  html.page-apk-download div[style*="grid-template-columns: 80px 1fr"] {
    grid-template-columns: 60px 1fr !important;
    gap: 1rem !important;
    padding: 1.5rem 1rem !important;
  }
  
  html.page-apk-download div[style*="display: inline-flex"] a[style*="white-space: nowrap"] {
    white-space: normal !important;
  }
  
  html.page-apk-download section#info-apk {
    text-align: center;
  }
  
  /* Typography mobile adjustments */
  html.page-apk-download h1 { font-size: 2rem !important; line-height: 1.3; }
  html.page-apk-download h2 { font-size: 1.5rem !important; line-height: 1.4; }
  html.page-apk-download h3 { font-size: 1.25rem !important; }
}
@media (max-width: 968px) {
  html.page-apk-download .solid_4900 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}
@media (max-width: 480px) {
  /* Enhanced floating header for extra small screens */
  html.page-apk-download .solid_3841 {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  /* Ensure extra tight containment on very small screens */
  html.page-apk-download body, html.page-apk-download main, html.page-apk-download section {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
  }
  
  html.page-apk-download .content_down_60c9 {
    width: 100%;
    max-width: 100%;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  /* Ensure all content is centered */
  html.page-apk-download .solid_4900, html.page-apk-download article, html.page-apk-download div[class*="texture"] {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Fix images with fixed widths on very small screens */
  html.page-apk-download img[style*="width: 240px"], html.page-apk-download img[style*="width: 260px"], html.page-apk-download img[width="240"], html.page-apk-download img[width="260"] {
    width: 100% !important;
    height: auto !important;
    max-width: 200px !important;
  }
  
  /* Fix warning/info boxes */
  html.page-apk-download div[style*="width: calc(100% - 2rem)"] {
    width: 100% !important;
    margin: 1rem 0 !important;
    padding: 1rem 0.875rem !important;
  }
  
  /* Fix step number circles on very small screens */
  html.page-apk-download div[style*="width: 60px; height: 60px"] {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
  }
  
  /* Fix grid with 80px columns on very small screens */
  html.page-apk-download div[style*="grid-template-columns: 80px 1fr"] {
    grid-template-columns: 50px 1fr !important;
    gap: 0.75rem !important;
    padding: 1.25rem 0.875rem !important;
  }
  
  /* Fix social share buttons */
  html.page-apk-download a[style*="width: 36px; height: 36px"] {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* Fix hero image */
  html.page-apk-download img[fetchpriority="high"][width="260"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Further reduce large padding on very small screens */
  html.page-apk-download div[style*="padding-left: 70px"] {
    padding-left: 30px !important;
  }
  
  html.page-apk-download ul[style*="padding-left: 2rem"] {
    padding-left: 1.25rem !important;
  }
  
  html.page-apk-download .form_bc76 {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
  
  html.page-apk-download .backdrop_soft_30f3 {
    width: 20px;
  }
  
  html.page-apk-download .backdrop_soft_30f3::before, html.page-apk-download .backdrop_soft_30f3::after {
    width: 20px;
  }
  
  html.page-apk-download .shade-stale-75d4 {
    width: 36px;
    height: 36px;
  }
  
  html.page-apk-download .selected_69d7 {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
  
  html.page-apk-download .selected_69d7 svg {
    width: 14px;
    height: 14px;
  }
  
  html.page-apk-download .modal-35b9 {
    gap: var(--space-xs);
  }
  
  html.page-apk-download h1 { font-size: 1.75rem !important; }
  html.page-apk-download h2 { font-size: 1.5rem !important; }
  html.page-apk-download h3 { font-size: 1.25rem !important; }
  
  html.page-apk-download .content_down_60c9 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
  
  /* Info stats - single column on very small screens */
  html.page-apk-download div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Methodology cards - single column on very small screens */
  html.page-apk-download div[style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Override all max-width containers on very small screens */
  html.page-apk-download div[style*="max-width: 1200px"], html.page-apk-download div[style*="max-width: 900px"], html.page-apk-download div[style*="max-width: 800px"], html.page-apk-download div[style*="max-width: 700px"] {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    box-sizing: border-box !important;
  }
  
  /* Reduce button padding */
  html.page-apk-download a.slider_1d11, html.page-apk-download .cool-9abd {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
  }
  
  /* "Pilih Versi APK" comparison cards: 2rem padding + a 250px min-width
     content column together exceed the available width on narrow phones
     (~320-360px), forcing horizontal overflow. Shrink both. */
  html.page-apk-download div[style*="border-radius: 12px; padding: 2rem"] {
    padding: 1rem !important;
  }
  
  html.page-apk-download div[style*="padding: 2rem"] {
    padding: 1rem !important;
  }
  
  html.page-apk-download div[style*="flex: 1; min-width: 250px"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  /* Fix any padding: 1.5rem elements */
  html.page-apk-download div[style*="padding: 1.5rem"] {
    padding: 1rem 0.875rem !important;
  }
  
  /* Ensure all cards are contained */
  html.page-apk-download div[style*="box-shadow"][style*="border-radius"] {
    max-width: 100% !important;
  }
}


@media (max-width: 968px) {
  html.page-apk-download .solid_4900 div[style*="grid-template-columns: 1fr 400px"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}


/* NOTE: container padding is handled centrally by the single
       ".content_down_60c9" rule in <head> - do NOT re-add padding to
       "div[style*=max-width]" here, it would double the inset. */
    @media (max-width: 968px) {
      html.page-apk-download .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-apk-download .logo-5dae {
        max-width: 300px;
        margin: 0 auto;
      }
      
      /* Hero trust indicators to single column */
      html.page-apk-download .logo_473d > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }
    }
    
    @media (max-width: 768px) {
      /* Fix minmax grids that are too wide */
      html.page-apk-download section div[style*="minmax(280px"] {
        grid-template-columns: 1fr !important;
      }
      
      html.page-apk-download section div[style*="minmax(150px"] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
      }
      
      /* Step cards: reduce icon column width */
      html.page-apk-download section div[style*="grid-template-columns: 80px 1fr"] {
        grid-template-columns: 60px 1fr !important;
        gap: 1rem !important;
      }
      
      /* Reduce padding on step cards */
      html.page-apk-download section div[style*="grid-template-columns: 80px 1fr"][style*="padding: 2rem"] {
        padding: 1.5rem !important;
      }
      
      /* Reduce section padding */
      html.page-apk-download section[style*="padding: 4rem 0"] {
        padding: 2.5rem 0 !important;
      }
      
      /* Reduce heading sizes */
      html.page-apk-download section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-apk-download section h3 {
        font-size: 1.25rem !important;
      }
      
      /* Prevent text overflow */
      html.page-apk-download section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }
    
    @media (max-width: 480px) {
      html.page-apk-download .logo-5dae {
        max-width: 250px;
      }
      
      /* All remaining minmax grids to single column on very small screens */
      html.page-apk-download section div[style*="minmax("] {
        grid-template-columns: 1fr !important;
      }
      
      /* Step cards: even smaller icon column */
      html.page-apk-download section div[style*="grid-template-columns: 60px 1fr"], html.page-apk-download section div[style*="grid-template-columns: 50px 1fr"] {
        grid-template-columns: 45px 1fr !important;
        gap: 0.75rem !important;
      }
      
      /* Hero title smaller */
      html.page-apk-download .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-apk-download .solid_4900 p {
        font-size: 0.9375rem !important;
      }
      
      /* Tighter section spacing */
      html.page-apk-download section {
        padding: 2rem 0 !important;
      }
      
      html.page-apk-download section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-apk-download section h3 {
        font-size: 1.125rem !important;
      }
    }


@media (max-width: 768px) {
    html.page-apk-download article[style*="grid-template-columns: auto 1fr"] {
      grid-template-columns: 1fr !important;
      text-align: center;
    }
    
    html.page-apk-download article img[style*="width: 120px"] {
      margin: 0 auto;
    }
    
    html.page-apk-download article > div:last-child {
      padding: 0 1rem;
    }
    
    html.page-apk-download article div[style*="display: flex; flex-wrap: wrap"] {
      justify-content: center;
    }
  }


@media (min-width: 1400px) {
  html.page-apk-download .tooltip_230e {
    display: block !important;
  }
}

html.page-apk-download .tooltip_230e a:hover {
  background: #f5f5f5;
  color: #0E7C66;
  border-left-color: #0E7C66;
  padding-left: 1rem;
}

html.page-apk-download .tooltip_230e a.fn-active-815d {
  background: rgba(14, 124, 102, 0.1);
  color: #0E7C66;
  font-weight: 600;
  border-left-color: #0E7C66;
}

/* ===== apk.html ===== */
/* ============================================
   MODERN CSS VARIABLES & BASE STYLES
   ============================================ */
html.page-apk {
  /* Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-800: #424242;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --container-max: 1280px;
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-apk {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
html.page-apk body {
  font-family: var(--font-primary);
  color: var(--text-primary);
  background: var(--neutral-50);
  line-height: 1.6;
  overflow-x: hidden;
}
/* Skip Link - Accessibility */
html.page-apk .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  z-index: 10000;
}
html.page-apk .grid-94b1:focus {
  top: 0;
}
/* MODERN HEADER - Glass Morphism Effect */
html.page-apk .solid_3841 {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--neutral-200);
  transition: all var(--transition-base);
}
html.page-apk .solid_3841.card-medium-2236 {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
}
html.page-apk .medium-63c7 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
html.page-apk .feature-e465 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
}
html.page-apk .shade-stale-75d4 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}
html.page-apk .rough-782b {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--secondary);
  color: white;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
}
html.page-apk .purple-92db {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
html.page-apk .tag-5e1d {
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-apk .tag-5e1d:hover {
  color: var(--primary);
  background: var(--neutral-100);
}
html.page-apk .tag-5e1d.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
}
/* Dropdown Navigation */
html.page-apk .badge_6ff5 {
  position: relative;
}
html.page-apk .filter_cb4c {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
html.page-apk .filter_cb4c:hover {
  color: var(--primary);
  background: var(--neutral-100);
}
html.page-apk .filter_cb4c.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
}
html.page-apk .module_steel_5d9b {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
html.page-apk .badge_6ff5.fn-active-815d .module_steel_5d9b {
  transform: rotate(180deg);
}
html.page-apk .bright_2644 {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--neutral-200);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: 1000;
}
html.page-apk .badge_6ff5:hover .bright_2644, html.page-apk .badge_6ff5.fn-active-815d .bright_2644 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.page-apk .footer_10e5 {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-apk .footer_10e5:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
html.page-apk .footer_10e5.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
  font-weight: 600;
}
/* Mobile Menu Toggle */
html.page-apk .form_bc76 {
  display: none;
  background: none;
  border: none;
  padding: 12px;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
html.page-apk .form_bc76:hover {
  background: var(--neutral-100);
}
html.page-apk .backdrop_soft_30f3 {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  display: block;
  position: relative;
  transition: all var(--transition-base);
  border-radius: 2px;
}
html.page-apk .backdrop_soft_30f3::before, html.page-apk .backdrop_soft_30f3::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  left: 0;
  transition: all var(--transition-base);
  border-radius: 2px;
}
html.page-apk .backdrop_soft_30f3::before {
  top: -7px;
}
html.page-apk .backdrop_soft_30f3::after {
  top: 7px;
}
html.page-apk .form_bc76.fn-active-815d {
  background: var(--neutral-100);
}
html.page-apk .form_bc76.fn-active-815d .backdrop_soft_30f3 {
  background: transparent;
}
html.page-apk .form_bc76.fn-active-815d .backdrop_soft_30f3::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--primary);
}
html.page-apk .form_bc76.fn-active-815d .backdrop_soft_30f3::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--primary);
}
/* Header Actions */
html.page-apk .modal-35b9 {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-left: auto;
}
html.page-apk .selected_69d7 {
  padding: 8px 16px;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(14, 124, 102, 0.2);
  transition: all var(--transition-base);
}
html.page-apk .selected_69d7:hover {
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.3);
  transform: translateY(-1px);
}
html.page-apk .selected_69d7 svg {
  flex-shrink: 0;
}
html.page-apk .outer-9b31 {
  display: none;
}
html.page-apk .paragraph_ab28 {
  display: inline;
}
/* Buttons */
html.page-apk .texture-fff2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-base);
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
html.page-apk .hard_40d0 {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-sm);
}
html.page-apk .hard_40d0:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
/* Mobile Responsive */
@media (max-width: 768px) {
  html.page-apk .medium-63c7 {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
  }
  
  html.page-apk .feature-e465 {
    flex: 0 0 auto;
    order: 1;
  }
  
  html.page-apk .shade-stale-75d4 {
    width: 40px;
    height: 40px;
  }
  
  html.page-apk .feature-e465 strong {
    font-size: 1rem;
  }
  
  html.page-apk .rough-782b {
    font-size: 0.625rem;
    padding: 3px 6px;
  }
  
  html.page-apk .modal-35b9 {
    flex: 0 0 auto;
    order: 2;
    gap: var(--space-xs);
  }
  
  html.page-apk .selected_69d7 {
    padding: 8px 12px;
    font-size: 0.8125rem;
    min-width: auto;
  }
  
  html.page-apk .selected_69d7 svg {
    width: 16px;
    height: 16px;
  }
  
  /* Show short text on very small screens */
  html.page-apk .paragraph_ab28 {
    display: none;
  }
  
  html.page-apk .outer-9b31 {
    display: inline;
  }
  
  html.page-apk .purple-92db {
    width: 100%;
    order: 3;
    flex-direction: column;
    display: none;
    background: white;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--neutral-200);
    animation: slideDown-page-apk var(--transition-base) ease-out;
  }
  
  html.page-apk .purple-92db.over_d418 {
    display: flex;
  }
  
  @keyframes slideDown-page-apk {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Mobile nav items styling */
  html.page-apk .purple-92db .tag-5e1d, html.page-apk .purple-92db .badge_6ff5 {
    width: 100%;
  }
  
  html.page-apk .tag-5e1d, html.page-apk .filter_cb4c {
    width: 100%;
    text-align: left;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    font-size: 1rem;
    border-radius: 0;
  }
  
  html.page-apk .badge_6ff5 {
    width: 100%;
  }
  
  html.page-apk .bright_2644 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
    background: var(--neutral-50);
    border-radius: var(--radius-sm);
    display: none;
  }
  
  html.page-apk .badge_6ff5.fn-active-815d .bright_2644 {
    display: block;
  }
  
  html.page-apk .footer_10e5 {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9375rem;
  }
  
  html.page-apk .form_bc76 {
    display: block;
  }
  
  html.page-apk .modal-35b9 {
    order: 1;
  }
  
  html.page-apk .paragraph_ab28 {
    display: none;
  }
  
  html.page-apk .outer-9b31 {
    display: inline;
  }
  
  html.page-apk .selected_69d7 {
    padding: 6px 12px;
    font-size: 0.8125rem;
  }
}
@media (min-width: 769px) {
  html.page-apk .form_bc76 {
    display: none !important;
  }
}
/* Footer Styles */
html.page-apk .article_last_b8ed {
  background: #1a1a1a;
  color: #e5e5e5;
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  margin-top: var(--space-3xl);
}
html.page-apk .tiny-92f4 {
  max-width: var(--container-max);
  margin: 0 auto;
}
html.page-apk .panel_4d87 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--neutral-700);
}
html.page-apk .overlay-2a56 h3 {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}
html.page-apk .overlay-2a56 p {
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  color: #b0b0b0;
}
html.page-apk .logo_soft_b26a h4 {
  color: white;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}
html.page-apk .complex_2ad4 {
  list-style: none;
  padding: 0;
  margin: 0;
}
html.page-apk .complex_2ad4 li {
  margin-bottom: var(--space-sm);
}
html.page-apk .complex_2ad4 a {
  color: #b0b0b0;
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-apk .complex_2ad4 a:hover {
  color: #ffffff;
}
html.page-apk .static_c25f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.875rem;
}
html.page-apk .detail_6c6b {
  color: #888888;
}
html.page-apk .primary_b5e4 {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
  color: #888888;
}
html.page-apk .primary_b5e4 a {
  color: #888888;
  text-decoration: none;
  transition: color var(--transition-fast);
}
html.page-apk .primary_b5e4 a:hover {
  color: #ffffff;
}
/* Footer Mobile Responsive */
@media (max-width: 968px) {
  html.page-apk .panel_4d87 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  html.page-apk .panel_4d87 {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  html.page-apk .static_c25f {
    flex-direction: column;
    text-align: center;
  }
  
  html.page-apk .primary_b5e4 {
    flex-direction: column;
    gap: var(--space-sm);
  }
}
html.page-apk main {
  position: relative;
  overflow: visible;
}


@media (max-width: 968px) {
      html.page-apk .solid_4900 .content_down_60c9 > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      html.page-apk .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-apk .logo-5dae {
        max-width: 300px;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 768px) {
      /* Fix minmax grids that are too wide */
      html.page-apk section div[style*="minmax(250px"] {
        grid-template-columns: 1fr !important;
      }
      
      /* Ensure all images are responsive */
      html.page-apk section img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Reduce section padding */
      html.page-apk section[style*="padding: 4rem 0"], html.page-apk section[style*="padding: 3rem 0"] {
        padding: 2.5rem 0 !important;
      }
      
      /* Reduce heading sizes */
      html.page-apk section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-apk section h3 {
        font-size: 1.25rem !important;
      }
      
      html.page-apk section h4 {
        font-size: 1.125rem !important;
      }
      
      /* Prevent text overflow */
      html.page-apk section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      
      /* Container padding */
      html.page-apk .content_down_60c9, html.page-apk section div[style*="max-width: 1000px"], html.page-apk section div[style*="max-width: 900px"], html.page-apk section div[style*="max-width: 800px"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      
      /* FAQ details mobile */
      html.page-apk details[style*="padding"] {
        padding: 1.25rem 1.5rem !important;
      }
      
      /* Tables overflow */
      html.page-apk table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
    
    @media (max-width: 480px) {
      html.page-apk .logo-5dae {
        max-width: 250px;
      }
      
      /* All minmax grids to single column */
      html.page-apk section div[style*="minmax("] {
        grid-template-columns: 1fr !important;
      }
      
      /* Hero title smaller */
      html.page-apk .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-apk .solid_4900 p {
        font-size: 0.9375rem !important;
      }
      
      /* Tighter spacing */
      html.page-apk section {
        padding: 2rem 0 !important;
      }
      
      html.page-apk section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-apk section h3 {
        font-size: 1.125rem !important;
      }
      
      html.page-apk section h4 {
        font-size: 1rem !important;
      }
      
      html.page-apk section p {
        font-size: 0.9375rem !important;
      }
      
      /* Increase container padding */
      html.page-apk .content_down_60c9, html.page-apk section div[style*="max-width"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }
      
      /* FAQ details even smaller padding */
      html.page-apk details {
        padding: 1rem 1.25rem !important;
      }
    }

/* ===== aplikasi.html ===== */
html.page-aplikasi {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #0A5C4C;
  
  /* Neutral Colors */
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
  
  /* Text Colors */
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Container */
  --container-max: 1200px;
}
html.page-aplikasi * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html.page-aplikasi {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.page-aplikasi body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background: var(--neutral-50);
  line-height: 1.6;
  overflow-x: hidden;
}
/* SKIP LINK - Accessibility */
html.page-aplikasi .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  z-index: 100;
  border-radius: var(--radius-sm);
}
html.page-aplikasi .grid-94b1:focus {
  top: 0;
}
html.page-aplikasi main {
  position: relative;
  overflow: visible;
}
/* ========================================
   HEADER STYLES - Modern Floating Header
   ======================================== */
html.page-aplikasi .solid_3841 {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--neutral-200);
  transition: all var(--transition-base);
}
html.page-aplikasi .solid_3841.card-medium-2236 {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
}
html.page-aplikasi .medium-63c7 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
html.page-aplikasi .feature-e465 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
}
html.page-aplikasi .shade-stale-75d4 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}
html.page-aplikasi .rough-782b {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--secondary);
  color: white;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
}
/* Navigation */
html.page-aplikasi .purple-92db {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
html.page-aplikasi .purple-92db li {
  list-style: none;
}
html.page-aplikasi .tag-5e1d {
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-aplikasi .tag-5e1d:hover {
  color: var(--primary);
  background: var(--neutral-100);
}
html.page-aplikasi .tag-5e1d.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
}
/* Dropdown Navigation */
html.page-aplikasi .badge_6ff5 {
  position: relative;
}
html.page-aplikasi .filter_cb4c {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
html.page-aplikasi .filter_cb4c:hover, html.page-aplikasi .badge_6ff5.fn-active-815d .filter_cb4c {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
}
html.page-aplikasi .filter_cb4c svg {
  transition: transform var(--transition-fast);
}
html.page-aplikasi .badge_6ff5.fn-active-815d .filter_cb4c svg {
  transform: rotate(180deg);
}
html.page-aplikasi .bright_2644 {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-base);
  z-index: 1000;
}
html.page-aplikasi .badge_6ff5.fn-active-815d .bright_2644 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.page-aplikasi .footer_10e5 {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
html.page-aplikasi .footer_10e5:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
/* Mobile Menu Toggle */
html.page-aplikasi .form_bc76 {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-base);
  z-index: 1001;
}
html.page-aplikasi .form_bc76:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-200);
}
html.page-aplikasi .backdrop_soft_30f3 {
  position: relative;
  display: block;
  width: 24px;
  height: 3px;
  background: #000000;
  border-radius: 2px;
  transition: all var(--transition-base);
}
html.page-aplikasi .backdrop_soft_30f3::before, html.page-aplikasi .backdrop_soft_30f3::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000000;
  border-radius: 2px;
  transition: all var(--transition-base);
}
html.page-aplikasi .backdrop_soft_30f3::before {
  top: -8px;
}
html.page-aplikasi .backdrop_soft_30f3::after {
  top: 8px;
}
html.page-aplikasi .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {
  background: transparent;
}
html.page-aplikasi .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {
  transform: rotate(45deg);
  top: 0;
}
html.page-aplikasi .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {
  transform: rotate(-45deg);
  top: 0;
}
/* Header Actions */
html.page-aplikasi .modal-35b9 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
html.page-aplikasi .selected_69d7 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.3);
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  min-width: 140px;
  justify-content: center;
}
html.page-aplikasi .selected_69d7:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 124, 102, 0.4);
  background: linear-gradient(135deg, #5568d3 0%, #653a8a 100%);
}
html.page-aplikasi .selected_69d7 svg {
  width: 18px;
  height: 18px;
  fill: white;
}
html.page-aplikasi .paragraph_ab28 {
  display: inline;
}
html.page-aplikasi .outer-9b31 {
  display: none;
}
/* General Button Styles */
html.page-aplikasi .texture-fff2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
html.page-aplikasi .hard_40d0 {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.3);
}
html.page-aplikasi .hard_40d0:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 124, 102, 0.4);
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
  html.page-aplikasi {
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
  }
  
  html.page-aplikasi .medium-63c7 {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }
  
  html.page-aplikasi .feature-e465 {
    flex: 0 0 auto;
    order: 1;
    margin-right: auto;
  }
  
  html.page-aplikasi .shade-stale-75d4 {
    width: 40px;
    height: 40px;
  }
  
  html.page-aplikasi .feature-e465 strong {
    font-size: 1rem;
  }
  
  html.page-aplikasi .rough-782b {
    font-size: 0.625rem;
    padding: 3px 6px;
  }
  
  html.page-aplikasi .modal-35b9 {
    flex: 0 0 auto;
    order: 2;
    gap: var(--space-sm);
    margin-left: auto;
  }
  
  html.page-aplikasi .selected_69d7 {
    padding: 10px 16px;
    font-size: 0.875rem;
    min-width: auto;
  }
  
  html.page-aplikasi .selected_69d7 svg {
    width: 16px;
    height: 16px;
  }
  
  /* Show short "Download" text on mobile (hide "APK") */
  html.page-aplikasi .paragraph_ab28 {
    display: none;
  }
  
  html.page-aplikasi .outer-9b31 {
    display: inline;
  }
  
  html.page-aplikasi .purple-92db {
    width: 100%;
    order: 3;
    flex-direction: column;
    gap: 4px;
    display: none;
    background: white;
    padding: var(--space-md);
    border-top: 1px solid var(--neutral-200);
    animation: slideDown-page-aplikasi var(--transition-base) ease-out;
    align-items: stretch;
  }
  
  html.page-aplikasi .purple-92db.over_d418 {
    display: flex;
  }
  
  /* Hide logo when mobile menu is open */
  html.page-aplikasi .solid_3841.message_warm_fb15 .feature-e465 {
    display: none;
  }
  
  /* Also hide Download button when menu is open to save space */
  html.page-aplikasi .solid_3841.message_warm_fb15 .selected_69d7 {
    display: none;
  }
  
  @keyframes slideDown-page-aplikasi {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Hide desktop nav items on mobile */
  html.page-aplikasi .purple-92db .tag-5e1d, html.page-aplikasi .purple-92db .badge_6ff5 {
    width: 100%;
  }
  
  html.page-aplikasi .tag-5e1d, html.page-aplikasi .filter_cb4c {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    padding: var(--space-md);
    font-size: 1rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
  }
  
  html.page-aplikasi .filter_cb4c {
    justify-content: space-between;
  }
  
  html.page-aplikasi .tag-5e1d.fn-active-815d {
    border-radius: var(--radius-lg);
    font-weight: 600;
  }
  
  html.page-aplikasi .badge_6ff5 {
    width: 100%;
  }
  
  html.page-aplikasi .filter_cb4c {
    color: var(--text-secondary);
  }
  
  html.page-aplikasi .filter_cb4c svg {
    margin-left: var(--space-sm);
  }
  
  html.page-aplikasi .bright_2644 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 var(--space-lg);
    margin-top: 2px;
    background: transparent;
    border-radius: 0;
    display: none;
  }
  
  html.page-aplikasi .badge_6ff5.fn-active-815d .bright_2644 {
    display: block;
  }
  
  html.page-aplikasi .footer_10e5 {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
  }
  
  html.page-aplikasi .form_bc76 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
  }
  
  html.page-aplikasi .form_bc76:hover {
    background: var(--neutral-100);
  }
  
  html.page-aplikasi .form_bc76:active {
    background: var(--neutral-200);
  }
}
/* Desktop - Ensure dropdowns work properly */
@media (min-width: 769px) {
  html.page-aplikasi .form_bc76 {
    display: none !important;
  }
  
  html.page-aplikasi .purple-92db {
    display: flex !important;
  }
  
  /* Fix visual order to match: Logo -> Nav Menu -> Download Button */
  html.page-aplikasi .feature-e465 {
    order: 1;
  }
  
  html.page-aplikasi nav[aria-label="Navigasi Utama"] {
    order: 2;
  }
  
  html.page-aplikasi .modal-35b9 {
    order: 3;
  }
  
  /* Show full "Download APK" text on desktop */
  html.page-aplikasi .paragraph_ab28 {
    display: inline !important;
  }
  
  html.page-aplikasi .outer-9b31 {
    display: none !important;
  }
}
/* ========================================
   FOOTER STYLES
   ======================================== */
html.page-aplikasi .article_last_b8ed {
  background: var(--neutral-900);
  color: var(--neutral-300);
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  margin-top: var(--space-3xl);
}
html.page-aplikasi .tiny-92f4 {
  max-width: var(--container-max);
  margin: 0 auto;
}
html.page-aplikasi .panel_4d87 {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html.page-aplikasi .overlay-2a56 h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-md);
}
html.page-aplikasi .overlay-2a56 p {
  color: var(--neutral-400);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}
html.page-aplikasi .logo_soft_b26a h4 {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: var(--space-md);
}
html.page-aplikasi .complex_2ad4 {
  list-style: none;
  padding: 0;
  margin: 0;
}
html.page-aplikasi .complex_2ad4 li {
  margin-bottom: var(--space-sm);
}
html.page-aplikasi .complex_2ad4 a {
  color: var(--neutral-400);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-aplikasi .complex_2ad4 a:hover {
  color: var(--primary-light);
}
html.page-aplikasi .static_c25f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
html.page-aplikasi .detail_6c6b {
  color: var(--neutral-500);
  font-size: 0.875rem;
}
html.page-aplikasi .primary_b5e4 {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--neutral-500);
}
html.page-aplikasi .primary_b5e4 a {
  color: var(--primary-light);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}
html.page-aplikasi .primary_b5e4 a:hover {
  color: white;
}
/* Footer Mobile Responsive */
@media (max-width: 768px) {
  html.page-aplikasi .article_last_b8ed {
    padding: var(--space-2xl) var(--space-md) var(--space-xl);
  }
  
  html.page-aplikasi .panel_4d87 {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }
  
  html.page-aplikasi .complex_2ad4 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  html.page-aplikasi .static_c25f {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  
  html.page-aplikasi .primary_b5e4 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  /* Mobile Content Centering */
  html.page-aplikasi body, html.page-aplikasi main, html.page-aplikasi section {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  html.page-aplikasi .content_down_60c9, html.page-aplikasi .solid_4900, html.page-aplikasi div[class*="container"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure all main content is centered */
  html.page-aplikasi .button-1960, html.page-aplikasi section {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}
/* Extra small screens */
@media (max-width: 480px) {
  html.page-aplikasi .medium-63c7 {
    padding: var(--space-xs) var(--space-sm);
  }
  
  html.page-aplikasi .shade-stale-75d4 {
    width: 36px;
    height: 36px;
  }
  
  html.page-aplikasi .feature-e465 strong {
    font-size: 0.9375rem;
  }
  
  html.page-aplikasi .selected_69d7 {
    padding: 6px 10px;
    font-size: 0.75rem;
    min-width: auto;
  }
  
  html.page-aplikasi .article_last_b8ed {
    padding: var(--space-xl) var(--space-sm) var(--space-md);
  }
}


@media (max-width: 968px) {
      html.page-aplikasi .solid_4900 .content_down_60c9 > div[style*="grid-template-columns: 1fr 360px"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      html.page-aplikasi .solid_4900 .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-aplikasi .solid_4900 .logo-5dae {
        max-width: 320px;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 768px) {
      html.page-aplikasi .solid_4900 h1 {
        font-size: 2rem !important;
      }
      
      html.page-aplikasi .solid_4900 p {
        font-size: 1rem !important;
      }
      
      html.page-aplikasi .solid_4900 .logo-5dae {
        max-width: 280px;
      }
      
      html.page-aplikasi .solid_4900 .logo_473d div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
      }
    }
    
    @media (max-width: 480px) {
      html.page-aplikasi .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-aplikasi .solid_4900 .logo-5dae {
        max-width: 240px;
      }
      
      html.page-aplikasi .solid_4900 .logo-5dae img {
        padding: 1.5rem !important;
      }
    }


@media (max-width: 968px) {
      html.page-aplikasi section div[style*="display: flex"] {
        flex-direction: column !important;
      }
      
      html.page-aplikasi section div[style*="flex-shrink: 0"] {
        flex-shrink: 1 !important;
      }
    }
    
    @media (max-width: 768px) {
      /* Section padding */
      html.page-aplikasi section {
        padding: 2.5rem 0 !important;
      }
      
      /* Headings */
      html.page-aplikasi section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-aplikasi section h3 {
        font-size: 1.25rem !important;
      }
      
      /* Container padding */
      html.page-aplikasi .content_down_60c9, html.page-aplikasi section div[style*="max-width"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      
      /* All grid layouts to single column */
      html.page-aplikasi section div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }
      
      /* Card padding */
      html.page-aplikasi section div[style*="padding: 2rem"] {
        padding: 1.5rem !important;
      }
      
      html.page-aplikasi section div[style*="padding: 2.5rem"] {
        padding: 1.75rem !important;
      }
      
      /* Images responsive */
      html.page-aplikasi section img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Text overflow prevention */
      html.page-aplikasi section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      
      /* E-E-A-T Mobile Styles */
      html.page-aplikasi section div[style*="display: flex"][style*="align-items: flex-start"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
      }
      
      html.page-aplikasi section div[style*="display: flex"][style*="align-items: center"] {
        justify-content: center !important;
        text-align: center !important;
      }
      
      html.page-aplikasi section img[alt*="Tim Kurasi"] {
        margin-bottom: 1rem;
      }
      
      /* Methodology steps */
      html.page-aplikasi section div[style*="width: 40px"][style*="height: 40px"] {
        margin: 0 auto 0.75rem;
      }
      
      /* Stats grid on mobile */
      html.page-aplikasi section div[style*="grid-template-columns"][style*="minmax(200px"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
      }
      
      /* Badge wrapping */
      html.page-aplikasi section span[style*="display: inline-flex"][style*="background: #"] {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
      }
    }
    
    @media (max-width: 480px) {
      html.page-aplikasi section {
        padding: 2rem 0 !important;
      }
      
      html.page-aplikasi section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-aplikasi section p {
        font-size: 0.9375rem !important;
      }
      
      html.page-aplikasi .content_down_60c9, html.page-aplikasi section div[style*="max-width"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }
      
      html.page-aplikasi section div[style*="padding: 1.5rem"] {
        padding: 1.25rem !important;
      }
      
      html.page-aplikasi section div[style*="width: 60px"] {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.5rem !important;
      }
      
      /* E-E-A-T Extra Small Mobile */
      html.page-aplikasi section div[style*="grid-template-columns"][style*="minmax(200px"] {
        grid-template-columns: 1fr !important;
      }
      
      html.page-aplikasi section h3 {
        font-size: 1.125rem !important;
      }
      
      html.page-aplikasi section span[style*="display: inline-flex"] {
        font-size: 0.6875rem !important;
        padding: 3px 6px !important;
      }
    }

/* ===== faq.html ===== */
html.page-faq {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  
  /* Neutral Colors */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  
  /* Text Colors */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Container */
  --container-max: 1200px;
}
html.page-faq * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html.page-faq {
  scroll-behavior: smooth;
  font-size: 16px;
}
html.page-faq body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html.page-faq * {
  box-sizing: border-box;
}
html.page-faq img {
  max-width: 100%;
  height: auto;
}
html.page-faq main {
  overflow-x: hidden;
}
/* Accessibility */
html.page-faq .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}
html.page-faq .grid-94b1:focus {
  top: 0;
}
/* Modern Header */
html.page-faq .solid_3841 {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-base);
}
html.page-faq .solid_3841.card-medium-2236 {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
html.page-faq .medium-63c7 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
/* Logo */
html.page-faq .feature-e465 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.125rem;
  transition: opacity var(--transition-fast);
}
html.page-faq .feature-e465:hover {
  opacity: 0.8;
}
html.page-faq .shade-stale-75d4 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
}
html.page-faq .feature-e465 strong {
  font-size: 1.25rem;
  display: block;
}
html.page-faq .rough-782b {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
}
html.page-faq .rough-782b svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
/* Primary Navigation */
html.page-faq .purple-92db {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
}
html.page-faq .tag-5e1d {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
html.page-faq .tag-5e1d:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
html.page-faq .tag-5e1d.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.1);
  font-weight: 600;
}
/* Navigation Dropdown */
html.page-faq .badge_6ff5 {
  position: relative;
}
html.page-faq .filter_cb4c {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
html.page-faq .filter_cb4c:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
html.page-faq .module_steel_5d9b {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
html.page-faq .badge_6ff5.fn-active-815d .module_steel_5d9b, html.page-faq .filter_cb4c[aria-expanded="true"] .module_steel_5d9b {
  transform: rotate(180deg);
}
html.page-faq .filter_cb4c svg {
  transition: transform var(--transition-fast);
}
html.page-faq .filter_cb4c[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
html.page-faq .bright_2644 {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-sm);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: 1000;
}
html.page-faq .filter_cb4c[aria-expanded="true"] + .bright_2644 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.page-faq .footer_10e5 {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
html.page-faq .footer_10e5:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
/* Header Actions */
html.page-faq .modal-35b9 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
html.page-faq .selected_69d7 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.3);
  white-space: nowrap;
}
html.page-faq .selected_69d7:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 124, 102, 0.4);
}
html.page-faq .selected_69d7 svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
/* Mobile Menu Toggle */
html.page-faq .form_bc76 {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
html.page-faq .form_bc76:hover {
  background: var(--neutral-100);
  border-radius: var(--radius-md);
}
html.page-faq .backdrop_soft_30f3 {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
}
html.page-faq .backdrop_soft_30f3, html.page-faq .backdrop_soft_30f3::before, html.page-faq .backdrop_soft_30f3::after {
  background: #000000;
  border-radius: 2px;
  transition: all var(--transition-base);
}
html.page-faq .backdrop_soft_30f3::before, html.page-faq .backdrop_soft_30f3::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 3px;
}
html.page-faq .backdrop_soft_30f3 {
  height: 3px;
}
html.page-faq .backdrop_soft_30f3::before {
  top: 0;
}
html.page-faq .backdrop_soft_30f3::after {
  bottom: 0;
}
html.page-faq .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {
  background: transparent;
}
html.page-faq .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {
  transform: rotate(45deg);
  top: 7.5px;
}
html.page-faq .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {
  transform: rotate(-45deg);
  bottom: 7.5px;
}
/* General Button Styles */
html.page-faq .texture-fff2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  border: 2px solid transparent;
  font-size: 1rem;
}
html.page-faq .hard_40d0 {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  box-shadow: var(--shadow-lg);
}
html.page-faq .hard_40d0:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
/* Footer */
html.page-faq .article_last_b8ed {
  background: var(--neutral-900);
  color: var(--neutral-300);
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  margin-top: var(--space-3xl);
}
html.page-faq .tiny-92f4 {
  max-width: var(--container-max);
  margin: 0 auto;
}
html.page-faq .panel_4d87 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
html.page-faq .overlay-2a56 h3 {
  color: white;
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
}
html.page-faq .overlay-2a56 p {
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}
html.page-faq .logo_soft_b26a h4 {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}
html.page-faq .complex_2ad4 {
  list-style: none;
  padding: 0;
}
html.page-faq .complex_2ad4 li {
  margin-bottom: var(--space-sm);
}
html.page-faq .complex_2ad4 a {
  color: var(--neutral-300);
  text-decoration: none;
  transition: color var(--transition-fast);
}
html.page-faq .complex_2ad4 a:hover {
  color: white;
}
html.page-faq .static_c25f {
  border-top: 1px solid var(--neutral-700);
  padding-top: var(--space-lg);
  text-align: center;
  font-size: 0.875rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
html.page-faq .primary_b5e4 {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}
html.page-faq .carousel-fixed-52a2 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
/* FAQ Page Specific Styles */
html.page-faq .backdrop-eaf7, html.page-faq .small_64f8 {
    background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
    color: white;
    padding: 80px 0 60px;
    margin-top: 70px;
  }
  
  html.page-faq .panel-west-f789, html.page-faq .right_f8ba {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  html.page-faq .backdrop-eaf7 h1, html.page-faq .logo_473d h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
  }
  
  html.page-faq .backdrop-eaf7 p, html.page-faq .logo_473d p {
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.95;
    line-height: 1.6;
  }
  
  html.page-faq .tertiary-a78e, html.page-faq .icon-bfdf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
  }
  
  html.page-faq .backdrop-orange-2494, html.page-faq .hot_3184 {
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }
  
  html.page-faq .orange-e284, html.page-faq .form-advanced-59ef {
    font-size: 32px;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;
  }
  
  html.page-faq .pagination_fc4b, html.page-faq .modal_action_d61b {
    font-size: 14px;
    opacity: 0.9;
  }
  
  html.page-faq .hot-8e5a, html.page-faq .surface_d830 {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-align: center;
  }
  
  html.page-faq .hot-8e5a img, html.page-faq .surface_d830 img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }
  
  html.page-faq .small-1ec4, html.page-faq .middle_7609 {
    background: white;
    padding: 8px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  html.page-faq .small-1ec4 input, html.page-faq .middle_7609 input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #1a202c;
    padding: 8px 0;
  }
  
  html.page-faq .small-1ec4 input::placeholder, html.page-faq .middle_7609 input::placeholder {
    color: #a0aec0;
  }
  
  html.page-faq .frame-lite-aaeb, html.page-faq .layout-basic-4fd7 {
    color: #0E7C66;
    font-size: 20px;
  }
  
  /* FAQ Categories */
  html.page-faq .content_hard_c0d5, html.page-faq .status-outer-f195 {
    padding: 60px 0 40px;
    background: #f8f9fa;
  }
  
  html.page-faq .content_down_60c9 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  html.page-faq .carousel_fluid_0d3e, html.page-faq .over-3734 {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    overflow-x: auto;
    padding-bottom: 10px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  html.page-faq .hero_lower_726a, html.page-faq .text_static_8dad {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 600;
    color: #4a5568;
  }
  
  html.page-faq .hero_lower_726a:hover, html.page-faq .hero_lower_726a.fn-active-815d, html.page-faq .text_static_8dad:hover, html.page-faq .text_static_8dad.avatar_72cc {
    background: #0E7C66;
    border-color: #0E7C66;
    color: white;
  }
  
  html.page-faq .accent_4374, html.page-faq .slider_hard_2dd0 {
    margin-bottom: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  html.page-faq .caption_faab, html.page-faq .input-01a8 {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #0E7C66;
  }
  
  html.page-faq .gradient-thick-84b6, html.page-faq .summary-e8b3 {
    font-size: 36px;
    background: linear-gradient(135deg, #0E7C66, #0A5C4C);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: white;
  }
  
  html.page-faq .caption_faab h2, html.page-faq .input-01a8 h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1a202c;
    margin: 0;
  }
  
  html.page-faq .top-7c43, html.page-faq .feature-8c49 {
    background: white;
    padding: 25px 30px;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  html.page-faq .top-7c43:hover, html.page-faq .feature-8c49:hover {
    border-color: #0E7C66;
    box-shadow: 0 4px 12px rgba(14, 124, 102, 0.15);
  }
  
  html.page-faq .photo_14b4, html.page-faq .header-wide-e36a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 19px;
    font-weight: 600;
    color: #1a202c;
    gap: 20px;
  }
  
  html.page-faq .footer-3b11, html.page-faq .clean_e8da {
    font-size: 24px;
    color: #0E7C66;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  
  html.page-faq .top-7c43.fn-active-815d .footer-3b11, html.page-faq .feature-8c49.avatar_72cc .clean_e8da {
    transform: rotate(180deg);
  }
  
  html.page-faq .text-glass-8d0a, html.page-faq .article-50ac {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    color: #4a5568;
    font-size: 16px;
    line-height: 1.8;
  }
  
  html.page-faq .top-7c43.fn-active-815d .text-glass-8d0a, html.page-faq .feature-8c49.avatar_72cc .article-50ac {
    max-height: 1000px;
    margin-top: 20px;
  }
  
  html.page-faq .text-glass-8d0a p, html.page-faq .article-50ac p {
    margin-bottom: 15px;
  }
  
  html.page-faq .text-glass-8d0a ul, html.page-faq .text-glass-8d0a ol, html.page-faq .article-50ac ul, html.page-faq .article-50ac ol {
    margin: 15px 0;
    padding-left: 25px;
  }
  
  html.page-faq .text-glass-8d0a li, html.page-faq .article-50ac li {
    margin-bottom: 8px;
  }
  
  html.page-faq .text-glass-8d0a a, html.page-faq .article-50ac a {
    color: #0E7C66;
    text-decoration: none;
    font-weight: 600;
  }
  
  html.page-faq .text-glass-8d0a a:hover, html.page-faq .article-50ac a:hover {
    text-decoration: underline;
  }
  
  html.page-faq .text-glass-8d0a strong, html.page-faq .article-50ac strong {
    color: #1a202c;
  }
  
  html.page-faq .thumbnail_focused_5c24, html.page-faq .gradient_383f {
    background: #e6f2ff;
    border-left: 4px solid #3182ce;
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 8px;
  }
  
  html.page-faq .dropdown_north_93fa, html.page-faq .section-4792 {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 8px;
  }
  
  html.page-faq .under-47b0, html.page-faq .box-plasma-b13c {
    background: #d1fae5;
    border-left: 4px solid #48bb78;
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 8px;
  }
  
  /* Still Need Help Section */
  html.page-faq .active-silver-106a, html.page-faq .list_83bb {
    background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
  }
  
  html.page-faq .active-silver-106a h2, html.page-faq .list_83bb h2 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 20px;
  }
  
  html.page-faq .active-silver-106a p, html.page-faq .list_83bb p {
    font-size: 18px;
    margin-bottom: 35px;
    opacity: 0.95;
  }
  
  html.page-faq .component-2ad7, html.page-faq .copper-6aff {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  html.page-faq .notification_5a68, html.page-faq .item_warm_e450 {
    background: rgba(255, 255, 255, 0.15);
    padding: 35px 25px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
  }
  
  html.page-faq .notification_5a68:hover, html.page-faq .item_warm_e450:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
  }
  
  html.page-faq .nav-dc9b, html.page-faq .summary_cc11 {
    font-size: 48px;
    margin-bottom: 20px;
  }
  
  html.page-faq .notification_5a68 h3, html.page-faq .item_warm_e450 h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  
  html.page-faq .notification_5a68 p, html.page-faq .item_warm_e450 p {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  html.page-faq .gallery-short-5138, html.page-faq .cool-9abd {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white;
    background: transparent;
    color: white;
  }
  
  html.page-faq .gallery-short-5138:hover, html.page-faq .cool-9abd:hover {
    background: white;
    color: #0E7C66;
  }
  
  /* Header Actions Buttons */
  html.page-faq .progress-red-bf47 {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  html.page-faq .element_f767, html.page-faq .lite_4f64 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  
  html.page-faq .element_f767 {
    background: transparent;
    color: #1a202c;
    border: 2px solid #e2e8f0;
  }
  
  html.page-faq .element_f767:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
  }
  
  html.page-faq .lite_4f64 {
    background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
    color: white;
    border: 2px solid transparent;
  }
  
  html.page-faq .lite_4f64:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 124, 102, 0.4);
  }
  
  html.page-faq .element_f767 svg, html.page-faq .lite_4f64 svg {
    width: 16px;
    height: 16px;
  }
  
  html.page-faq .background_prev_d634 {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  
  html.page-faq .badge-6c3c {
    width: 24px;
    height: 3px;
    background: #1a202c;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  /* Footer */
  html.page-faq .background_hot_61fb {
    background: #1a202c;
    color: #a0aec0;
    padding: 50px 0 30px;
  }
  
  html.page-faq .preview-in-bb44 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 30px;
  }
  
  html.page-faq .focus_brown_ee67 h3 {
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  html.page-faq .focus_brown_ee67 p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
  }
  
  html.page-faq .pagination-51a6 {
    list-style: none;
    padding: 0;
  }
  
  html.page-faq .pagination-51a6 li {
    margin-bottom: 12px;
  }
  
  html.page-faq .pagination-51a6 a {
    color: #a0aec0;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
  }
  
  html.page-faq .pagination-51a6 a:hover {
    color: white;
  }
  
  html.page-faq .last-9fc9 {
    border-top: 1px solid #2d3748;
    padding-top: 25px;
    text-align: center;
    font-size: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 30px 0;
  }
  
  html.page-faq .breadcrumb-6b2f {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
  }
  
  html.page-faq .feature_fluid_12cc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }
  
  /* Mobile Responsiveness */
  @media (min-width: 1200px) {
    html.page-faq body {
      padding: 0;
    }
    
    html.page-faq .accent_4374, html.page-faq .slider_hard_2dd0 {
      padding-left: 30px;
      padding-right: 30px;
    }
  }
  @media (max-width: 968px) {
    html.page-faq .medium-63c7 {
      flex-wrap: wrap;
      justify-content: space-between;
      padding: var(--space-sm) var(--space-md);
    }
    
    html.page-faq .accent_4374, html.page-faq .slider_hard_2dd0 {
      padding-left: 20px;
      padding-right: 20px;
    }
    html.page-faq .feature-e465 {
      flex: 0 0 auto;
      order: 1;
    }
    html.page-faq .shade-stale-75d4 {
      width: 40px;
      height: 40px;
    }
    html.page-faq .feature-e465 strong {
      font-size: 1rem;
    }
    html.page-faq .rough-782b {
      font-size: 0.625rem;
      padding: 3px 6px;
    }
    html.page-faq .modal-35b9 {
      flex: 0 0 auto;
      order: 2;
      gap: var(--space-xs);
    }
    html.page-faq .purple-92db {
      width: 100%;
      order: 3;
      flex-direction: column;
      display: none;
      background: white;
      padding: var(--space-md) 0;
      border-top: 1px solid var(--neutral-200);
      animation: slideDown-page-faq var(--transition-base) ease-out;
    }
    html.page-faq .purple-92db.over_d418 {
      display: flex;
    }
    @keyframes slideDown-page-faq {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* Hide desktop nav items on mobile */
    html.page-faq .purple-92db .tag-5e1d, html.page-faq .purple-92db .badge_6ff5 {
      width: 100%;
    }
    html.page-faq .tag-5e1d, html.page-faq .filter_cb4c {
      width: 100%;
      text-align: left;
      justify-content: space-between;
      padding: var(--space-md);
    }
    html.page-faq .badge_6ff5 {
      width: 100%;
    }
    html.page-faq .bright_2644 {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      padding-left: var(--space-lg);
      margin-top: var(--space-xs);
      background: var(--neutral-50);
      border-radius: var(--radius-sm);
      display: none;
    }
    html.page-faq .badge_6ff5.fn-active-815d .bright_2644, html.page-faq .filter_cb4c[aria-expanded="true"] + .bright_2644 {
      display: block;
    }
    html.page-faq .form_bc76 {
      display: flex !important;
      align-items: center;
      justify-content: center;
      padding: 10px;
      min-width: 44px;
      min-height: 44px;
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast);
    }
    html.page-faq .form_bc76:hover {
      background: var(--neutral-100);
    }
    html.page-faq .form_bc76:active {
      background: var(--neutral-200);
    }
    html.page-faq .selected_69d7 {
      padding: 8px 12px;
      font-size: 0.8125rem;
      min-width: auto;
    }
    html.page-faq .selected_69d7 svg {
      width: 16px;
      height: 16px;
    }
    html.page-faq .paragraph_ab28 {
      display: none;
    }
    html.page-faq .outer-9b31 {
      display: inline;
    }
  
    html.page-faq .panel-west-f789, html.page-faq .right_f8ba {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    
    html.page-faq .hot-8e5a, html.page-faq .surface_d830 {
      order: -1;
    }
    
    html.page-faq .backdrop-eaf7 h1, html.page-faq .logo_473d h1 {
      font-size: 36px;
    }
    
    html.page-faq .tertiary-a78e, html.page-faq .icon-bfdf {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    html.page-faq .component-2ad7, html.page-faq .copper-6aff {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    
    html.page-faq .panel_4d87, html.page-faq .preview-in-bb44 {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    
    html.page-faq .caption_faab h2, html.page-faq .input-01a8 h2 {
      font-size: 28px;
    }
    
    html.page-faq .gradient-thick-84b6, html.page-faq .summary-e8b3 {
      width: 60px;
      height: 60px;
      font-size: 30px;
    }
  }
  
  @media (max-width: 768px) {
    html.page-faq .backdrop-eaf7, html.page-faq .small_64f8 {
      padding: 60px 0 40px;
      margin-top: 60px;
    }
    
    html.page-faq .backdrop-eaf7 h1, html.page-faq .logo_473d h1 {
      font-size: 32px;
    }
    
    html.page-faq .backdrop-eaf7 p, html.page-faq .logo_473d p {
      font-size: 18px;
    }
    
    html.page-faq .photo_14b4, html.page-faq .header-wide-e36a {
      font-size: 17px;
    }
    
    html.page-faq .text-glass-8d0a, html.page-faq .article-50ac {
      font-size: 15px;
    }
    
    html.page-faq .active-silver-106a h2, html.page-faq .list_83bb h2 {
      font-size: 32px;
    }
    
    html.page-faq .article_last_b8ed {
      padding: var(--space-2xl) var(--space-md) var(--space-xl);
    }
  }
  
  @media (max-width: 480px) {
    html.page-faq .panel-west-f789, html.page-faq .right_f8ba, html.page-faq .content_down_60c9 {
      padding: 0 20px;
    }
    
    html.page-faq .logo_473d h1 {
      font-size: 28px;
    }
    
    html.page-faq .input-01a8 {
      flex-direction: column;
      align-items: flex-start;
    }
    
    html.page-faq .feature-8c49 {
      padding: 20px 20px;
    }
    
    html.page-faq .header-wide-e36a {
      font-size: 16px;
    }
    
    html.page-faq .list_83bb h2 {
      font-size: 28px;
    }
    
    html.page-faq * {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }

/* ===== instal.html ===== */
/* Modern CSS Variables - 2026 */
html.page-instal {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  
  /* Neutral Colors */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  
  /* Text Colors */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-instal * {
  box-sizing: border-box;
}
html.page-instal {
  scroll-behavior: smooth;
  font-size: 16px;
}
html.page-instal body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html.page-instal img {
  max-width: 100%;
  height: auto;
}
/* Modern Header Styles */
html.page-instal .solid_3841 {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all var(--transition-base);
}
html.page-instal .solid_3841.card-medium-2236 {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}
html.page-instal .medium-63c7 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
html.page-instal .feature-e465 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}
html.page-instal .shade-stale-75d4 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
}
html.page-instal .feature-e465 strong {
  font-size: 1.125rem;
}
html.page-instal .rough-782b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: var(--space-xs);
}
html.page-instal .purple-92db {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  justify-content: center;
}
html.page-instal .tag-5e1d, html.page-instal .filter_cb4c {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html.page-instal .tag-5e1d:hover, html.page-instal .filter_cb4c:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
html.page-instal .tag-5e1d.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
  font-weight: 600;
}
html.page-instal .badge_6ff5 {
  position: relative;
}
html.page-instal .filter_cb4c {
  display: inline-flex;
  align-items: center;
}
html.page-instal .module_steel_5d9b {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
html.page-instal .badge_6ff5.fn-active-815d .module_steel_5d9b, html.page-instal .filter_cb4c[aria-expanded="true"] .module_steel_5d9b {
  transform: rotate(180deg);
}
html.page-instal .bright_2644 {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: 1000;
}
html.page-instal .badge_6ff5:hover .bright_2644 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.page-instal .footer_10e5 {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.875rem;
}
html.page-instal .footer_10e5:hover {
  background: var(--neutral-50);
  color: var(--primary);
}
html.page-instal .modal-35b9 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
html.page-instal .selected_69d7 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
}
html.page-instal .selected_69d7:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
html.page-instal .selected_69d7 svg {
  width: 18px;
  height: 18px;
}
html.page-instal .outer-9b31 {
  display: none;
}
html.page-instal .form_bc76 {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--text-primary);
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
html.page-instal .backdrop_soft_30f3 {
  width: 24px;
  height: 3px;
  background: #000000;
  border-radius: 2px;
  position: relative;
  transition: all var(--transition-base);
}
html.page-instal .backdrop_soft_30f3, html.page-instal .backdrop_soft_30f3::before, html.page-instal .backdrop_soft_30f3::after {
  background: #000000;
  border-radius: 2px;
  transition: all var(--transition-base);
}
html.page-instal .backdrop_soft_30f3::before, html.page-instal .backdrop_soft_30f3::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 3px;
}
html.page-instal .backdrop_soft_30f3::before {
  top: -7px;
}
html.page-instal .backdrop_soft_30f3::after {
  top: 7px;
}
html.page-instal .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {
  background: transparent;
}
html.page-instal .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {
  transform: rotate(45deg);
  top: 0;
}
html.page-instal .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {
  transform: rotate(-45deg);
  top: 0;
}
  
  html.page-instal header.breadcrumb_wood_1ffe {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
  }
  
  html.page-instal main {
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Installation page specific styles */
  html.page-instal .gas-535d {
    background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
    color: white;
    padding: 80px 0 60px;
    margin-top: 70px;
  }
  
  html.page-instal .right_f8ba {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  html.page-instal .logo_473d h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
  }
  
  html.page-instal .logo_473d p {
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.95;
    line-height: 1.6;
  }
  
  html.page-instal .label-1f5c {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
  }
  
  html.page-instal .hot_3184 {
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }
  
  html.page-instal .form-advanced-59ef {
    font-size: 32px;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;
  }
  
  html.page-instal .modal_action_d61b {
    font-size: 14px;
    opacity: 0.9;
  }
  
  html.page-instal .surface_d830 {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-align: center;
  }
  
  html.page-instal .surface_d830 img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }
  
  html.page-instal .south_4364 {
    display: flex;
    gap: 15px;
    margin-top: 30px;
  }
  
  html.page-instal .cool-9abd {
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
  
  html.page-instal .filter-dirty-f4dc {
    background: white;
    color: #0E7C66;
  }
  
  html.page-instal .filter-dirty-f4dc:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  html.page-instal .highlight-next-db11 {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
  }
  
  html.page-instal .highlight-next-db11:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  
  /* Prerequisites Section */
  html.page-instal .list_lower_0c18 {
    padding: 60px 0;
    background: #f8f9fa;
  }
  
  html.page-instal .content_down_60c9 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  html.page-instal .frame_8693 {
    text-align: center;
    margin-bottom: 50px;
  }
  
  html.page-instal .frame_8693 h2 {
    font-size: 38px;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 15px;
  }
  
  html.page-instal .frame_8693 p {
    font-size: 18px;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
  }
  
  html.page-instal .blue_39d9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  
  html.page-instal .white-2ac9 {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
  }
  
  html.page-instal .block-4498 {
    font-size: 48px;
    margin-bottom: 20px;
  }
  
  html.page-instal .white-2ac9 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 15px;
  }
  
  html.page-instal .white-2ac9 p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.6;
  }
  
  html.page-instal .content_30ee {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 20px 25px;
    margin-top: 30px;
    border-radius: 8px;
  }
  
  html.page-instal .content_30ee strong {
    color: #856404;
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
  }
  
  html.page-instal .content_30ee p {
    color: #856404;
    margin: 0;
    font-size: 16px;
  }
  
  /* Installation Steps */
  html.page-instal .container-pro-cd9a {
    padding: 60px 0;
    background: white;
  }
  
  html.page-instal .banner_b0d4 {
    background: linear-gradient(to right, #f8f9fa, white);
    padding: 40px;
    border-radius: 16px;
    margin-bottom: 25px;
    border-left: 5px solid #0E7C66;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 25px;
    align-items: start;
  }
  
  html.page-instal .backdrop-cbbe {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0E7C66, #0A5C4C);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    flex-shrink: 0;
  }
  
  html.page-instal .shadow-stale-6393 h3 {
    font-size: 26px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 15px;
  }
  
  html.page-instal .shadow-stale-6393 p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 15px;
  }
  
  html.page-instal .shadow-stale-6393 ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
  }
  
  html.page-instal .shadow-stale-6393 li {
    padding: 10px 0 10px 35px;
    position: relative;
    font-size: 16px;
    color: #4a5568;
  }
  
  html.page-instal .shadow-stale-6393 li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #48bb78;
    font-weight: 700;
    font-size: 20px;
  }
  
  html.page-instal .cool_fd77 {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    margin: 15px 0;
    overflow-x: auto;
  }
  
  html.page-instal .carousel-black-068f {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #d1fae5;
    color: #065f46;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px;
  }
  
  /* FAQ Section */
  html.page-instal .content_7f26 {
    padding: 60px 0;
    background: #f8f9fa;
  }
  
  html.page-instal .feature-8c49 {
    background: white;
    padding: 25px 30px;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  html.page-instal .feature-8c49:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  html.page-instal .header-wide-e36a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
  }
  
  html.page-instal .clean_e8da {
    font-size: 24px;
    color: #0E7C66;
    transition: transform 0.3s ease;
  }
  
  html.page-instal .feature-8c49.avatar_72cc .clean_e8da {
    transform: rotate(180deg);
  }
  
  html.page-instal .article-50ac {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    color: #4a5568;
    font-size: 16px;
    line-height: 1.7;
  }
  
  html.page-instal .feature-8c49.avatar_72cc .article-50ac {
    max-height: 500px;
    margin-top: 15px;
  }
  
  /* CTA Section */
  html.page-instal .wrapper_f8c8 {
    padding: 80px 0;
    background: linear-gradient(135deg, #0E7C66 0%, #0A5C4C 100%);
    color: white;
    text-align: center;
  }
  
  html.page-instal .wrapper_f8c8 h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
  }
  
  html.page-instal .wrapper_f8c8 p {
    font-size: 20px;
    margin-bottom: 35px;
    opacity: 0.95;
  }
  
  /* Footer */
  html.page-instal .background_hot_61fb {
    background: #1a202c;
    color: #a0aec0;
    padding: 50px 0 30px;
  }
  
  html.page-instal .preview-in-bb44 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 30px;
  }
  
  html.page-instal .focus_brown_ee67 h3 {
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  html.page-instal .focus_brown_ee67 p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
  }
  
  html.page-instal .pagination-51a6 {
    list-style: none;
    padding: 0;
  }
  
  html.page-instal .pagination-51a6 li {
    margin-bottom: 12px;
  }
  
  html.page-instal .pagination-51a6 a {
    color: #a0aec0;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
  }
  
  html.page-instal .pagination-51a6 a:hover {
    color: white;
  }
  
  html.page-instal .last-9fc9 {
    border-top: 1px solid #2d3748;
    padding-top: 25px;
    text-align: center;
    font-size: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 30px 0;
  }
  
  html.page-instal .breadcrumb-6b2f {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
  }
  
  html.page-instal .feature_fluid_12cc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }
  
  /* Mobile Responsiveness */
  @media (max-width: 968px) {
    html.page-instal .right_f8ba {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    
    html.page-instal .surface_d830 {
      order: -1;
    }
    
    html.page-instal .logo_473d h1 {
      font-size: 36px;
    }
    
    html.page-instal .label-1f5c {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    html.page-instal .banner_b0d4 {
      grid-template-columns: 60px 1fr;
      gap: 20px;
      padding: 30px 20px;
    }
    
    html.page-instal .backdrop-cbbe {
      width: 60px;
      height: 60px;
      font-size: 24px;
    }
    
    html.page-instal .blue_39d9 {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    
    html.page-instal .preview-in-bb44 {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }
  
  @media (max-width: 768px) {
    html.page-instal .gas-535d {
      padding: 60px 0 40px;
      margin-top: 60px;
    }
    
    html.page-instal .logo_473d h1 {
      font-size: 32px;
    }
    
    html.page-instal .logo_473d p {
      font-size: 18px;
    }
    
    html.page-instal .frame_8693 h2 {
      font-size: 32px;
    }
    
    html.page-instal .south_4364 {
      flex-direction: column;
    }
    
    html.page-instal .cool-9abd {
      width: 100%;
      justify-content: center;
    }
    
    html.page-instal .shadow-stale-6393 h3 {
      font-size: 22px;
    }
    
    html.page-instal .shadow-stale-6393 p, html.page-instal .shadow-stale-6393 li {
      font-size: 16px;
    }
  }
  
  @media (max-width: 480px) {
    html.page-instal .right_f8ba, html.page-instal .content_down_60c9 {
      padding: 0 20px;
    }
    
    html.page-instal .logo_473d h1 {
      font-size: 28px;
    }
    
    html.page-instal .banner_b0d4 {
      grid-template-columns: 45px 1fr;
      gap: 15px;
      padding: 25px 15px;
    }
    
    html.page-instal .backdrop-cbbe {
      width: 45px;
      height: 45px;
      font-size: 20px;
    }
    
    html.page-instal .shadow-stale-6393 h3 {
      font-size: 20px;
    }
    
    html.page-instal .frame_8693 h2 {
      font-size: 28px;
    }
    
    html.page-instal .wrapper_f8c8 h2 {
      font-size: 32px;
    }
    
    html.page-instal * {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }
/* Mobile Responsive Styles */
@media (max-width: 968px) {
  html.page-instal .medium-63c7 {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
  }
  html.page-instal .feature-e465 {
    flex: 0 0 auto;
    order: 1;
  }
  html.page-instal .shade-stale-75d4 {
    width: 40px;
    height: 40px;
  }
  html.page-instal .feature-e465 strong {
    font-size: 1rem;
  }
  html.page-instal .rough-782b {
    font-size: 0.625rem;
    padding: 3px 6px;
  }
  html.page-instal .modal-35b9 {
    flex: 0 0 auto;
    order: 2;
    gap: var(--space-xs);
  }
  html.page-instal .purple-92db {
    width: 100%;
    order: 3;
    flex-direction: column;
    display: none;
    background: white;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--neutral-200);
    animation: slideDown-page-instal var(--transition-base) ease-out;
  }
  html.page-instal .purple-92db.over_d418 {
    display: flex;
  }
  @keyframes slideDown-page-instal {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  html.page-instal .purple-92db .tag-5e1d, html.page-instal .purple-92db .badge_6ff5 {
    width: 100%;
  }
  html.page-instal .tag-5e1d, html.page-instal .filter_cb4c {
    width: 100%;
    text-align: left;
    justify-content: space-between;
    padding: var(--space-md);
  }
  html.page-instal .badge_6ff5 {
    width: 100%;
  }
  html.page-instal .bright_2644 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
    background: var(--neutral-50);
    border-radius: var(--radius-sm);
    display: none;
  }
  html.page-instal .badge_6ff5.fn-active-815d .bright_2644, html.page-instal .filter_cb4c[aria-expanded="true"] + .bright_2644 {
    display: block;
  }
  html.page-instal .form_bc76 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
  }
  html.page-instal .form_bc76:hover {
    background: var(--neutral-100);
  }
  html.page-instal .form_bc76:active {
    background: var(--neutral-200);
  }
  html.page-instal .selected_69d7 {
    padding: 8px 12px;
    font-size: 0.8125rem;
    min-width: auto;
  }
  html.page-instal .selected_69d7 svg {
    width: 16px;
    height: 16px;
  }
  html.page-instal .paragraph_ab28 {
    display: none;
  }
  html.page-instal .outer-9b31 {
    display: inline;
  }
}
@media (max-width: 480px) {
  html.page-instal .medium-63c7 {
    padding: var(--space-xs) var(--space-sm);
  }
}
/* Footer Styles */
html.page-instal .article_last_b8ed {
  background: var(--neutral-900);
  color: var(--neutral-300);
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  margin-top: var(--space-3xl);
}
html.page-instal .tiny-92f4 {
  max-width: 1200px;
  margin: 0 auto;
}
html.page-instal .panel_4d87 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
html.page-instal .logo_soft_b26a {
  min-width: 0;
}
html.page-instal .summary_dirty_d157 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: white;
}
html.page-instal .slow_7b1e {
  color: var(--neutral-400);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
html.page-instal .tabs-top-0cfd div {
  margin-bottom: var(--space-xs);
  font-size: 0.875rem;
}
html.page-instal .complex_2ad4 {
  list-style: none;
  padding: 0;
  margin: 0;
}
html.page-instal .complex_2ad4 li {
  margin-bottom: var(--space-sm);
}
html.page-instal .complex_2ad4 a {
  color: var(--neutral-400);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-instal .complex_2ad4 a:hover {
  color: white;
}
html.page-instal .static_c25f {
  border-top: 1px solid var(--neutral-700);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  text-align: center;
  font-size: 0.875rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
html.page-instal .notice-029d {
  display: flex;
  gap: var(--space-lg);
}
html.page-instal .notice-029d a {
  color: var(--neutral-400);
  text-decoration: none;
  transition: color var(--transition-fast);
}
html.page-instal .notice-029d a:hover {
  color: white;
}
@media (max-width: 968px) {
  html.page-instal .panel_4d87 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}
@media (max-width: 640px) {
  html.page-instal .panel_4d87 {
    grid-template-columns: 1fr;
  }
  
  html.page-instal .static_c25f {
    flex-direction: column;
    text-align: center;
  }
}

/* ===== pembaruan.html ===== */
/* Modern CSS Variables - 2026 */
html.page-pembaruan {
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-pembaruan * {
  box-sizing: border-box;
}
html.page-pembaruan {
  scroll-behavior: smooth;
  font-size: 16px;
}
html.page-pembaruan body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html.page-pembaruan img {
  max-width: 100%;
  height: auto;
}
  
  html.page-pembaruan header.breadcrumb_wood_1ffe {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
  }
  
  html.page-pembaruan main {
    position: relative !important;
    overflow: visible !important;
  }
  /* Footer legal links - element selector survives CMS obfuscation */
  html.page-pembaruan footer > div > div:last-child > div:last-child a {
    color: #808080 !important;
    text-decoration: none !important;
  }
  html.page-pembaruan footer > div > div:last-child > div:last-child a:hover {
    color: #ffffff !important;
  }
/* Modern Header Styles */
html.page-pembaruan .solid_3841 {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all var(--transition-base);
}
html.page-pembaruan .solid_3841.card-medium-2236 {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}
html.page-pembaruan .medium-63c7 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
html.page-pembaruan .feature-e465 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}
html.page-pembaruan .shade-stale-75d4 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
}
html.page-pembaruan .feature-e465 strong {
  font-size: 1.125rem;
}
html.page-pembaruan .rough-782b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: var(--space-xs);
}
html.page-pembaruan .purple-92db {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  justify-content: center;
}
html.page-pembaruan .tag-5e1d, html.page-pembaruan .filter_cb4c {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html.page-pembaruan .tag-5e1d:hover, html.page-pembaruan .filter_cb4c:hover {
  color: var(--primary);
  background: var(--neutral-50);
}
html.page-pembaruan .tag-5e1d.fn-active-815d {
  color: var(--primary);
  background: rgba(14, 124, 102, 0.08);
  font-weight: 600;
}
html.page-pembaruan .badge_6ff5 {
  position: relative;
}
html.page-pembaruan .filter_cb4c {
  display: inline-flex;
  align-items: center;
}
html.page-pembaruan .module_steel_5d9b {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
html.page-pembaruan .badge_6ff5.fn-active-815d .module_steel_5d9b, html.page-pembaruan .filter_cb4c[aria-expanded="true"] .module_steel_5d9b {
  transform: rotate(180deg);
}
html.page-pembaruan .bright_2644 {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: 1000;
}
html.page-pembaruan .badge_6ff5:hover .bright_2644 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.page-pembaruan .footer_10e5 {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 0.875rem;
}
html.page-pembaruan .footer_10e5:hover {
  background: var(--neutral-50);
  color: var(--primary);
}
html.page-pembaruan .modal-35b9 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
html.page-pembaruan .selected_69d7 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
}
html.page-pembaruan .selected_69d7:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
html.page-pembaruan .selected_69d7 svg {
  width: 18px;
  height: 18px;
}
html.page-pembaruan .outer-9b31 {
  display: none;
}
html.page-pembaruan .form_bc76 {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--text-primary);
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
html.page-pembaruan .backdrop_soft_30f3 {
  width: 24px;
  height: 3px;
  background: #000000;
  border-radius: 2px;
  position: relative;
  transition: all var(--transition-base);
}
html.page-pembaruan .backdrop_soft_30f3, html.page-pembaruan .backdrop_soft_30f3::before, html.page-pembaruan .backdrop_soft_30f3::after {
  background: #000000;
  border-radius: 2px;
  transition: all var(--transition-base);
}
html.page-pembaruan .backdrop_soft_30f3::before, html.page-pembaruan .backdrop_soft_30f3::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 3px;
}
html.page-pembaruan .backdrop_soft_30f3::before {
  top: -7px;
}
html.page-pembaruan .backdrop_soft_30f3::after {
  top: 7px;
}
html.page-pembaruan .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {
  background: transparent;
}
html.page-pembaruan .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {
  transform: rotate(45deg);
  top: 0;
}
html.page-pembaruan .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {
  transform: rotate(-45deg);
  top: 0;
}
/* Footer Styles */
html.page-pembaruan .article_last_b8ed {
  background: var(--neutral-900);
  color: var(--neutral-300);
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  margin-top: var(--space-3xl);
}
html.page-pembaruan .tiny-92f4 {
  max-width: 1200px;
  margin: 0 auto;
}
html.page-pembaruan .panel_4d87 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
html.page-pembaruan .logo_soft_b26a {
  min-width: 0;
}
html.page-pembaruan .summary_dirty_d157 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: white;
}
html.page-pembaruan .slow_7b1e {
  color: var(--neutral-400);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
html.page-pembaruan .tabs-top-0cfd div {
  margin-bottom: var(--space-xs);
  font-size: 0.875rem;
}
html.page-pembaruan .complex_2ad4 {
  list-style: none;
  padding: 0;
  margin: 0;
}
html.page-pembaruan .complex_2ad4 li {
  margin-bottom: var(--space-sm);
}
html.page-pembaruan .complex_2ad4 a {
  color: var(--neutral-400);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: 0.9375rem;
}
html.page-pembaruan .complex_2ad4 a:hover {
  color: white;
}
html.page-pembaruan .static_c25f {
  border-top: 1px solid var(--neutral-700);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  text-align: center;
  font-size: 0.875rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
html.page-pembaruan .notice-029d {
  display: flex;
  gap: var(--space-lg);
}
html.page-pembaruan .notice-029d a {
  color: var(--neutral-400);
  text-decoration: none;
  transition: color var(--transition-fast);
}
html.page-pembaruan .notice-029d a:hover {
  color: white;
}
/* Mobile Responsive */
@media (max-width: 968px) {
  html.page-pembaruan .medium-63c7 {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
  }
  html.page-pembaruan .feature-e465 {
    flex: 0 0 auto;
    order: 1;
  }
  html.page-pembaruan .shade-stale-75d4 {
    width: 40px;
    height: 40px;
  }
  html.page-pembaruan .feature-e465 strong {
    font-size: 1rem;
  }
  html.page-pembaruan .rough-782b {
    font-size: 0.625rem;
    padding: 3px 6px;
  }
  html.page-pembaruan .modal-35b9 {
    flex: 0 0 auto;
    order: 2;
    gap: var(--space-xs);
  }
  html.page-pembaruan .purple-92db {
    width: 100%;
    order: 3;
    flex-direction: column;
    display: none;
    background: white;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--neutral-200);
    animation: slideDown-page-pembaruan var(--transition-base) ease-out;
  }
  html.page-pembaruan .purple-92db.over_d418 {
    display: flex;
  }
  @keyframes slideDown-page-pembaruan {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  html.page-pembaruan .purple-92db .tag-5e1d, html.page-pembaruan .purple-92db .badge_6ff5 {
    width: 100%;
  }
  html.page-pembaruan .tag-5e1d, html.page-pembaruan .filter_cb4c {
    width: 100%;
    text-align: left;
    justify-content: space-between;
    padding: var(--space-md);
  }
  html.page-pembaruan .badge_6ff5 {
    width: 100%;
  }
  html.page-pembaruan .bright_2644 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
    background: var(--neutral-50);
    border-radius: var(--radius-sm);
    display: none;
  }
  html.page-pembaruan .badge_6ff5.fn-active-815d .bright_2644, html.page-pembaruan .filter_cb4c[aria-expanded="true"] + .bright_2644 {
    display: block;
  }
  html.page-pembaruan .form_bc76 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
  }
  html.page-pembaruan .form_bc76:hover {
    background: var(--neutral-100);
  }
  html.page-pembaruan .form_bc76:active {
    background: var(--neutral-200);
  }
  html.page-pembaruan .selected_69d7 {
    padding: 8px 12px;
    font-size: 0.8125rem;
    min-width: auto;
  }
  html.page-pembaruan .selected_69d7 svg {
    width: 16px;
    height: 16px;
  }
  html.page-pembaruan .paragraph_ab28 {
    display: none;
  }
  html.page-pembaruan .outer-9b31 {
    display: inline;
  }
  html.page-pembaruan .panel_4d87 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}
@media (max-width: 640px) {
  html.page-pembaruan .panel_4d87 {
    grid-template-columns: 1fr;
  }
  
  html.page-pembaruan .static_c25f {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 480px) {
  html.page-pembaruan .medium-63c7 {
    padding: var(--space-xs) var(--space-sm);
  }
}


@media (max-width: 968px) {
      html.page-pembaruan .solid_4900 .content_down_60c9 > div[style*="grid-template-columns: 1fr 360px"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      html.page-pembaruan .solid_4900 .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-pembaruan .solid_4900 .logo-5dae {
        max-width: 320px;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 768px) {
      html.page-pembaruan .solid_4900 h1 {
        font-size: 2rem !important;
      }
      
      html.page-pembaruan .solid_4900 p {
        font-size: 1rem !important;
      }
      
      html.page-pembaruan .solid_4900 .logo-5dae {
        max-width: 280px;
      }
      
      html.page-pembaruan .solid_4900 .logo_473d div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
      }
    }
    
    @media (max-width: 480px) {
      html.page-pembaruan .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-pembaruan .solid_4900 .logo-5dae {
        max-width: 240px;
      }
      
      html.page-pembaruan .solid_4900 .logo-5dae img {
        padding: 1.5rem !important;
      }
    }


@media (max-width: 968px) {
      html.page-pembaruan section div[style*="display: flex"] {
        flex-direction: column !important;
      }
      
      html.page-pembaruan section div[style*="flex-shrink: 0"] {
        flex-shrink: 1 !important;
      }
    }
    
    @media (max-width: 768px) {
      /* Section padding */
      html.page-pembaruan section {
        padding: 2.5rem 0 !important;
      }
      
      /* Headings */
      html.page-pembaruan section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-pembaruan section h3 {
        font-size: 1.25rem !important;
      }
      
      html.page-pembaruan section h4 {
        font-size: 1.125rem !important;
      }
      
      /* Container padding */
      html.page-pembaruan .content_down_60c9, html.page-pembaruan section div[style*="max-width"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      
      /* All grid layouts to single column */
      html.page-pembaruan section div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }
      
      /* Card padding */
      html.page-pembaruan section div[style*="padding: 3rem"] {
        padding: 2rem !important;
      }
      
      html.page-pembaruan section div[style*="padding: 2.5rem"] {
        padding: 1.5rem !important;
      }
      
      /* Images responsive */
      html.page-pembaruan section img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Text overflow prevention */
      html.page-pembaruan section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      
      /* Lists */
      html.page-pembaruan ul {
        margin-left: 1rem !important;
      }
    }
    
    @media (max-width: 480px) {
      html.page-pembaruan section {
        padding: 2rem 0 !important;
      }
      
      html.page-pembaruan section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-pembaruan section p {
        font-size: 0.9375rem !important;
      }
      
      html.page-pembaruan .content_down_60c9, html.page-pembaruan section div[style*="max-width"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }
      
      html.page-pembaruan section div[style*="padding: 2rem"] {
        padding: 1.25rem !important;
      }
    }

/* ===== profile.html ===== */
/* Modern CSS Variables - 2026 */
html.page-profile {
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-profile * {
  box-sizing: border-box;
}
html.page-profile {
  scroll-behavior: smooth;
  font-size: 16px;
}
html.page-profile body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html.page-profile img {
  max-width: 100%;
  height: auto;
}
  
  html.page-profile header.breadcrumb_wood_1ffe {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
  }
  
  html.page-profile main {
    position: relative !important;
    overflow: visible !important;
  }
/* Skip Link for Accessibility */
html.page-profile .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
html.page-profile .grid-94b1:focus {
  top: 0;
}
/* Modern Header Styles */
html.page-profile .solid_3841 {position: sticky;top: 0;z-index: 1000;background: white;box-shadow: 0 2px 4px rgba(0,0,0,0.05);transition: all var(--transition-base);}
html.page-profile .solid_3841.card-medium-2236 {box-shadow: 0 4px 12px rgba(0,0,0,0.1);background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);}
html.page-profile .medium-63c7 {max-width: 1400px;margin: 0 auto;padding: var(--space-md) var(--space-lg);display: flex;align-items: center;justify-content: space-between;gap: var(--space-lg);}
html.page-profile .feature-e465 {display: flex;align-items: center;gap: var(--space-sm);text-decoration: none;color: var(--text-primary);font-weight: 700;font-size: 1.25rem;flex-shrink: 0;}
html.page-profile .shade-stale-75d4 {width: 48px;height: 48px;border-radius: var(--radius-md);}
html.page-profile .feature-e465 strong {font-size: 1.125rem;}
html.page-profile .rough-782b {display: inline-flex;align-items: center;gap: 4px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;padding: 4px 8px;border-radius: var(--radius-sm);font-size: 0.6875rem;font-weight: 600;margin-left: var(--space-xs);}
html.page-profile .purple-92db {display: flex;align-items: center;gap: var(--space-xs);flex: 1;justify-content: center;}
html.page-profile .tag-5e1d, html.page-profile .filter_cb4c {padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;font-weight: 500;border-radius: var(--radius-md);transition: all var(--transition-fast);background: none;border: none;cursor: pointer;font-size: 0.9375rem;display: inline-flex;align-items: center;gap: 4px;}
html.page-profile .tag-5e1d:hover, html.page-profile .filter_cb4c:hover {color: var(--primary);background: var(--neutral-50);}
html.page-profile .tag-5e1d.fn-active-815d {color: var(--primary);background: rgba(14, 124, 102, 0.08);font-weight: 600;}
html.page-profile .badge_6ff5 {position: relative;}
html.page-profile .module_steel_5d9b {width: 12px;height: 12px;transition: transform var(--transition-fast);}
html.page-profile .badge_6ff5.fn-active-815d .module_steel_5d9b {transform: rotate(180deg);}
html.page-profile .bright_2644 {position: absolute;top: 100%;left: 0;min-width: 200px;background: white;border-radius: var(--radius-md);box-shadow: var(--shadow-lg);padding: var(--space-sm);opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all var(--transition-base);z-index: 1000;}
html.page-profile .badge_6ff5:hover .bright_2644 {opacity: 1;visibility: visible;transform: translateY(0);}
html.page-profile .footer_10e5 {display: block;padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;border-radius: var(--radius-sm);transition: all var(--transition-fast);font-size: 0.875rem;}
html.page-profile .footer_10e5:hover {background: var(--neutral-50);color: var(--primary);}
html.page-profile .modal-35b9 {display: flex;align-items: center;gap: var(--space-sm);flex-shrink: 0;}
html.page-profile .selected_69d7 {display: inline-flex;align-items: center;gap: var(--space-xs);padding: 10px 20px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;text-decoration: none;border-radius: var(--radius-md);font-weight: 600;font-size: 0.9375rem;box-shadow: var(--shadow-sm);transition: all var(--transition-base);border: none;cursor: pointer;}
html.page-profile .selected_69d7:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);}
html.page-profile .selected_69d7 svg {width: 18px;height: 18px;}
html.page-profile .outer-9b31 {display: none;}
html.page-profile .form_bc76 {display: none;background: none;border: none;cursor: pointer;padding: var(--space-sm);width: 40px;height: 40px;}
html.page-profile .backdrop_soft_30f3 {width: 24px;height: 3px;background: #000;border-radius: 2px;position: relative;transition: all var(--transition-base);}
html.page-profile .backdrop_soft_30f3::before, html.page-profile .backdrop_soft_30f3::after {content: '';position: absolute;left: 0;width: 24px;height: 3px;background: #000;border-radius: 2px;transition: all var(--transition-base);}
html.page-profile .backdrop_soft_30f3::before {top: -7px;}
html.page-profile .backdrop_soft_30f3::after {top: 7px;}
html.page-profile .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {background: transparent;}
html.page-profile .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {transform: rotate(45deg);top: 0;}
html.page-profile .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {transform: rotate(-45deg);top: 0;}
/* Footer Styles */
html.page-profile .article_last_b8ed {background: var(--neutral-900);color: var(--neutral-300);padding: var(--space-3xl) var(--space-lg) var(--space-xl);margin-top: var(--space-3xl);}
html.page-profile .panel_4d87 {display: grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap: var(--space-2xl);margin-bottom: var(--space-2xl);max-width: 1200px;margin-left: auto;margin-right: auto;padding: 0 30px;}
html.page-profile .logo_soft_b26a {min-width: 0;}
html.page-profile .summary_dirty_d157 {font-size: 1.125rem;font-weight: 700;margin-bottom: var(--space-md);color: white;}
html.page-profile .slow_7b1e {color: var(--neutral-400);line-height: 1.6;margin-bottom: var(--space-md);}
html.page-profile .tabs-top-0cfd div {margin-bottom: var(--space-xs);font-size: 0.875rem;}
html.page-profile .complex_2ad4 {list-style: none;padding: 0;margin: 0;}
html.page-profile .complex_2ad4 li {margin-bottom: var(--space-sm);}
html.page-profile .complex_2ad4 a {color: var(--neutral-400);text-decoration: none;transition: color var(--transition-fast);font-size: 0.9375rem;}
html.page-profile .complex_2ad4 a:hover {color: white;}
html.page-profile .static_c25f {border-top: 1px solid var(--neutral-700);padding-top: var(--space-lg);display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: var(--space-md);font-size: 0.875rem;max-width: 1200px;margin: 0 auto;padding: var(--space-lg) 30px 0;}
html.page-profile .notice-029d {display: flex;gap: var(--space-lg);}
html.page-profile .notice-029d a {color: var(--neutral-400);text-decoration: none;transition: color var(--transition-fast);}
html.page-profile .notice-029d a:hover {color: white;}
/* Mobile Responsive */
@media (max-width: 968px) {
  html.page-profile .medium-63c7 {flex-wrap: wrap;padding: var(--space-sm) var(--space-md);}
  html.page-profile .feature-e465 {order: 1;}
  html.page-profile .shade-stale-75d4 {width: 40px;height: 40px;}
  html.page-profile .modal-35b9 {order: 2;}
  html.page-profile .purple-92db {width: 100%;order: 3;flex-direction: column;display: none;background: white;padding: var(--space-md) 0;border-top: 1px solid var(--neutral-200);align-items: flex-start;}
  html.page-profile .purple-92db.over_d418 {display: flex;}
  html.page-profile .tag-5e1d, html.page-profile .filter_cb4c {width: 100%;padding: var(--space-md);text-align: left;justify-content: flex-start;}
  html.page-profile .badge_6ff5 {width: 100%;}
  html.page-profile .bright_2644 {position: static;opacity: 1;visibility: visible;transform: none;box-shadow: none;padding-left: var(--space-lg);background: var(--neutral-50);display: none;}
  html.page-profile .badge_6ff5.fn-active-815d .bright_2644 {display: block;}
  html.page-profile .footer_10e5 {text-align: left;}
  html.page-profile .form_bc76 {display: flex !important;align-items: center;justify-content: center;}
  html.page-profile .selected_69d7 {padding: 8px 12px;font-size: 0.8125rem;}
  html.page-profile .paragraph_ab28 {display: none;}
  html.page-profile .outer-9b31 {display: inline;}
  html.page-profile .panel_4d87 {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px) {
  html.page-profile .panel_4d87 {grid-template-columns: 1fr;}
  html.page-profile .static_c25f {flex-direction: column;text-align: center;}
}


@media (max-width: 968px) {
      html.page-profile .solid_4900 .content_down_60c9 > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      html.page-profile .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-profile .logo-5dae {
        max-width: 300px;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 768px) {
      /* Profile cards: change from side-by-side to stacked */
      html.page-profile article[style*="grid-template-columns: 200px 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 2rem !important;
      }
      
      html.page-profile article[style*="grid-template-columns: 200px 1fr"] .title_bright_0c1e img {
        width: 150px !important;
        height: 150px !important;
        margin: 0 auto;
        display: block;
      }
      
      /* Fix minmax grids */
      html.page-profile section div[style*="minmax(250px"] {
        grid-template-columns: 1fr !important;
      }
      
      /* Ensure all images are responsive */
      html.page-profile section img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Reduce section padding */
      html.page-profile section[style*="padding: 4rem 0"] {
        padding: 2.5rem 0 !important;
      }
      
      /* Reduce heading sizes */
      html.page-profile section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-profile section h3 {
        font-size: 1.25rem !important;
      }
      
      /* Prevent text overflow */
      html.page-profile section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      
      /* Container padding */
      html.page-profile .content_down_60c9, html.page-profile section div[style*="max-width"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
    }
    
    @media (max-width: 480px) {
      html.page-profile .logo-5dae {
        max-width: 250px;
      }
      
      /* All minmax grids to single column */
      html.page-profile section div[style*="minmax("] {
        grid-template-columns: 1fr !important;
      }
      
      /* Profile cards: smaller photo */
      html.page-profile article[style*="grid-template-columns"] .title_bright_0c1e img {
        width: 120px !important;
        height: 120px !important;
      }
      
      /* Hero title smaller */
      html.page-profile .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-profile .solid_4900 p {
        font-size: 0.9375rem !important;
      }
      
      /* Tighter spacing */
      html.page-profile section {
        padding: 2rem 0 !important;
      }
      
      html.page-profile section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-profile section h3 {
        font-size: 1.125rem !important;
      }
      
      html.page-profile section p {
        font-size: 0.9375rem !important;
      }
      
      /* Increase container padding */
      html.page-profile .content_down_60c9, html.page-profile section div[style*="max-width"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }
      
      /* Profile cards: smaller padding */
      html.page-profile article[style*="grid-template-columns"] {
        padding: 1.5rem !important;
      }
    }


@media (max-width: 768px) {
          html.page-profile .grid_dark_7706 {
            grid-template-columns: 1fr !important;
            padding: 1.5rem !important;
            text-align: center;
          }
          
          html.page-profile .title_bright_0c1e img {
            margin: 0 auto 1.5rem !important;
          }
          
          html.page-profile .hidden-short-06be {
            justify-content: center;
          }
        }

/* ===== resmi.html ===== */
/* Modern CSS Variables - 2026 */
html.page-resmi {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  
  /* Neutral Colors */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  
  /* Text Colors */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-resmi * {
  box-sizing: border-box;
}
html.page-resmi {
  scroll-behavior: smooth;
  font-size: 16px;
}
html.page-resmi body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html.page-resmi img {
  max-width: 100%;
  height: auto;
}
/* Skip Link for Accessibility */
html.page-resmi .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
html.page-resmi .grid-94b1:focus {
  top: 0;
}
/* Modern Header Styles */
html.page-resmi .solid_3841 {position: sticky;top: 0;z-index: 1000;background: white;box-shadow: 0 2px 4px rgba(0,0,0,0.05);transition: all var(--transition-base);}
html.page-resmi .solid_3841.card-medium-2236 {box-shadow: 0 4px 12px rgba(0,0,0,0.1);background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);}
html.page-resmi .medium-63c7 {max-width: 1400px;margin: 0 auto;padding: var(--space-md) var(--space-lg);display: flex;align-items: center;justify-content: space-between;gap: var(--space-lg);}
html.page-resmi .feature-e465 {display: flex;align-items: center;gap: var(--space-sm);text-decoration: none;color: var(--text-primary);font-weight: 700;font-size: 1.25rem;flex-shrink: 0;}
html.page-resmi .shade-stale-75d4 {width: 48px;height: 48px;border-radius: var(--radius-md);}
html.page-resmi .feature-e465 strong {font-size: 1.125rem;}
html.page-resmi .rough-782b {display: inline-flex;align-items: center;gap: 4px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;padding: 4px 8px;border-radius: var(--radius-sm);font-size: 0.6875rem;font-weight: 600;margin-left: var(--space-xs);}
html.page-resmi .purple-92db {display: flex;align-items: center;gap: var(--space-xs);flex: 1;justify-content: center;}
html.page-resmi .tag-5e1d, html.page-resmi .filter_cb4c {padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;font-weight: 500;border-radius: var(--radius-md);transition: all var(--transition-fast);background: none;border: none;cursor: pointer;font-size: 0.9375rem;display: inline-flex;align-items: center;gap: 4px;}
html.page-resmi .tag-5e1d:hover, html.page-resmi .filter_cb4c:hover {color: var(--primary);background: var(--neutral-50);}
html.page-resmi .tag-5e1d.fn-active-815d {color: var(--primary);background: rgba(14, 124, 102, 0.08);font-weight: 600;}
html.page-resmi .badge_6ff5 {position: relative;}
html.page-resmi .module_steel_5d9b {width: 12px;height: 12px;transition: transform var(--transition-fast);}
html.page-resmi .badge_6ff5.fn-active-815d .module_steel_5d9b, html.page-resmi .filter_cb4c[aria-expanded="true"] .module_steel_5d9b {transform: rotate(180deg);}
html.page-resmi .bright_2644 {position: absolute;top: 100%;left: 0;min-width: 200px;background: white;border-radius: var(--radius-md);box-shadow: var(--shadow-lg);padding: var(--space-sm);opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all var(--transition-base);z-index: 1000;}
html.page-resmi .badge_6ff5:hover .bright_2644 {opacity: 1;visibility: visible;transform: translateY(0);}
html.page-resmi .footer_10e5 {display: block;padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;border-radius: var(--radius-sm);transition: all var(--transition-fast);font-size: 0.875rem;}
html.page-resmi .footer_10e5:hover {background: var(--neutral-50);color: var(--primary);}
html.page-resmi .footer_10e5.fn-active-815d {color: var(--primary);background: rgba(14, 124, 102, 0.08);font-weight: 600;}
html.page-resmi .modal-35b9 {display: flex;align-items: center;gap: var(--space-sm);flex-shrink: 0;}
html.page-resmi .selected_69d7 {display: inline-flex;align-items: center;gap: var(--space-xs);padding: 10px 20px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;text-decoration: none;border-radius: var(--radius-md);font-weight: 600;font-size: 0.9375rem;box-shadow: var(--shadow-sm);transition: all var(--transition-base);border: none;cursor: pointer;}
html.page-resmi .selected_69d7:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);}
html.page-resmi .selected_69d7 svg {width: 18px;height: 18px;}
html.page-resmi .outer-9b31 {display: none;}
html.page-resmi .form_bc76 {display: none;background: none;border: none;cursor: pointer;padding: var(--space-sm);width: 40px;height: 40px;}
html.page-resmi .backdrop_soft_30f3 {width: 24px;height: 3px;background: #000;border-radius: 2px;position: relative;transition: all var(--transition-base);}
html.page-resmi .backdrop_soft_30f3::before, html.page-resmi .backdrop_soft_30f3::after {content: '';position: absolute;left: 0;width: 24px;height: 3px;background: #000;border-radius: 2px;transition: all var(--transition-base);}
html.page-resmi .backdrop_soft_30f3::before {top: -7px;}
html.page-resmi .backdrop_soft_30f3::after {top: 7px;}
html.page-resmi .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {background: transparent;}
html.page-resmi .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {transform: rotate(45deg);top: 0;}
html.page-resmi .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {transform: rotate(-45deg);top: 0;}
/* Mobile Responsive */
@media (max-width: 968px) {
  html.page-resmi .medium-63c7 {flex-wrap: wrap;justify-content: space-between;padding: var(--space-sm) var(--space-md);}
  html.page-resmi .feature-e465 {order: 1;}
  html.page-resmi .shade-stale-75d4 {width: 40px;height: 40px;}
  html.page-resmi .feature-e465 strong {font-size: 1rem;}
  html.page-resmi .rough-782b {font-size: 0.625rem;padding: 3px 6px;}
  html.page-resmi .modal-35b9 {order: 2;gap: var(--space-xs);}
  html.page-resmi .purple-92db {width: 100%;order: 3;flex-direction: column;display: none;background: white;padding: var(--space-md) 0;border-top: 1px solid var(--neutral-200);animation: slideDown-page-resmi var(--transition-base) ease-out;align-items: flex-start;}
  html.page-resmi .purple-92db.over_d418 {display: flex;}
  @keyframes slideDown-page-resmi {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}
  html.page-resmi .purple-92db .tag-5e1d, html.page-resmi .purple-92db .badge_6ff5 {width: 100%;}
  html.page-resmi .tag-5e1d, html.page-resmi .filter_cb4c {width: 100%;text-align: left;justify-content: flex-start;padding: var(--space-md);}
  html.page-resmi .badge_6ff5 {width: 100%;}
  html.page-resmi .bright_2644 {position: static;opacity: 1;visibility: visible;transform: none;box-shadow: none;border: none;padding-left: var(--space-lg);margin-top: var(--space-xs);background: var(--neutral-50);border-radius: var(--radius-sm);display: none;}
  html.page-resmi .badge_6ff5.fn-active-815d .bright_2644, html.page-resmi .filter_cb4c[aria-expanded="true"] + .bright_2644 {display: block;}
  html.page-resmi .footer_10e5 {text-align: left;}
  html.page-resmi .form_bc76 {display: flex !important;align-items: center;justify-content: center;padding: 10px;min-width: 44px;min-height: 44px;border-radius: var(--radius-sm);transition: all var(--transition-fast);}
  html.page-resmi .form_bc76:hover {background: var(--neutral-100);}
  html.page-resmi .form_bc76:active {background: var(--neutral-200);}
  html.page-resmi .selected_69d7 {padding: 8px 12px;font-size: 0.8125rem;min-width: auto;}
  html.page-resmi .selected_69d7 svg {width: 16px;height: 16px;}
  html.page-resmi .paragraph_ab28 {display: none;}
  html.page-resmi .outer-9b31 {display: inline;}
}


@media (max-width: 968px) {
      html.page-resmi .solid_4900 .content_down_60c9 > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      html.page-resmi .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-resmi .logo-5dae {
        max-width: 300px;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 768px) {
      /* Fix minmax grids that are too wide */
      html.page-resmi section div[style*="minmax(200px"] {
        grid-template-columns: 1fr !important;
      }
      
      html.page-resmi section div[style*="minmax(180px"] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
      }
      
      html.page-resmi section div[style*="minmax(150px"] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
      }
      
      /* Ensure all images are responsive */
      html.page-resmi section img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Reduce section padding */
      html.page-resmi section[style*="padding: 4rem 0"] {
        padding: 2.5rem 0 !important;
      }
      
      /* Reduce heading sizes */
      html.page-resmi section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-resmi section h3 {
        font-size: 1.25rem !important;
      }
      
      /* Prevent text overflow */
      html.page-resmi section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      
      /* Container padding */
      html.page-resmi .content_down_60c9, html.page-resmi section div[style*="max-width: 1000px"], html.page-resmi section div[style*="max-width: 900px"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      
      /* Tables overflow */
      html.page-resmi table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
    
    @media (max-width: 480px) {
      html.page-resmi .logo-5dae {
        max-width: 250px;
      }
      
      /* All minmax grids to single column */
      html.page-resmi section div[style*="minmax("] {
        grid-template-columns: 1fr !important;
      }
      
      /* Hero title smaller */
      html.page-resmi .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-resmi .solid_4900 p {
        font-size: 0.9375rem !important;
      }
      
      /* Tighter spacing */
      html.page-resmi section {
        padding: 2rem 0 !important;
      }
      
      html.page-resmi section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-resmi section h3 {
        font-size: 1.125rem !important;
      }
      
      html.page-resmi section p {
        font-size: 0.9375rem !important;
      }
      
      /* Increase container padding */
      html.page-resmi .content_down_60c9, html.page-resmi section div[style*="max-width"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }
    }

/* ===== tentang-kami.html ===== */
/* Modern CSS Variables - 2026 */
html.page-tentang-kami {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  
  /* Neutral Colors */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  
  /* Text Colors */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-tentang-kami * {
  box-sizing: border-box;
}
html.page-tentang-kami {
  scroll-behavior: smooth;
  font-size: 16px;
}
html.page-tentang-kami body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html.page-tentang-kami img {
  max-width: 100%;
  height: auto;
}
/* Skip Link for Accessibility */
html.page-tentang-kami .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
html.page-tentang-kami .grid-94b1:focus {
  top: 0;
}
/* Modern Header Styles */
html.page-tentang-kami .solid_3841 {position: sticky;top: 0;z-index: 1000;background: white;box-shadow: 0 2px 4px rgba(0,0,0,0.05);transition: all var(--transition-base);}
html.page-tentang-kami .solid_3841.card-medium-2236 {box-shadow: 0 4px 12px rgba(0,0,0,0.1);background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);}
html.page-tentang-kami .medium-63c7 {max-width: 1400px;margin: 0 auto;padding: var(--space-md) var(--space-lg);display: flex;align-items: center;justify-content: space-between;gap: var(--space-lg);}
html.page-tentang-kami .feature-e465 {display: flex;align-items: center;gap: var(--space-sm);text-decoration: none;color: var(--text-primary);font-weight: 700;font-size: 1.25rem;flex-shrink: 0;}
html.page-tentang-kami .shade-stale-75d4 {width: 48px;height: 48px;border-radius: var(--radius-md);}
html.page-tentang-kami .feature-e465 strong {font-size: 1.125rem;}
html.page-tentang-kami .rough-782b {display: inline-flex;align-items: center;gap: 4px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;padding: 4px 8px;border-radius: var(--radius-sm);font-size: 0.6875rem;font-weight: 600;margin-left: var(--space-xs);}
html.page-tentang-kami .purple-92db {display: flex;align-items: center;gap: var(--space-xs);flex: 1;justify-content: center;}
html.page-tentang-kami .tag-5e1d, html.page-tentang-kami .filter_cb4c {padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;font-weight: 500;border-radius: var(--radius-md);transition: all var(--transition-fast);background: none;border: none;cursor: pointer;font-size: 0.9375rem;display: inline-flex;align-items: center;gap: 4px;}
html.page-tentang-kami .tag-5e1d:hover, html.page-tentang-kami .filter_cb4c:hover {color: var(--primary);background: var(--neutral-50);}
html.page-tentang-kami .tag-5e1d.fn-active-815d {color: var(--primary);background: rgba(14, 124, 102, 0.08);font-weight: 600;}
html.page-tentang-kami .badge_6ff5 {position: relative;}
html.page-tentang-kami .module_steel_5d9b {width: 12px;height: 12px;transition: transform var(--transition-fast);}
html.page-tentang-kami .badge_6ff5.fn-active-815d .module_steel_5d9b, html.page-tentang-kami .filter_cb4c[aria-expanded="true"] .module_steel_5d9b {transform: rotate(180deg);}
html.page-tentang-kami .bright_2644 {position: absolute;top: 100%;left: 0;min-width: 200px;background: white;border-radius: var(--radius-md);box-shadow: var(--shadow-lg);padding: var(--space-sm);opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all var(--transition-base);z-index: 1000;}
html.page-tentang-kami .badge_6ff5:hover .bright_2644 {opacity: 1;visibility: visible;transform: translateY(0);}
html.page-tentang-kami .footer_10e5 {display: block;padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;border-radius: var(--radius-sm);transition: all var(--transition-fast);font-size: 0.875rem;}
html.page-tentang-kami .footer_10e5:hover {background: var(--neutral-50);color: var(--primary);}
html.page-tentang-kami .footer_10e5.fn-active-815d {color: var(--primary);background: rgba(14, 124, 102, 0.08);font-weight: 600;}
html.page-tentang-kami .modal-35b9 {display: flex;align-items: center;gap: var(--space-sm);flex-shrink: 0;}
html.page-tentang-kami .selected_69d7 {display: inline-flex;align-items: center;gap: var(--space-xs);padding: 10px 20px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;text-decoration: none;border-radius: var(--radius-md);font-weight: 600;font-size: 0.9375rem;box-shadow: var(--shadow-sm);transition: all var(--transition-base);border: none;cursor: pointer;}
html.page-tentang-kami .selected_69d7:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);}
html.page-tentang-kami .selected_69d7 svg {width: 18px;height: 18px;}
html.page-tentang-kami .outer-9b31 {display: none;}
html.page-tentang-kami .form_bc76 {display: none;background: none;border: none;cursor: pointer;padding: var(--space-sm);width: 40px;height: 40px;}
html.page-tentang-kami .backdrop_soft_30f3 {width: 24px;height: 3px;background: #000;border-radius: 2px;position: relative;transition: all var(--transition-base);}
html.page-tentang-kami .backdrop_soft_30f3::before, html.page-tentang-kami .backdrop_soft_30f3::after {content: '';position: absolute;left: 0;width: 24px;height: 3px;background: #000;border-radius: 2px;transition: all var(--transition-base);}
html.page-tentang-kami .backdrop_soft_30f3::before {top: -7px;}
html.page-tentang-kami .backdrop_soft_30f3::after {top: 7px;}
html.page-tentang-kami .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {background: transparent;}
html.page-tentang-kami .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {transform: rotate(45deg);top: 0;}
html.page-tentang-kami .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {transform: rotate(-45deg);top: 0;}
/* Mobile Responsive */
@media (max-width: 968px) {
  html.page-tentang-kami .medium-63c7 {flex-wrap: wrap;justify-content: space-between;padding: var(--space-sm) var(--space-md);}
  html.page-tentang-kami .feature-e465 {order: 1;}
  html.page-tentang-kami .shade-stale-75d4 {width: 40px;height: 40px;}
  html.page-tentang-kami .feature-e465 strong {font-size: 1rem;}
  html.page-tentang-kami .rough-782b {font-size: 0.625rem;padding: 3px 6px;}
  html.page-tentang-kami .modal-35b9 {order: 2;gap: var(--space-xs);}
  html.page-tentang-kami .purple-92db {width: 100%;order: 3;flex-direction: column;display: none;background: white;padding: var(--space-md) 0;border-top: 1px solid var(--neutral-200);animation: slideDown-page-tentang-kami var(--transition-base) ease-out;align-items: flex-start;}
  html.page-tentang-kami .purple-92db.over_d418 {display: flex;}
  @keyframes slideDown-page-tentang-kami {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}
  html.page-tentang-kami .purple-92db .tag-5e1d, html.page-tentang-kami .purple-92db .badge_6ff5 {width: 100%;}
  html.page-tentang-kami .tag-5e1d, html.page-tentang-kami .filter_cb4c {width: 100%;text-align: left;justify-content: flex-start;padding: var(--space-md);}
  html.page-tentang-kami .badge_6ff5 {width: 100%;}
  html.page-tentang-kami .bright_2644 {position: static;opacity: 1;visibility: visible;transform: none;box-shadow: none;border: none;padding-left: var(--space-lg);margin-top: var(--space-xs);background: var(--neutral-50);border-radius: var(--radius-sm);display: none;}
  html.page-tentang-kami .badge_6ff5.fn-active-815d .bright_2644, html.page-tentang-kami .filter_cb4c[aria-expanded="true"] + .bright_2644 {display: block;}
  html.page-tentang-kami .footer_10e5 {text-align: left;}
  html.page-tentang-kami .form_bc76 {display: flex !important;align-items: center;justify-content: center;padding: 10px;min-width: 44px;min-height: 44px;border-radius: var(--radius-sm);transition: all var(--transition-fast);}
  html.page-tentang-kami .form_bc76:hover {background: var(--neutral-100);}
  html.page-tentang-kami .form_bc76:active {background: var(--neutral-200);}
  html.page-tentang-kami .selected_69d7 {padding: 8px 12px;font-size: 0.8125rem;min-width: auto;}
  html.page-tentang-kami .selected_69d7 svg {width: 16px;height: 16px;}
  html.page-tentang-kami .paragraph_ab28 {display: none;}
  html.page-tentang-kami .outer-9b31 {display: inline;}
}


/* Hero Section Responsive - Grid Layout */
    @media (max-width: 968px) {
      html.page-tentang-kami .solid_4900 .content_down_60c9 > div[style*="grid-template-columns: 1fr 360px"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      html.page-tentang-kami .solid_4900 .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-tentang-kami .solid_4900 .logo-5dae {
        max-width: 320px;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 768px) {
      html.page-tentang-kami .solid_4900 h1 {
        font-size: 2rem !important;
      }
      
      html.page-tentang-kami .solid_4900 p {
        font-size: 1rem !important;
      }
      
      html.page-tentang-kami .solid_4900 .logo-5dae {
        max-width: 280px;
      }
      
      html.page-tentang-kami .solid_4900 .logo_473d div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
      }
      
      html.page-tentang-kami .solid_4900 .logo_473d div[style*="grid-template-columns: repeat(2, 1fr)"] > div {
        padding: 1rem !important;
      }
      
      html.page-tentang-kami .solid_4900 .logo_473d div[style*="grid-template-columns: repeat(2, 1fr)"] > div > div:first-child {
        font-size: 1.75rem !important;
      }
    }
    
    @media (max-width: 480px) {
      html.page-tentang-kami .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-tentang-kami .solid_4900 .logo-5dae {
        max-width: 240px;
      }
      
      html.page-tentang-kami .solid_4900 .logo_473d div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
      }
      
      html.page-tentang-kami .solid_4900 .logo-5dae img {
        padding: 1.5rem !important;
      }
    }


@media (max-width: 768px) {
      html.page-tentang-kami section div[style*="grid-template-columns: 150px 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }
      
      html.page-tentang-kami section div[style*="grid-template-columns: 150px 1fr"] img {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto;
        display: block;
      }
    }


@media (max-width: 768px) {
      /* Section padding */
      html.page-tentang-kami section {
        padding: 2.5rem 0 !important;
      }
      
      /* Headings */
      html.page-tentang-kami section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-tentang-kami section h3 {
        font-size: 1.25rem !important;
      }
      
      /* Container padding */
      html.page-tentang-kami .content_down_60c9, html.page-tentang-kami section div[style*="max-width"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      
      /* All grid layouts to single column */
      html.page-tentang-kami section div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }
      
      /* Images responsive */
      html.page-tentang-kami section img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Text overflow prevention */
      html.page-tentang-kami section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }
    
    @media (max-width: 480px) {
      html.page-tentang-kami section {
        padding: 2rem 0 !important;
      }
      
      html.page-tentang-kami section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-tentang-kami section p {
        font-size: 0.9375rem !important;
      }
      
      html.page-tentang-kami .content_down_60c9, html.page-tentang-kami section div[style*="max-width"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }
    }

/* ===== ulasan.html ===== */
/* Modern CSS Variables - 2026 */
html.page-ulasan {
  /* 2026 Modern Color Palette */
  --primary: #0E7C66;
  --primary-dark: #0A5C4C;
  --primary-light: #3D9B86;
  --secondary: #34a853;
  --accent: #1F6B8A;
  --warning: #fbbc04;
  
  /* Neutral Colors */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  
  /* Text Colors */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #80868b;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.page-ulasan * {
  box-sizing: border-box;
}
html.page-ulasan {
  scroll-behavior: smooth;
  font-size: 16px;
}
html.page-ulasan body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html.page-ulasan img {
  max-width: 100%;
  height: auto;
}
/* Skip Link for Accessibility */
html.page-ulasan .grid-94b1 {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
html.page-ulasan .grid-94b1:focus {
  top: 0;
}
/* Modern Header Styles */
html.page-ulasan .solid_3841 {position: sticky;top: 0;z-index: 1000;background: white;box-shadow: 0 2px 4px rgba(0,0,0,0.05);transition: all var(--transition-base);}
html.page-ulasan .solid_3841.card-medium-2236 {box-shadow: 0 4px 12px rgba(0,0,0,0.1);background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);}
html.page-ulasan .medium-63c7 {max-width: 1400px;margin: 0 auto;padding: var(--space-md) var(--space-lg);display: flex;align-items: center;justify-content: space-between;gap: var(--space-lg);}
html.page-ulasan .feature-e465 {display: flex;align-items: center;gap: var(--space-sm);text-decoration: none;color: var(--text-primary);font-weight: 700;font-size: 1.25rem;flex-shrink: 0;}
html.page-ulasan .shade-stale-75d4 {width: 48px;height: 48px;border-radius: var(--radius-md);}
html.page-ulasan .feature-e465 strong {font-size: 1.125rem;}
html.page-ulasan .rough-782b {display: inline-flex;align-items: center;gap: 4px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;padding: 4px 8px;border-radius: var(--radius-sm);font-size: 0.6875rem;font-weight: 600;margin-left: var(--space-xs);}
html.page-ulasan .purple-92db {display: flex;align-items: center;gap: var(--space-xs);flex: 1;justify-content: center;}
html.page-ulasan .tag-5e1d, html.page-ulasan .filter_cb4c {padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;font-weight: 500;border-radius: var(--radius-md);transition: all var(--transition-fast);background: none;border: none;cursor: pointer;font-size: 0.9375rem;display: inline-flex;align-items: center;gap: 4px;}
html.page-ulasan .tag-5e1d:hover, html.page-ulasan .filter_cb4c:hover {color: var(--primary);background: var(--neutral-50);}
html.page-ulasan .tag-5e1d.fn-active-815d {color: var(--primary);background: rgba(14, 124, 102, 0.08);font-weight: 600;}
html.page-ulasan .badge_6ff5 {position: relative;}
html.page-ulasan .module_steel_5d9b {width: 12px;height: 12px;transition: transform var(--transition-fast);}
html.page-ulasan .badge_6ff5.fn-active-815d .module_steel_5d9b, html.page-ulasan .filter_cb4c[aria-expanded="true"] .module_steel_5d9b {transform: rotate(180deg);}
html.page-ulasan .bright_2644 {position: absolute;top: 100%;left: 0;min-width: 200px;background: white;border-radius: var(--radius-md);box-shadow: var(--shadow-lg);padding: var(--space-sm);opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all var(--transition-base);z-index: 1000;}
html.page-ulasan .badge_6ff5:hover .bright_2644 {opacity: 1;visibility: visible;transform: translateY(0);}
html.page-ulasan .footer_10e5 {display: block;padding: var(--space-sm) var(--space-md);color: var(--text-secondary);text-decoration: none;border-radius: var(--radius-sm);transition: all var(--transition-fast);font-size: 0.875rem;}
html.page-ulasan .footer_10e5:hover {background: var(--neutral-50);color: var(--primary);}
html.page-ulasan .footer_10e5.fn-active-815d {color: var(--primary);background: rgba(14, 124, 102, 0.08);font-weight: 600;}
html.page-ulasan .modal-35b9 {display: flex;align-items: center;gap: var(--space-sm);flex-shrink: 0;}
html.page-ulasan .selected_69d7 {display: inline-flex;align-items: center;gap: var(--space-xs);padding: 10px 20px;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color: white;text-decoration: none;border-radius: var(--radius-md);font-weight: 600;font-size: 0.9375rem;box-shadow: var(--shadow-sm);transition: all var(--transition-base);border: none;cursor: pointer;}
html.page-ulasan .selected_69d7:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);}
html.page-ulasan .selected_69d7 svg {width: 18px;height: 18px;}
html.page-ulasan .outer-9b31 {display: none;}
html.page-ulasan .form_bc76 {display: none;background: none;border: none;cursor: pointer;padding: var(--space-sm);width: 40px;height: 40px;}
html.page-ulasan .backdrop_soft_30f3 {width: 24px;height: 3px;background: #000;border-radius: 2px;position: relative;transition: all var(--transition-base);}
html.page-ulasan .backdrop_soft_30f3::before, html.page-ulasan .backdrop_soft_30f3::after {content: '';position: absolute;left: 0;width: 24px;height: 3px;background: #000;border-radius: 2px;transition: all var(--transition-base);}
html.page-ulasan .backdrop_soft_30f3::before {top: -7px;}
html.page-ulasan .backdrop_soft_30f3::after {top: 7px;}
html.page-ulasan .form_bc76[aria-expanded="true"] .backdrop_soft_30f3 {background: transparent;}
html.page-ulasan .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::before {transform: rotate(45deg);top: 0;}
html.page-ulasan .form_bc76[aria-expanded="true"] .backdrop_soft_30f3::after {transform: rotate(-45deg);top: 0;}
/* Mobile Responsive */
@media (max-width: 968px) {
  html.page-ulasan .medium-63c7 {flex-wrap: wrap;justify-content: space-between;padding: var(--space-sm) var(--space-md);}
  html.page-ulasan .feature-e465 {order: 1;}
  html.page-ulasan .shade-stale-75d4 {width: 40px;height: 40px;}
  html.page-ulasan .feature-e465 strong {font-size: 1rem;}
  html.page-ulasan .rough-782b {font-size: 0.625rem;padding: 3px 6px;}
  html.page-ulasan .modal-35b9 {order: 2;gap: var(--space-xs);}
  html.page-ulasan .purple-92db {width: 100%;order: 3;flex-direction: column;display: none;background: white;padding: var(--space-md) 0;border-top: 1px solid var(--neutral-200);animation: slideDown-page-ulasan var(--transition-base) ease-out;align-items: flex-start;}
  html.page-ulasan .purple-92db.over_d418 {display: flex;}
  @keyframes slideDown-page-ulasan {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}
  html.page-ulasan .purple-92db .tag-5e1d, html.page-ulasan .purple-92db .badge_6ff5 {width: 100%;}
  html.page-ulasan .tag-5e1d, html.page-ulasan .filter_cb4c {width: 100%;text-align: left;justify-content: flex-start;padding: var(--space-md);}
  html.page-ulasan .badge_6ff5 {width: 100%;}
  html.page-ulasan .bright_2644 {position: static;opacity: 1;visibility: visible;transform: none;box-shadow: none;border: none;padding-left: var(--space-lg);margin-top: var(--space-xs);background: var(--neutral-50);border-radius: var(--radius-sm);display: none;}
  html.page-ulasan .badge_6ff5.fn-active-815d .bright_2644, html.page-ulasan .filter_cb4c[aria-expanded="true"] + .bright_2644 {display: block;}
  html.page-ulasan .footer_10e5 {text-align: left;}
  html.page-ulasan .form_bc76 {display: flex !important;align-items: center;justify-content: center;padding: 10px;min-width: 44px;min-height: 44px;border-radius: var(--radius-sm);transition: all var(--transition-fast);}
  html.page-ulasan .form_bc76:hover {background: var(--neutral-100);}
  html.page-ulasan .form_bc76:active {background: var(--neutral-200);}
  html.page-ulasan .selected_69d7 {padding: 8px 12px;font-size: 0.8125rem;min-width: auto;}
  html.page-ulasan .selected_69d7 svg {width: 16px;height: 16px;}
  html.page-ulasan .paragraph_ab28 {display: none;}
  html.page-ulasan .outer-9b31 {display: inline;}
}
/* Star Rating Visual */
html.page-ulasan .aside_first_b48b {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
html.page-ulasan .button_smooth_910a {
  color: #ffa726;
  font-size: 1.25rem;
}
  html.page-ulasan .button_smooth_910a.short-6cb1 {
    color: #ff9800;
  }
  
  html.page-ulasan .button_smooth_910a.icon-0a27 {
    background: linear-gradient(90deg, #ff9800 50%, #e0e0e0 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  /* Footer legal links - element selector survives CMS obfuscation */
  html.page-ulasan footer > div > div:last-child > div:last-child a {
    color: #808080 !important;
    text-decoration: none !important;
  }
  html.page-ulasan footer > div > div:last-child > div:last-child a:hover {
    color: #ffffff !important;
  }


/* Hero Section Mobile */
    @media (max-width: 968px) {
      html.page-ulasan .solid_4900 .content_down_60c9 > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      html.page-ulasan .surface_d830 {
        order: -1;
        max-width: 100%;
      }
      
      html.page-ulasan .logo-5dae {
        max-width: 300px;
        margin: 0 auto;
      }
      
      html.page-ulasan .logo_473d > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }
      
      /* 3-column stats to 1 column on tablet */
      html.page-ulasan .logo_473d > div[style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }
    }
    
    @media (max-width: 480px) {
      html.page-ulasan .logo-5dae {
        max-width: 250px;
      }
      
      /* Hero title smaller on mobile */
      html.page-ulasan .solid_4900 h1 {
        font-size: 2rem !important;
      }
      
      html.page-ulasan .solid_4900 p {
        font-size: 1rem !important;
      }
    }
    
    /* Rating Breakdown & Sentiment Analysis Mobile Fix */
    @media (max-width: 768px) {
      /* Make all 2-column grids single column on mobile */
      html.page-ulasan section div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }
      
      /* Rating bar chart mobile adjustments */
      html.page-ulasan section div[style*="display: flex"][style*="gap: 1rem"] span[style*="width: 80px"] {
        width: 60px !important;
        font-size: 0.875rem !important;
      }
      
      /* Ensure text doesn't overflow */
      html.page-ulasan section h2 {
        font-size: 1.5rem !important;
      }
      
      html.page-ulasan section h3 {
        font-size: 1.25rem !important;
      }
      
      /* Review cards mobile - horizontal layout to vertical */
      html.page-ulasan section div[style*="display: flex"][style*="gap: 1.5rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
      }
      
      /* Ensure all images are responsive */
      html.page-ulasan section img {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Reduce padding on sections */
      html.page-ulasan section[style*="padding: 4rem 0"] {
        padding: 2.5rem 0 !important;
      }
      
      /* Container max-width adjustments - ADD LEFT/RIGHT PADDING */
      html.page-ulasan .content_down_60c9, html.page-ulasan section div[style*="max-width: 1000px"], html.page-ulasan section div[style*="max-width: 900px"], html.page-ulasan section div[style*="max-width: 700px"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      
      /* Prevent text wrapping issues */
      html.page-ulasan section * {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }
    
    @media (max-width: 480px) {
      html.page-ulasan .logo-5dae {
        max-width: 250px;
      }
      
      /* Hero title smaller */
      html.page-ulasan .solid_4900 h1 {
        font-size: 1.75rem !important;
      }
      
      html.page-ulasan .solid_4900 p {
        font-size: 0.9375rem !important;
      }
      
      /* Further reduce text on very small screens */
      html.page-ulasan section h2 {
        font-size: 1.25rem !important;
      }
      
      html.page-ulasan section p {
        font-size: 0.9375rem !important;
      }
      
      /* Tighter spacing */
      html.page-ulasan section {
        padding: 2rem 0 !important;
      }
      
      /* Rating bar labels even smaller */
      html.page-ulasan section div[style*="display: flex"][style*="gap: 1rem"] span[style*="width: 60px"], html.page-ulasan section div[style*="display: flex"][style*="gap: 1rem"] span[style*="width: 80px"] {
        width: 50px !important;
        font-size: 0.8125rem !important;
      }
      
      /* Increase container padding */
      html.page-ulasan .content_down_60c9, html.page-ulasan section div[style*="max-width"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }
    }

/* Shared crumb and nav cleanup */
.site-crumb {
  background: #F4F7F6;
  border-bottom: 1px solid #E2E8E6;
  padding: 1rem 0;
}
.site-crumb .content_down_60c9 {
  padding-top: 0;
  padding-bottom: 0;
}
.site-crumb .green_8518 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0.1rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5C6562;
  list-style: none;
}
.site-crumb .green_8518 a {
  color: #0E7C66;
  font-weight: 600;
  text-decoration: none;
}
.site-crumb .green_8518 a:hover {
  text-decoration: underline;
}
.site-crumb .accordion-basic-6c09 {
  color: #8AA099;
  line-height: 1;
}
ul.purple-92db,
ul.purple-92db li {
  list-style: none;
}