/* Tile Mega Menu — Crimson & Ruby Red Edition */

/* Design Tokens - Updated to Crimson & Ruby Red Palette */
:root {
  --mm2-bg: #FFF1F2; /* Warna dasar soft crimson yang bersih */
  --mm2-surface: #FFFFFF;
  --mm2-surface-elevated: rgba(255, 241, 242, 0.98);
  --mm2-muted: #FFE4E6; /* Rose / Crimson lembut (rose-100) */
  --mm2-border: #FECDD3; /* Border rose lembut */
  --mm2-border-strong: #881337; /* Deep Crimson */
  --mm2-accent: #E11D48; /* Ruby Red Accent */
  --mm2-accent-hover: #881337; /* Deep Crimson Hover */
  --mm2-accent-10: rgba(225, 29, 72, 0.10); /* Ruby Red 10% */
  --mm2-accent-20: rgba(225, 29, 72, 0.20); /* Ruby Red 20% */
  --mm2-fg: #4C0519; /* Teks utama (Crimson Dark) */
  --mm2-fg-muted: #881337; /* Teks sekunder (Deep Crimson) */
  --mm2-fg-light: #9F1239; /* Teks ringan (Muted Crimson Rose) */
  
  /* Shadows adjusted for Crimson/Ruby Red tones */
  --mm2-shadow-sm: 0 2px 8px rgba(76, 5, 25, 0.06);
  --mm2-shadow-md: 0 8px 24px rgba(76, 5, 25, 0.10);
  --mm2-shadow-lg: 0 20px 60px rgba(76, 5, 25, 0.14);
  --mm2-shadow-xl: 0 32px 80px rgba(76, 5, 25, 0.18);
  --mm2-shadow-hover: 0 16px 40px rgba(225, 29, 72, 0.15); /* Efek bayangan Ruby Red lembut */
  
  --mm2-radius-xl: 20px;
  --mm2-radius-lg: 16px;
  --mm2-radius-md: 12px;
  --mm2-radius-sm: 10px;
  
  --mm2-z: 60;
  --mm2-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trigger Button */
.mm2-trigger {
  border: 1.5px solid var(--mm2-border);
  background: var(--mm2-surface);
  color: var(--mm2-fg);
  font-weight: 600;
}
.mm2-trigger:hover { 
  border-color: var(--mm2-accent); 
  background: var(--mm2-muted);
}

/* Panel - Glassmorphism Crimson */
.mm2-panel {
  background: var(--mm2-surface-elevated);
  border: 1.5px solid var(--mm2-border-strong);
}

/* Cards & Icons */
.mm2-card {
  border: 1.5px solid var(--mm2-border);
  color: var(--mm2-fg);
}
.mm2-card:hover { 
  border-color: var(--mm2-accent);
  background: linear-gradient(135deg, #FFFFFF, #FFF1F2);
  box-shadow: var(--mm2-shadow-hover);
}

.mm2-card .mm2-ico {
  background: linear-gradient(135deg, #FFF1F2, #FECDD3); /* Gradasi background icon Crimson & Rose */
  border: 1.5px solid var(--mm2-border-strong);
  color: var(--mm2-accent-hover);
}
.mm2-card:hover .mm2-ico {
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.2); /* Efek glow bayangan Ruby Red saat hover */
}

/* Sub-navigation Active State */
.mm2-subitem::before { background: var(--mm2-accent); }

.mm2-subitem.active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.08), rgba(225, 29, 72, 0.04)); /* Gradasi Ruby Red transparan */
  border-color: var(--mm2-accent-20);
  color: var(--mm2-accent-hover);
}

/* Links & Thumbnails */
.mm2-link {
  border: 1.5px solid var(--mm2-border);
}
.mm2-link:hover { 
  border-color: var(--mm2-accent);
}

.mm2-thumb {
  border: 1.5px solid var(--mm2-border);
}
.mm2-link:hover .mm2-thumb {
  border-color: var(--mm2-accent);
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.15); /* Efek glow bayangan Ruby Red */
}

/* "See all" highlight */
.mm2-seeall {
  border: 2px dashed var(--mm2-accent);
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.08), rgba(225, 29, 72, 0.02));
}
.mm2-seeall:hover {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.14), rgba(225, 29, 72, 0.06));
}

/* Mobile Adjustments */
@media (max-width: 960px) {
  .mm2-mobile-close {
    border: 1px solid rgba(254, 205, 211, 0.6);
    background: rgba(255, 241, 242, 0.95);
  }
  .mm2-mobile-close:hover {
    background: rgba(254, 226, 226, 0.95);
    border-color: rgba(153, 27, 27, 0.8);
    color: #991B1B;
  }
  .mm2-subitem.active {
    background: linear-gradient(135deg, var(--mm2-accent), var(--mm2-accent-hover)); /* Gradasi solid Ruby Red aktif */
    color: white;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3); /* Bayangan Ruby Red solid */
  }
}